<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pricing</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main class="page">
    <header class="pricing-head">
      <h1>Simple, transparent pricing</h1>
      <p class="lede">Pick the plan that fits your team. Change or cancel at any time.</p>
    </header>

    <section class="tiers" aria-label="Pricing plans">
      <article class="tier">
        <h2 class="tier-name">Starter</h2>
        <p class="price"><span class="amount">$0</span><span class="per">/month</span></p>
        <p class="tier-note">For individuals getting started.</p>
        <ul class="features">
          <li>1 project</li>
          <li>Up to 3 collaborators</li>
          <li>Community support</li>
          <li>1 GB storage</li>
        </ul>
        <a class="cta cta-quiet" href="#starter">Get started</a>
      </article>

      <article class="tier tier-featured" aria-labelledby="pro-name">
        <p class="badge">Most popular</p>
        <h2 class="tier-name" id="pro-name">Pro</h2>
        <p class="price"><span class="amount">$24</span><span class="per">/month</span></p>
        <p class="tier-note">For growing teams that ship often.</p>
        <ul class="features">
          <li>Unlimited projects</li>
          <li>Up to 25 collaborators</li>
          <li>Priority email support</li>
          <li>100 GB storage</li>
          <li>Advanced analytics</li>
        </ul>
        <a class="cta cta-primary" href="#pro">Start free trial</a>
      </article>

      <article class="tier">
        <h2 class="tier-name">Enterprise</h2>
        <p class="price"><span class="amount">Custom</span></p>
        <p class="tier-note">For organizations with advanced needs.</p>
        <ul class="features">
          <li>Everything in Pro</li>
          <li>Unlimited collaborators</li>
          <li>Dedicated support</li>
          <li>Single sign-on (SSO)</li>
          <li>Custom contracts</li>
        </ul>
        <a class="cta cta-quiet" href="#enterprise">Contact sales</a>
      </article>
    </section>
  </main>
</body>
</html>
