<main class="canvas">
  <div class="canvas__label">
    <span class="canvas__dot"></span>
    plan-card / default
    <span class="canvas__meta">340 x 468</span>
  </div>

  <article class="plan" aria-labelledby="plan-title">
    <header class="plan__head">
      <span class="plan__mark" aria-hidden="true">P</span>
      <div class="plan__identity">
        <h1 id="plan-title">Pulse Pro</h1>
        <p>For product teams that ship weekly.</p>
      </div>
      <span class="plan__tag">Popular</span>
    </header>

    <div class="plan__price">
      <span class="plan__amount" id="amount">$24</span>
      <span class="plan__period">/ seat / month</span>
    </div>

    <div class="plan__cycle" role="group" aria-label="Billing cycle">
      <button type="button" class="is-active" data-cycle="annual">
        Annual <span>-20%</span>
      </button>
      <button type="button" data-cycle="monthly">Monthly</button>
    </div>

    <ul class="plan__features">
      <li><span class="check" aria-hidden="true"></span>Unlimited projects and environments</li>
      <li><span class="check" aria-hidden="true"></span>Preview deploys on every pull request</li>
      <li><span class="check" aria-hidden="true"></span>Role-based access and audit history</li>
      <li><span class="check" aria-hidden="true"></span>Priority support, 4-hour response</li>
    </ul>

    <button type="button" class="plan__cta" id="upgrade">Upgrade to Pro</button>
    <p class="plan__note" id="note">Billed annually at $288. Cancel anytime.</p>
  </article>

</main>