Dark Pricing Tables in CSS, Bootstrap & Tailwind

<div><span class="lbl">Tier cards with a gradient-bordered plan</span>
<section class="ds" aria-labelledby="or-title">
  <header class="ds-head"><p class="ds-kicker">Orbitrun CI</p><h2 class="ds-title" id="or-title">Builds that keep pace with your team</h2><p class="ds-sub">Every plan runs on Linux, macOS and Windows runners. Prices in US dollars.</p></header>
  <div class="ds-grid">
    <article class="ds-card" aria-labelledby="or-hobby">
      <div class="ds-top"><h3 id="or-hobby">Hobby</h3></div>
      <p class="ds-desc">For side projects and open source.</p>
      <p class="ds-price"><span class="ds-amt">$0</span><span class="ds-per">free forever</span></p>
      <a class="ds-btn" href="#">Start building</a>
      <ul class="ds-list">
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="ds-num">500</span> build minutes a month</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="ds-num">1</span> concurrent job</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="ds-num">7-day</span> build logs</span></li>
        <li class="no"><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="sr-only">Not included: </span>Preview environments</span></li>
        <li class="no"><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="sr-only">Not included: </span>Single sign-on</span></li>
      </ul>
    </article>
    <article class="ds-card is-rec" aria-labelledby="or-pro">
      <div class="ds-top"><h3 id="or-pro">Pro</h3><p class="ds-badge">Recommended</p></div>
      <p class="ds-desc">For a team shipping every day.</p>
      <p class="ds-price"><span class="ds-amt">$20</span><span class="ds-per">per month</span></p>
      <a class="ds-btn solid" href="#">Upgrade to Pro</a>
      <ul class="ds-list">
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="ds-num">3,000</span> build minutes a month</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="ds-num">4</span> concurrent jobs</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="ds-num">30-day</span> build logs</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Preview environments</span></li>
        <li class="no"><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="sr-only">Not included: </span>Single sign-on</span></li>
      </ul>
    </article>
    <article class="ds-card" aria-labelledby="or-team">
      <div class="ds-top"><h3 id="or-team">Team</h3></div>
      <p class="ds-desc">For organisations with many pipelines.</p>
      <p class="ds-price"><span class="ds-amt">$65</span><span class="ds-per">per month</span></p>
      <a class="ds-btn" href="#">Upgrade to Team</a>
      <ul class="ds-list">
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="ds-num">10,000</span> build minutes a month</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="ds-num">12</span> concurrent jobs</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="ds-num">90-day</span> build logs</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Preview environments</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Single sign-on</span></li>
      </ul>
    </article>
  </div>
</section></div>

<div><span class="lbl">Server size picker with radio cards</span>
<section class="ds ds-picker" aria-labelledby="kc-title">
  <p class="ds-kicker">Kestrel Cloud</p><h2 class="ds-title" id="kc-title">Pick a server size</h2><p class="ds-sub">Hourly billing, capped at the monthly price. Resize at any time.</p>
  <form action="#">
    <fieldset class="ds-sizes">
      <legend>Server size</legend>
      <div class="ds-size-grid">
        <label class="ds-size"><input type="radio" name="kc-size" value="nano"><span class="ds-size-name">Nano</span><span class="ds-spec">1 vCPU · 1 GB RAM<br>25 GB SSD</span><span class="ds-size-price">$6 <small>per month</small></span></label>
        <label class="ds-size"><input type="radio" name="kc-size" value="micro"><span class="ds-size-name">Micro</span><span class="ds-spec">1 vCPU · 2 GB RAM<br>50 GB SSD</span><span class="ds-size-price">$12 <small>per month</small></span></label>
        <label class="ds-size"><input type="radio" name="kc-size" value="small" checked><span class="ds-size-name">Small</span><span class="ds-size-tag">Recommended</span><span class="ds-spec">2 vCPU · 4 GB RAM<br>80 GB SSD</span><span class="ds-size-price">$24 <small>per month</small></span></label>
        <label class="ds-size"><input type="radio" name="kc-size" value="medium"><span class="ds-size-name">Medium</span><span class="ds-spec">4 vCPU · 8 GB RAM<br>160 GB SSD</span><span class="ds-size-price">$48 <small>per month</small></span></label>
      </div>
    </fieldset>
    <div class="ds-bar">
      <p class="ds-sum"><span data-size="nano"><b>Nano</b>: 1 vCPU, 1 GB RAM, 25 GB SSD, $6 a month</span><span data-size="micro"><b>Micro</b>: 1 vCPU, 2 GB RAM, 50 GB SSD, $12 a month</span><span data-size="small"><b>Small</b>: 2 vCPU, 4 GB RAM, 80 GB SSD, $24 a month</span><span data-size="medium"><b>Medium</b>: 4 vCPU, 8 GB RAM, 160 GB SSD, $48 a month</span></p>
      <button class="ds-btn solid" type="submit">Deploy server</button>
    </div>
  </form>
</section></div>

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Dark pricing: tier cards with a gradient-bordered plan, and a server picker built from radio cards. No JavaScript. */
.ds{--ds-bg:#0b0f17;--ds-card:#121826;--ds-line:#232c3d;--ds-edge:#3a4660;--ds-text:#e6e9f2;--ds-muted:#9aa4b8;--ds-accent:#22d3ee;--ds-accent-text:#67e8f9;--ds-violet:#a78bfa;--ds-on-accent:#06202a;--ds-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--ds-radius:20px;color:var(--ds-text)}
.ds *,.ds *::before,.ds *::after{box-sizing:border-box}
:where(.ds) h2,:where(.ds) h3,:where(.ds) p{margin:0}

.ds-kicker{font-family:var(--ds-mono);font-size:.8rem;font-weight:600;color:var(--ds-accent-text)}
.ds-title{margin-top:10px;font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;line-height:1.15;letter-spacing:-.025em}
.ds-sub{margin-top:12px;font-size:1rem;line-height:1.55;color:var(--ds-muted)}
.ds-head{max-width:640px;margin:0 auto 44px;text-align:center}
.ds-btn{display:block;margin-top:24px;padding:12px 18px;border:1px solid var(--ds-edge);border-radius:12px;background:transparent;color:var(--ds-text);font:inherit;font-size:.95rem;font-weight:700;line-height:1.4;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s}
.ds-btn:hover{background:#1a2233;border-color:#56627c}
.ds-btn:focus-visible{outline:2px solid var(--ds-accent-text);outline-offset:3px}
.ds-btn.solid{border-color:var(--ds-accent);background:var(--ds-accent);color:var(--ds-on-accent)}
.ds-btn.solid:hover{background:var(--ds-accent-text);border-color:var(--ds-accent-text)}
/* 1. tier cards */
.ds-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:992px){.ds-grid{grid-template-columns:repeat(3,1fr)}}
.ds-card{position:relative;display:flex;flex-direction:column;padding:30px 28px;background:var(--ds-card);border:1px solid var(--ds-line);border-radius:var(--ds-radius)}
.ds-card.is-rec{background:linear-gradient(var(--ds-card),var(--ds-card)) padding-box,linear-gradient(140deg,var(--ds-accent),var(--ds-violet)) border-box;border-color:transparent;box-shadow:0 30px 60px -30px rgba(34,211,238,.45)}
.ds-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.ds-card h3{font-size:1.15rem;font-weight:700}
.ds-badge{padding:4px 10px;border:1px solid rgba(103,232,249,.4);border-radius:999px;background:rgba(34,211,238,.1);color:var(--ds-accent-text);font-size:.72rem;font-weight:700;line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
.ds-desc{margin-top:8px;font-size:.92rem;line-height:1.5;color:var(--ds-muted)}
.ds-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:22px}
.ds-amt{font-size:2.8rem;font-weight:800;line-height:1;letter-spacing:-.04em}
.ds-per{font-size:.9rem;color:var(--ds-muted)}
.ds-list{display:grid;gap:12px;margin:24px 0 0;padding:22px 0 0;border-top:1px solid var(--ds-line);list-style:none;font-size:.92rem;line-height:1.4}
.ds-list li{display:flex;align-items:flex-start;gap:10px}
.ds-list svg{flex:none;margin-top:1px;color:var(--ds-accent-text)}
.ds-list .no{color:var(--ds-muted)}
.ds-list .no svg{color:var(--ds-muted)}
.ds-num{font-family:var(--ds-mono);font-size:.88rem;font-weight:600;color:var(--ds-text)}
/* 2. server picker */
.ds-picker{padding:32px 30px;background:var(--ds-card);border:1px solid var(--ds-line);border-radius:var(--ds-radius)}
.ds-picker .ds-sub{margin-top:8px;font-size:.94rem}
.ds-sizes{min-width:0;margin:26px 0 0;padding:0;border:0}
.ds-sizes legend{padding:0;margin-bottom:12px;font-size:.88rem;font-weight:700}
.ds-size-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:576px){.ds-size-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:992px){.ds-size-grid{grid-template-columns:repeat(4,1fr)}}
.ds-size{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px 18px 16px;border:1.5px solid var(--ds-line);border-radius:14px;background:var(--ds-bg);cursor:pointer;transition:border-color .2s,background-color .2s}
.ds-size:hover{border-color:var(--ds-edge)}
.ds-size:has(input:checked){border-color:var(--ds-accent);background:#0f1d27}
.ds-size input{position:absolute;top:16px;right:16px;width:20px;height:20px;margin:0;border:2px solid #8b95ab;border-radius:50%;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.ds-size input:checked{border-color:var(--ds-accent);background:var(--ds-accent);box-shadow:inset 0 0 0 4px var(--ds-bg)}
.ds-size input:focus-visible{outline:2px solid var(--ds-accent-text);outline-offset:3px}
.ds-size-name{font-size:1.05rem;font-weight:700}
.ds-size-tag{align-self:flex-start;margin:2px 0 4px;padding:3px 8px;border-radius:999px;background:rgba(34,211,238,.12);color:var(--ds-accent-text);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ds-spec{font-family:var(--ds-mono);font-size:.8rem;line-height:1.6;color:var(--ds-muted)}
.ds-size-price{margin-top:10px;font-size:1.5rem;font-weight:800;letter-spacing:-.03em}
.ds-size-price small{font-size:.8rem;font-weight:500;letter-spacing:0;color:var(--ds-muted)}
.ds-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:22px;padding-top:22px;border-top:1px solid var(--ds-line)}
.ds-sum{font-size:.95rem;line-height:1.5;color:var(--ds-muted)}
.ds-sum b{color:var(--ds-text)}
.ds-sum [data-size]{display:none}
.ds-picker:has([value=nano]:checked) [data-size=nano],.ds-picker:has([value=micro]:checked) [data-size=micro],
.ds-picker:has([value=small]:checked) [data-size=small],.ds-picker:has([value=medium]:checked) [data-size=medium]{display:inline}
.ds-bar .ds-btn{margin-top:0;padding-inline:28px}
@media (max-width:575.98px){.ds-bar .ds-btn{width:100%}}
@media (prefers-reduced-motion:reduce){.ds-btn,.ds-size{transition:none}}

<div><span class="lbl">Tier cards with a gradient-bordered plan</span>
<section class="ds" aria-labelledby="or-title">
  <header class="ds-head text-center"><p class="ds-kicker">Orbitrun CI</p><h2 class="ds-title" id="or-title">Builds that keep pace with your team</h2><p class="ds-sub">Every plan runs on Linux, macOS and Windows runners. Prices in US dollars.</p></header>
  <div class="row row-cols-1 row-cols-lg-3 g-4">
    <div class="col"><article class="card ds-card h-100" aria-labelledby="or-hobby"><div class="card-body d-flex flex-column">
        <div class="ds-top d-flex flex-wrap align-items-center justify-content-between"><h3 id="or-hobby">Hobby</h3></div>
        <p class="ds-desc">For side projects and open source.</p>
        <p class="ds-price d-flex flex-wrap align-items-baseline"><span class="ds-amt">$0</span><span class="ds-per">free forever</span></p>
        <a class="btn ds-btn d-block" href="#">Start building</a>
        <ul class="ds-list list-unstyled">
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span><span class="ds-num">500</span> build minutes a month</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span><span class="ds-num">1</span> concurrent job</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span><span class="ds-num">7-day</span> build logs</span></li>
          <li class="no"><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="visually-hidden">Not included: </span>Preview environments</span></li>
          <li class="no"><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="visually-hidden">Not included: </span>Single sign-on</span></li>
        </ul>
      </div></article></div>
    <div class="col"><article class="card ds-card h-100 is-rec" aria-labelledby="or-pro"><div class="card-body d-flex flex-column">
        <div class="ds-top d-flex flex-wrap align-items-center justify-content-between"><h3 id="or-pro">Pro</h3><p class="badge rounded-pill ds-badge">Recommended</p></div>
        <p class="ds-desc">For a team shipping every day.</p>
        <p class="ds-price d-flex flex-wrap align-items-baseline"><span class="ds-amt">$20</span><span class="ds-per">per month</span></p>
        <a class="btn ds-btn solid d-block" href="#">Upgrade to Pro</a>
        <ul class="ds-list list-unstyled">
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span><span class="ds-num">3,000</span> build minutes a month</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span><span class="ds-num">4</span> concurrent jobs</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span><span class="ds-num">30-day</span> build logs</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>Preview environments</span></li>
          <li class="no"><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="visually-hidden">Not included: </span>Single sign-on</span></li>
        </ul>
      </div></article></div>
    <div class="col"><article class="card ds-card h-100" aria-labelledby="or-team"><div class="card-body d-flex flex-column">
        <div class="ds-top d-flex flex-wrap align-items-center justify-content-between"><h3 id="or-team">Team</h3></div>
        <p class="ds-desc">For organisations with many pipelines.</p>
        <p class="ds-price d-flex flex-wrap align-items-baseline"><span class="ds-amt">$65</span><span class="ds-per">per month</span></p>
        <a class="btn ds-btn d-block" href="#">Upgrade to Team</a>
        <ul class="ds-list list-unstyled">
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span><span class="ds-num">10,000</span> build minutes a month</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span><span class="ds-num">12</span> concurrent jobs</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span><span class="ds-num">90-day</span> build logs</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>Preview environments</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>Single sign-on</span></li>
        </ul>
      </div></article></div>
  </div>
</section></div>

<div><span class="lbl">Server size picker with radio cards</span>
<section class="ds card ds-card ds-picker" aria-labelledby="kc-title"><div class="card-body">
  <p class="ds-kicker">Kestrel Cloud</p><h2 class="ds-title" id="kc-title">Pick a server size</h2><p class="ds-sub">Hourly billing, capped at the monthly price. Resize at any time.</p>
  <form action="#">
    <fieldset class="ds-sizes">
      <legend>Server size</legend>
      <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 ds-size-grid">
        <div class="col"><label class="ds-size"><input class="form-check-input" type="radio" name="kc-size" value="nano"><span class="ds-size-name">Nano</span><span class="ds-spec">1 vCPU · 1 GB RAM<br>25 GB SSD</span><span class="ds-size-price">$6 <small>per month</small></span></label></div>
        <div class="col"><label class="ds-size"><input class="form-check-input" type="radio" name="kc-size" value="micro"><span class="ds-size-name">Micro</span><span class="ds-spec">1 vCPU · 2 GB RAM<br>50 GB SSD</span><span class="ds-size-price">$12 <small>per month</small></span></label></div>
        <div class="col"><label class="ds-size"><input class="form-check-input" type="radio" name="kc-size" value="small" checked><span class="ds-size-name">Small</span><span class="badge rounded-pill ds-size-tag">Recommended</span><span class="ds-spec">2 vCPU · 4 GB RAM<br>80 GB SSD</span><span class="ds-size-price">$24 <small>per month</small></span></label></div>
        <div class="col"><label class="ds-size"><input class="form-check-input" type="radio" name="kc-size" value="medium"><span class="ds-size-name">Medium</span><span class="ds-spec">4 vCPU · 8 GB RAM<br>160 GB SSD</span><span class="ds-size-price">$48 <small>per month</small></span></label></div>
      </div>
    </fieldset>
    <div class="ds-bar d-flex flex-wrap align-items-center justify-content-between">
      <p class="ds-sum"><span data-size="nano"><b>Nano</b>: 1 vCPU, 1 GB RAM, 25 GB SSD, $6 a month</span><span data-size="micro"><b>Micro</b>: 1 vCPU, 2 GB RAM, 50 GB SSD, $12 a month</span><span data-size="small"><b>Small</b>: 2 vCPU, 4 GB RAM, 80 GB SSD, $24 a month</span><span data-size="medium"><b>Medium</b>: 4 vCPU, 8 GB RAM, 160 GB SSD, $48 a month</span></p>
      <button class="btn ds-btn solid" type="submit">Deploy server</button>
    </div>
  </form>
</div></section></div>

/* Dark pricing in Bootstrap's dark colour mode (data-bs-theme="dark"): .card, .badge, .btn and .form-check-input radios, restyled through CSS variables. */
.ds{--ds-bg:#0b0f17;--ds-card:#121826;--ds-line:#232c3d;--ds-edge:#3a4660;--ds-text:#e6e9f2;--ds-muted:#9aa4b8;--ds-accent:#22d3ee;--ds-accent-text:#67e8f9;--ds-violet:#a78bfa;--ds-on-accent:#06202a;--ds-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ds-text)}
:where(.ds) h2,:where(.ds) h3,:where(.ds) p{margin:0}

.ds-kicker{font-family:var(--ds-mono);font-size:.8rem;font-weight:600;color:var(--ds-accent-text)}
.ds .ds-title{margin-top:10px;font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;line-height:1.15;letter-spacing:-.025em;color:var(--ds-text)}
.ds .ds-sub{margin-top:12px;font-size:1rem;line-height:1.55;color:var(--ds-muted)}
.ds-head{max-width:640px;margin:0 auto 44px}
.ds-btn{--bs-btn-padding-y:12px;--bs-btn-padding-x:18px;--bs-btn-font-size:.95rem;--bs-btn-font-weight:700;--bs-btn-line-height:1.4;--bs-btn-border-radius:12px;--bs-btn-color:var(--ds-text);--bs-btn-bg:transparent;--bs-btn-border-color:var(--ds-edge);
  --bs-btn-hover-color:var(--ds-text);--bs-btn-hover-bg:#1a2233;--bs-btn-hover-border-color:#56627c;--bs-btn-active-color:var(--ds-text);--bs-btn-active-bg:#1a2233;--bs-btn-active-border-color:#56627c;margin-top:24px;transition:background-color .2s,border-color .2s}
.ds-btn:focus-visible{outline:2px solid var(--ds-accent-text);outline-offset:3px;box-shadow:none}
.ds-btn.solid{--bs-btn-color:var(--ds-on-accent);--bs-btn-bg:var(--ds-accent);--bs-btn-border-color:var(--ds-accent);--bs-btn-hover-color:var(--ds-on-accent);--bs-btn-hover-bg:var(--ds-accent-text);--bs-btn-hover-border-color:var(--ds-accent-text);--bs-btn-active-color:var(--ds-on-accent);--bs-btn-active-bg:var(--ds-accent-text);--bs-btn-active-border-color:var(--ds-accent-text)}
.ds-card{--bs-card-spacer-y:30px;--bs-card-spacer-x:28px;--bs-card-bg:var(--ds-card);--bs-card-border-color:var(--ds-line);--bs-card-border-radius:20px;--bs-card-inner-border-radius:19px;--bs-card-color:var(--ds-text)}
.ds-card.is-rec{background:linear-gradient(var(--ds-card),var(--ds-card)) padding-box,linear-gradient(140deg,var(--ds-accent),var(--ds-violet)) border-box;--bs-card-border-color:transparent;box-shadow:0 30px 60px -30px rgba(34,211,238,.45)}
.ds-top{gap:8px}
.ds-card h3{font-size:1.15rem;font-weight:700}
.ds-badge{--bs-badge-padding-x:10px;--bs-badge-padding-y:4px;--bs-badge-font-size:.72rem;--bs-badge-font-weight:700;--bs-badge-color:var(--ds-accent-text);border:1px solid rgba(103,232,249,.4);background:rgba(34,211,238,.1);line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
.ds .ds-desc{margin-top:8px;font-size:.92rem;line-height:1.5;color:var(--ds-muted)}
.ds .ds-price{gap:4px 8px;margin-top:22px}
.ds-amt{font-size:2.8rem;font-weight:800;line-height:1;letter-spacing:-.04em}
.ds-per{font-size:.9rem;color:var(--ds-muted)}
.ds-list{display:grid;gap:12px;margin:24px 0 0;padding:22px 0 0;border-top:1px solid var(--ds-line);font-size:.92rem;line-height:1.4}
.ds-list li{display:flex;align-items:flex-start;gap:10px}
.ds-list svg{flex:none;margin-top:1px;color:var(--ds-accent-text)}
.ds-list .no,.ds-list .no svg{color:var(--ds-muted)}
.ds-num{font-family:var(--ds-mono);font-size:.88rem;font-weight:600;color:var(--ds-text)}
.ds-picker{--bs-card-spacer-y:32px;--bs-card-spacer-x:30px}
.ds-picker .ds-sub{margin-top:8px;font-size:.94rem}
.ds-sizes{margin:26px 0 0}
.ds-sizes legend{float:none;width:auto;margin:0 0 12px;font-size:.88rem;font-weight:700;line-height:normal}
.ds-size-grid{--bs-gutter-x:12px;--bs-gutter-y:12px}
.ds-size{position:relative;display:flex;flex-direction:column;gap:4px;height:100%;margin:0;padding:18px 18px 16px;border:1.5px solid var(--ds-line);border-radius:14px;background:var(--ds-bg);cursor:pointer;transition:border-color .2s,background-color .2s}
.ds-size:hover{border-color:var(--ds-edge)}
.ds-size:has(.form-check-input:checked){border-color:var(--ds-accent);background:#0f1d27}
.ds-size .form-check-input{--bs-form-check-bg:transparent;position:absolute;top:16px;right:16px;width:20px;height:20px;margin:0;border:2px solid #8b95ab;cursor:pointer}
.ds-size .form-check-input:checked{--bs-form-check-bg-image:none;border-color:var(--ds-accent);background-color:var(--ds-accent);box-shadow:inset 0 0 0 4px var(--ds-bg)}
.ds-size .form-check-input:focus{box-shadow:none;border-color:#8b95ab}
.ds-size .form-check-input:checked:focus{border-color:var(--ds-accent);box-shadow:inset 0 0 0 4px var(--ds-bg)}
.ds-size .form-check-input:focus-visible{outline:2px solid var(--ds-accent-text);outline-offset:3px}
.ds-size-name{font-size:1.05rem;font-weight:700}
.ds-size-tag{--bs-badge-padding-x:8px;--bs-badge-padding-y:3px;--bs-badge-font-size:.68rem;--bs-badge-font-weight:700;--bs-badge-color:var(--ds-accent-text);align-self:flex-start;margin:2px 0 4px;background:rgba(34,211,238,.12);letter-spacing:.06em;text-transform:uppercase}
.ds-spec{font-family:var(--ds-mono);font-size:.8rem;line-height:1.6;color:var(--ds-muted)}
.ds-size-price{margin-top:10px;font-size:1.5rem;font-weight:800;letter-spacing:-.03em}
.ds-size-price small{font-size:.8rem;font-weight:500;letter-spacing:0;color:var(--ds-muted)}
.ds-bar{gap:14px 24px;margin-top:22px;padding-top:22px;border-top:1px solid var(--ds-line)}
.ds .ds-sum{font-size:.95rem;line-height:1.5;color:var(--ds-muted)}
.ds-sum b{color:var(--ds-text)}
.ds-sum [data-size]{display:none}
.ds-picker:has([value=nano]:checked) [data-size=nano],.ds-picker:has([value=micro]:checked) [data-size=micro],
.ds-picker:has([value=small]:checked) [data-size=small],.ds-picker:has([value=medium]:checked) [data-size=medium]{display:inline}
.ds-bar .ds-btn{margin-top:0;--bs-btn-padding-x:28px}
@media (max-width:575.98px){.ds-bar .ds-btn{width:100%}}
@media (prefers-reduced-motion:reduce){.ds-btn,.ds-size{transition:none}}

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#9aa4b8] uppercase">Tier cards with a gradient-bordered plan</span>
<section class="text-[#e6e9f2]" aria-labelledby="or-title">
  <header class="mx-auto mb-11 max-w-[640px] text-center"><p class="font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.8rem] font-semibold text-[#67e8f9]">Orbitrun CI</p><h2 class="mt-2.5 text-[clamp(1.6rem,4vw,2.2rem)] leading-[1.15] font-extrabold tracking-[-.025em]" id="or-title">Builds that keep pace with your team</h2><p class="mt-3 text-base leading-[1.55] text-[#9aa4b8]">Every plan runs on Linux, macOS and Windows runners. Prices in US dollars.</p></header>
  <div class="grid grid-cols-1 gap-6 min-[992px]:grid-cols-3">
    <article class="flex flex-col rounded-[20px] border px-7 py-[30px] border-[#232c3d] bg-[#121826]" aria-labelledby="or-hobby">
      <div class="flex flex-wrap items-center justify-between gap-2"><h3 class="text-[1.15rem] font-bold" id="or-hobby">Hobby</h3></div>
      <p class="mt-2 text-[.92rem] leading-normal text-[#9aa4b8]">For side projects and open source.</p>
      <p class="mt-[22px] flex flex-wrap items-baseline gap-x-2 gap-y-1"><span class="text-[2.8rem] leading-none font-extrabold tracking-[-.04em]">$0</span><span class="text-[.9rem] text-[#9aa4b8]">free forever</span></p>
      <a class="mt-6 block cursor-pointer rounded-xl border px-[18px] py-3 text-center text-[.95rem] leading-[1.4] font-bold no-underline transition-[color,background-color,border-color] duration-200 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#67e8f9] motion-reduce:transition-none border-[#3a4660] text-[#e6e9f2] hover:border-[#56627c] hover:bg-[#1a2233]" href="#">Start building</a>
      <ul class="mt-6 grid gap-3 border-t border-[#232c3d] pt-[22px] text-[.92rem] leading-[1.4]">
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#67e8f9]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.88rem] font-semibold text-[#e6e9f2]">500</span> build minutes a month</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#67e8f9]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.88rem] font-semibold text-[#e6e9f2]">1</span> concurrent job</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#67e8f9]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.88rem] font-semibold text-[#e6e9f2]">7-day</span> build logs</span></li>
        <li class="flex items-start gap-2.5 text-[#9aa4b8]"><svg class="mt-px flex-none" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="sr-only">Not included: </span>Preview environments</span></li>
        <li class="flex items-start gap-2.5 text-[#9aa4b8]"><svg class="mt-px flex-none" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="sr-only">Not included: </span>Single sign-on</span></li>
      </ul>
    </article>
    <article class="flex flex-col rounded-[20px] border px-7 py-[30px] border-transparent [background:linear-gradient(#121826,#121826)_padding-box,linear-gradient(140deg,#22d3ee,#a78bfa)_border-box] shadow-[0_30px_60px_-30px_rgba(34,211,238,.45)]" aria-labelledby="or-pro">
      <div class="flex flex-wrap items-center justify-between gap-2"><h3 class="text-[1.15rem] font-bold" id="or-pro">Pro</h3><p class="rounded-full border border-[rgba(103,232,249,.4)] bg-[rgba(34,211,238,.1)] px-2.5 py-1 text-[.72rem] leading-[1.2] font-bold tracking-[.06em] text-[#67e8f9] uppercase">Recommended</p></div>
      <p class="mt-2 text-[.92rem] leading-normal text-[#9aa4b8]">For a team shipping every day.</p>
      <p class="mt-[22px] flex flex-wrap items-baseline gap-x-2 gap-y-1"><span class="text-[2.8rem] leading-none font-extrabold tracking-[-.04em]">$20</span><span class="text-[.9rem] text-[#9aa4b8]">per month</span></p>
      <a class="mt-6 block cursor-pointer rounded-xl border px-[18px] py-3 text-center text-[.95rem] leading-[1.4] font-bold no-underline transition-[color,background-color,border-color] duration-200 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#67e8f9] motion-reduce:transition-none border-[#22d3ee] bg-[#22d3ee] text-[#06202a] hover:border-[#67e8f9] hover:bg-[#67e8f9]" href="#">Upgrade to Pro</a>
      <ul class="mt-6 grid gap-3 border-t border-[#232c3d] pt-[22px] text-[.92rem] leading-[1.4]">
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#67e8f9]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.88rem] font-semibold text-[#e6e9f2]">3,000</span> build minutes a month</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#67e8f9]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.88rem] font-semibold text-[#e6e9f2]">4</span> concurrent jobs</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#67e8f9]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.88rem] font-semibold text-[#e6e9f2]">30-day</span> build logs</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#67e8f9]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Preview environments</span></li>
        <li class="flex items-start gap-2.5 text-[#9aa4b8]"><svg class="mt-px flex-none" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="sr-only">Not included: </span>Single sign-on</span></li>
      </ul>
    </article>
    <article class="flex flex-col rounded-[20px] border px-7 py-[30px] border-[#232c3d] bg-[#121826]" aria-labelledby="or-team">
      <div class="flex flex-wrap items-center justify-between gap-2"><h3 class="text-[1.15rem] font-bold" id="or-team">Team</h3></div>
      <p class="mt-2 text-[.92rem] leading-normal text-[#9aa4b8]">For organisations with many pipelines.</p>
      <p class="mt-[22px] flex flex-wrap items-baseline gap-x-2 gap-y-1"><span class="text-[2.8rem] leading-none font-extrabold tracking-[-.04em]">$65</span><span class="text-[.9rem] text-[#9aa4b8]">per month</span></p>
      <a class="mt-6 block cursor-pointer rounded-xl border px-[18px] py-3 text-center text-[.95rem] leading-[1.4] font-bold no-underline transition-[color,background-color,border-color] duration-200 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#67e8f9] motion-reduce:transition-none border-[#3a4660] text-[#e6e9f2] hover:border-[#56627c] hover:bg-[#1a2233]" href="#">Upgrade to Team</a>
      <ul class="mt-6 grid gap-3 border-t border-[#232c3d] pt-[22px] text-[.92rem] leading-[1.4]">
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#67e8f9]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.88rem] font-semibold text-[#e6e9f2]">10,000</span> build minutes a month</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#67e8f9]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.88rem] font-semibold text-[#e6e9f2]">12</span> concurrent jobs</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#67e8f9]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span><span class="font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.88rem] font-semibold text-[#e6e9f2]">90-day</span> build logs</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#67e8f9]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Preview environments</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#67e8f9]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Single sign-on</span></li>
      </ul>
    </article>
  </div>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#9aa4b8] uppercase">Server size picker with radio cards</span>
<section class="group/kc rounded-[20px] border border-[#232c3d] bg-[#121826] px-[30px] py-8 text-[#e6e9f2]" aria-labelledby="kc-title">
  <p class="font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.8rem] font-semibold text-[#67e8f9]">Kestrel Cloud</p><h2 class="mt-2.5 text-[clamp(1.6rem,4vw,2.2rem)] leading-[1.15] font-extrabold tracking-[-.025em]" id="kc-title">Pick a server size</h2><p class="mt-2 text-[.94rem] leading-[1.55] text-[#9aa4b8]">Hourly billing, capped at the monthly price. Resize at any time.</p>
  <form action="#">
    <fieldset class="mt-[26px] min-w-0">
      <legend class="mb-3 text-[.88rem] font-bold">Server size</legend>
      <div class="grid grid-cols-1 gap-3 min-[576px]:grid-cols-2 min-[992px]:grid-cols-4">
        <label class="relative flex cursor-pointer flex-col gap-1 rounded-[14px] border-[1.5px] border-[#232c3d] bg-[#0b0f17] px-[18px] pt-[18px] pb-4 transition-[color,background-color,border-color] duration-200 hover:border-[#3a4660] has-checked:border-[#22d3ee] has-checked:bg-[#0f1d27] motion-reduce:transition-none"><input class="absolute top-4 right-4 m-0 size-5 cursor-pointer appearance-none rounded-full border-2 border-[#8b95ab] checked:border-[#22d3ee] checked:bg-[#22d3ee] checked:shadow-[inset_0_0_0_4px_#0b0f17] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#67e8f9]" type="radio" name="kc-size" value="nano"><span class="text-[1.05rem] font-bold">Nano</span><span class="font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.8rem] leading-[1.6] text-[#9aa4b8]">1 vCPU · 1 GB RAM<br>25 GB SSD</span><span class="mt-2.5 text-[1.5rem] font-extrabold tracking-[-.03em]">$6 <small class="text-[.8rem] font-medium tracking-normal text-[#9aa4b8]">per month</small></span></label>
        <label class="relative flex cursor-pointer flex-col gap-1 rounded-[14px] border-[1.5px] border-[#232c3d] bg-[#0b0f17] px-[18px] pt-[18px] pb-4 transition-[color,background-color,border-color] duration-200 hover:border-[#3a4660] has-checked:border-[#22d3ee] has-checked:bg-[#0f1d27] motion-reduce:transition-none"><input class="absolute top-4 right-4 m-0 size-5 cursor-pointer appearance-none rounded-full border-2 border-[#8b95ab] checked:border-[#22d3ee] checked:bg-[#22d3ee] checked:shadow-[inset_0_0_0_4px_#0b0f17] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#67e8f9]" type="radio" name="kc-size" value="micro"><span class="text-[1.05rem] font-bold">Micro</span><span class="font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.8rem] leading-[1.6] text-[#9aa4b8]">1 vCPU · 2 GB RAM<br>50 GB SSD</span><span class="mt-2.5 text-[1.5rem] font-extrabold tracking-[-.03em]">$12 <small class="text-[.8rem] font-medium tracking-normal text-[#9aa4b8]">per month</small></span></label>
        <label class="relative flex cursor-pointer flex-col gap-1 rounded-[14px] border-[1.5px] border-[#232c3d] bg-[#0b0f17] px-[18px] pt-[18px] pb-4 transition-[color,background-color,border-color] duration-200 hover:border-[#3a4660] has-checked:border-[#22d3ee] has-checked:bg-[#0f1d27] motion-reduce:transition-none"><input class="absolute top-4 right-4 m-0 size-5 cursor-pointer appearance-none rounded-full border-2 border-[#8b95ab] checked:border-[#22d3ee] checked:bg-[#22d3ee] checked:shadow-[inset_0_0_0_4px_#0b0f17] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#67e8f9]" type="radio" name="kc-size" value="small" checked><span class="text-[1.05rem] font-bold">Small</span><span class="mt-0.5 mb-1 self-start rounded-full bg-[rgba(34,211,238,.12)] px-2 py-[3px] text-[.68rem] font-bold tracking-[.06em] text-[#67e8f9] uppercase">Recommended</span><span class="font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.8rem] leading-[1.6] text-[#9aa4b8]">2 vCPU · 4 GB RAM<br>80 GB SSD</span><span class="mt-2.5 text-[1.5rem] font-extrabold tracking-[-.03em]">$24 <small class="text-[.8rem] font-medium tracking-normal text-[#9aa4b8]">per month</small></span></label>
        <label class="relative flex cursor-pointer flex-col gap-1 rounded-[14px] border-[1.5px] border-[#232c3d] bg-[#0b0f17] px-[18px] pt-[18px] pb-4 transition-[color,background-color,border-color] duration-200 hover:border-[#3a4660] has-checked:border-[#22d3ee] has-checked:bg-[#0f1d27] motion-reduce:transition-none"><input class="absolute top-4 right-4 m-0 size-5 cursor-pointer appearance-none rounded-full border-2 border-[#8b95ab] checked:border-[#22d3ee] checked:bg-[#22d3ee] checked:shadow-[inset_0_0_0_4px_#0b0f17] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#67e8f9]" type="radio" name="kc-size" value="medium"><span class="text-[1.05rem] font-bold">Medium</span><span class="font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.8rem] leading-[1.6] text-[#9aa4b8]">4 vCPU · 8 GB RAM<br>160 GB SSD</span><span class="mt-2.5 text-[1.5rem] font-extrabold tracking-[-.03em]">$48 <small class="text-[.8rem] font-medium tracking-normal text-[#9aa4b8]">per month</small></span></label>
      </div>
    </fieldset>
    <div class="mt-[22px] flex flex-wrap items-center justify-between gap-x-6 gap-y-3.5 border-t border-[#232c3d] pt-[22px]">
      <p class="text-[.95rem] leading-normal text-[#9aa4b8]"><span class="hidden group-has-[[value=nano]:checked]/kc:inline"><b class="text-[#e6e9f2]">Nano</b>: 1 vCPU, 1 GB RAM, 25 GB SSD, $6 a month</span><span class="hidden group-has-[[value=micro]:checked]/kc:inline"><b class="text-[#e6e9f2]">Micro</b>: 1 vCPU, 2 GB RAM, 50 GB SSD, $12 a month</span><span class="hidden group-has-[[value=small]:checked]/kc:inline"><b class="text-[#e6e9f2]">Small</b>: 2 vCPU, 4 GB RAM, 80 GB SSD, $24 a month</span><span class="hidden group-has-[[value=medium]:checked]/kc:inline"><b class="text-[#e6e9f2]">Medium</b>: 4 vCPU, 8 GB RAM, 160 GB SSD, $48 a month</span></p>
      <button class="mt-0 block cursor-pointer rounded-xl border px-7 py-3 text-center text-[.95rem] leading-[1.4] font-bold no-underline transition-[color,background-color,border-color] duration-200 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#67e8f9] motion-reduce:transition-none border-[#22d3ee] bg-[#22d3ee] text-[#06202a] hover:border-[#67e8f9] hover:bg-[#67e8f9] max-sm:w-full" type="submit">Deploy server</button>
    </div>
  </form>
</section></div>