fleet/website/views/pages/pricing.ejs

<div id="pricing">
  <div class="pb-5">
    <div
      style="max-width: 1260px"
      class="container-fluid pt-5 px-4 mx-auto"
    >
      <section id="pricing-section" class="container-fluid d-flex flex-column justify-content-center pt-5 mx-auto">
        <h1 class="text-center">Choose your plan</h1>
        <p class="text-center mb-5">
          Choose the right plan for where your organization is at today.
        </p>
        <div class="d-flex justify-content-center p-0">
          <div class="container-fluid d-flex flex-wrap justify-content-center p-0">
            <div style="max-width: 384px; min-width: 330px;" class="w-100 mx-3">
              <div style="border-radius: 15px" class="card mb-4">
                <div class="card-body">
                  <div style="min-height: 125px" class="text-center mt-4">
                    <p class="font-weight-bold mb-0">
                      Core
                    </p>
                    <h2 style="color: #6b6cfa">FREE</h2>
                    <p style="padding-bottom: 28px" class="mb-0">/host/month</p>
                  </div>
                  <a
                    style="max-width: 242px"
                    class="btn btn-block btn-lg btn-info my-3 mx-auto"
                    target="_blank"
                    href="/get-started"
                    >Get started</a
                  >
                  <div
                    style="max-width: 242px; min-height: 150px"
                    class="mx-auto mb-4"
                  >
                    <p
                      style="padding-left: 32px"
                      class="position-relative my-3"
                    >
                      <img
                        alt="a circle with a checkmark"
                        src="/images/check-circle-16x16@2x.png"
                        style="width: 16px; height: 16px; left: 0; top: 4px"
                        class="position-absolute"
                      />
                      Open source
                    </p>
                    <p
                      style="padding-left: 32px"
                      class="position-relative my-3"
                    >
                      <img
                        alt="a circle with a checkmark"
                        src="/images/check-circle-16x16@2x.png"
                        style="width: 16px; height: 16px; left: 0; top: 4px"
                        class="position-absolute"
                      />
                      Community supported
                    </p>
                    <p
                      style="padding-left: 32px"
                      class="position-relative my-3"
                    >
                      <img
                        alt="a circle with a checkmark"
                        src="/images/check-circle-16x16@2x.png"
                        style="width: 16px; height: 16px; left: 0; top: 4px"
                        class="position-absolute"
                      />
                      Bring your own production environment
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div style="max-width: 384px; min-width: 330px;" class="w-100 mx-3">
              <div style="border-radius: 15px" class="card mb-4">
                <div class="card-body">
                  <div style="min-height: 125px" class="text-center mt-4">
                    <p class="font-weight-bold mb-0">
                      Basic
                    </p>
                    <h2 style="color: #6b6cfa">$4</h2>
                    <p class="mb-0">/host/month</p>
                    <p style="color: #8f8ea1; font-size: 13px" class="mb-0">
                      (USD, billed anually at $48)
                    </p>
                  </div>
                  <button
                    style="max-width: 242px"
                    class="btn btn-block btn-lg btn-info my-3 mx-auto"
                    @click="clickChatButton()"
                  >
                    Chat with us
                  </button>
                  <div
                    style="max-width: 242px; min-height: 150px"
                    class="position-relative mx-auto mb-4"
                  >
                    <p
                      style="padding-left: 32px"
                      class="position-relative my-3"
                    >
                      <img
                        alt="a circle with a checkmark"
                        src="/images/check-circle-16x16@2x.png"
                        style="width: 16px; height: 16px; left: 0; top: 4px"
                        class="position-absolute"
                      />
                      Multiple teams (RBAC)
                    </p>
                    <p
                      style="padding-left: 32px"
                      class="position-relative my-3"
                    >
                      <img
                        alt="a circle with a checkmark"
                        src="/images/check-circle-16x16@2x.png"
                        style="width: 16px; height: 16px; left: 0; top: 4px"
                        class="position-absolute"
                      />
                      Enterprise support
                    </p>
                    <p
                      style="padding-left: 32px"
                      class="position-relative my-3"
                    >
                      <img
                        alt="a circle with a checkmark"
                        src="/images/check-circle-16x16@2x.png"
                        style="width: 16px; height: 16px; left: 0; top: 4px"
                        class="position-absolute"
                      />
                      Self-hosted agent autoupdates
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section id="features" class="d-flex flex-column justify-content-center p-0 pt-5 mx-auto">
          <div class="container-fluid d-flex flex-column flex-sm-row flex-wrap justify-content-center p-0">
            <div style="max-width: 810px" class="w-100 px-1" >
              <div style="border-radius: 15px" class="card mb-4">
                <div class="card-body py-md-5 pl-4 px-md-5">
                  <div class="row mb-4">
                    <div class="col-8">
                      <p class="m-0" style="color: #8b8fa2">SUPPORT</p>
                    </div>
                    <div class="col-2 m-0 px-0 px-sm-1 px-md-2">
                      <p class="text-center" style="font-weight: bold; font-size: 15px">
                        <span class="d-none d-md-inline">Fleet </span>Core
                      </p>
                    </div>
                    <div class="col-2 m-0 px-0 px-sm-1 px-md-2 ">
                      <p class="text-center" style="font-weight: bold; font-size: 15px">
                        <span class="d-none d-md-inline">Fleet </span>Basic
                      </p>
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Public issue tracker (GitHub)</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Community Slack channel</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Unlimited email support (confidential)</p>
                    </div>
                    <div class="col-2"></div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Phone and video call support</p>
                    </div>
                    <div class="col-2"></div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Dedicated Slack channel</p>
                    </div>
                    <div class="col-2"></div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-4 mt-5">
                    <div class="col-8">
                      <p class="m-0" style="color: #8b8fa2">
                        INVENTORY MANAGEMENT
                      </p>
                    </div>
                    <div class="col-2"></div>
                    <div class="col-2"></div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Secure REST API</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Command line tool (CLI)</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Realtime device inventory dashboard</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Browse installed software packages</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">
                        Search devices by IP, serial, hostname, UUID
                      </p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">
                        Target and configure specific groups of devices†
                      </p>
                    </div>
                    <div class="col-2"></div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">
                        Aggregate insights for groups of devices†
                      </p>
                    </div>
                    <div class="col-2"></div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-4 mt-5">
                    <div class="col-10 col-sm-8">
                      <p class="m-0" style="color: #8b8fa2">COLLABORATION</p>
                    </div>
                    <div class="col-1 col-sm-2"></div>
                    <div class="col-1 col-sm-2"></div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Shareable device health reports</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Versionable queries and config (GitOps)</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Human-to-device mapping*†</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Scope transparency</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Multiple teams</p>
                    </div>
                    <div class="col-2"></div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-4 mt-5">
                    <div class="col-8 pr-0 pr-md-2">
                      <p class="m-0" style="color: #8b8fa2">
                        SECURITY AND COMPLIANCE
                      </p>
                    </div>
                    <div class="col-2"></div>
                    <div class="col-2"></div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Single sign on (SSO, SAML)</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Audit queries and user activities</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">
                        Grant API-only access†
                      </p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Role-based access control</p>
                    </div>
                    <div class="col-2">
                      <img
                          alt="a check mark"
                          class="mx-auto"
                          src="/images/check-16x16@2x.png"
                          style="width: 16px; height: 16px"
                        />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-4 mt-5">
                    <div class="col-8 pr-0 pr-md-2">
                      <p class="m-0" style="color: #8b8fa2">MONITORING</p>
                    </div>
                    <div class="col-2"></div>
                    <div class="col-2"></div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Schedule and automate custom queries</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">
                        Detect vulnerable software†
                      </p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Query performance monitoring*</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Standard query library†</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">
                        Detect and surface issues with devices*†
                      </p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Self-remediation*†</p>
                    </div>
                    <div class="col-2"></div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-4 mt-5">
                    <div class="col-8">
                      <p class="m-0" style="color: #8b8fa2">DATA OUTPUTS</p>
                    </div>
                    <div class="col-2"></div>
                    <div class="col-2"></div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">
                        Flexible log destinations (AWS Kinesis, Lambda, GCP)
                      </p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">StreamAlert integration*†</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">File carving (AWS S3)</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-4 mt-5">
                    <div class="col-8">
                      <p class="m-0" style="color: #8b8fa2">DEPLOYMENT</p>
                    </div>
                    <div class="col-2"></div>
                    <div class="col-2"></div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Self-managed (host Fleet in your own environment)</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">
                        Deployment tools (Helm, Terraform)
                      </p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Configure osquery startup flags on the fly*</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Autoupdate osquery agents†</p>
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">Self-hosted autoupdate registry†</p>
                    </div>
                    <div class="col-2"></div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">
                        Mass deploy custom osquery extensions*
                      </p>
                    </div>
                    <div class="col-2"></div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-8 d-flex">
                      <img
                        alt="a bullet point ellipse"
                        src="/images/ellipse-6x6@2x.png"
                        style="width: 6px; height: 6px; margin-top: 09.6px"
                      />
                      <p class="ml-2 my-0">
                        Autoupdate custom osquery extensions*
                      </p>
                    </div>
                    <div class="col-2"></div>
                    <div class="col-2">
                      <img
                        alt="a check mark"
                        class="mx-auto"
                        src="/images/check-16x16@2x.png"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </div>
                  <p style="font-size: 13px; left: 0" class="mt-5 mb-0 w-100">
                    * Coming soon
                  </p>
                  <p style="font-size: 13px; left: 0" class="mb-0 w-100">
                    † Customer promise (fulfilled and ready to use, unless otherwise noted)
                  </p>
                </div>
              </div>
            </div>
          </div>

        <div style="color: #192147;" class="container-fluid d-flex flex-column justify-content-center pt-5 mx-auto">
          <h2 class="text-center mb-4">FAQ</h2>
          <div style="max-width: 800px;" class="container-fluid d-flex flex-column justify-content-center mb-5">
            <div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
              <p id="faq__question1" style="cursor: pointer;" class="faq-question pt-3 mb-3" data-toggle="collapse" data-target="#faq__answer1" aria-controls="faq__answer1">
                Is Fleet MIT licensed?
                <span style="color: #6A67FE; right: 0; top: 24px;" class="position-absolute fa fa-angle-down"></span>
              </p>
              <p id="faq__answer1" class="collapse" aria-labelledby="faq__question1">
                We have different licenses for portions of our software which are noted in the LICENSE file in our docs. The majority of Fleet is MIT licensed. Paid features require a license key.
              </p>
            </div>
            <div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
              <p id="faq__question2" style="cursor: pointer;" class="faq-question pt-3 mb-3" data-toggle="collapse" data-target="#faq__answer2" aria-controls="faq__answer2">
                What is your commitment to open source stewardship?
                <span style="color: #6A67FE; right: 0; top: 24px;" class="position-absolute fa fa-angle-down"></span>
              </p>
              <ol id="faq__answer2" class="faq-list collapse" aria-labelledby="faq__question2">
                <li>When a feature is free and open source we won't move that feature to a paid tier. Features might be removed from the open source codebase in other cases, for example when combining features from multiple tiers into one new feature.</li>
                <li>The majority of new capabilities added to Fleet will benefit all users, not just customers.</li>
                <li>We won't introduce features into the open source codebase with a fixed delay; if a feature is planned to land in both it will be released simultaneously in both.</li>
                <li>We will always release and open source all tests that we have for any open source feature.</li>
                <li>The free version of Fleet is enterprise ready.</li>
                <li>The open source codebase will not contain any artificial limits on the number of hosts, users, size, or performance.</li>
                <li>The majority of new features contributed by Fleet Device Management Inc will be open source.</li>
                <li>The product will be available for download without leaving an email address or logging in.</li>
                <li>We will always allow you to benchmark the performance of Fleet.</li>
              </ol>

            </div>
            <div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
              <p id="faq__question3" style="cursor: pointer;" class="faq-question pt-3 mb-3" data-toggle="collapse" data-target="#faq__answer3" aria-controls="faq__answer3">
                What if we choose not to renew?
                <span style="color: #6A67FE; right: 0; top: 24px;" class="position-absolute fa fa-angle-down"></span>
              </p>
              <p id="faq__answer3" class="collapse" aria-labelledby="faq__question3">
                If you opt not to renew Fleet Premium, you can continue using Fleet Free (same code base, just unconfigure the license key.)
              </p>
            </div>
            <div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
              <p id="faq__question4" style="cursor: pointer;" class="faq-question pt-3 mb-3" data-toggle="collapse" data-target="#faq__answer4" aria-controls="faq__answer4">
                Can we buy a licence to access premium features with reduced support for a reduced cost?
                <span style="color: #6A67FE; right: 0; top: 24px;" class="position-absolute fa fa-angle-down"></span>
              </p>
              <p id="faq__answer4" class="collapse" aria-labelledby="faq__question4">
                We aren’t able to sell licenses and support separately.
              </p>
            </div>
            <div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
              <p id="faq__question5" style="cursor: pointer;" class="faq-question pt-3 mb-3" data-toggle="collapse" data-target="#faq__answer5" aria-controls="faq__answer5">
                Do you offer pricing for ephemeral hosts which may scale up or down?
                <span style="color: #6A67FE; right: 0; top: 24px;" class="position-absolute fa fa-angle-down"></span>
              </p>
              <p id="faq__answer5" class="collapse" aria-labelledby="faq__question5">
                For now, the number of hosts is the maximum cap of distinct agents enrolled at any given time.
              </p>
            </div>
            <div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
              <p id="faq__question8" style="cursor: pointer;" class="faq-question pt-3 mb-3" data-toggle="collapse" data-target="#faq__answer8" aria-controls="faq__answer8">
                When run locally, what resources does the Fleet app typically consume on an individual instance, and when run in HA, at high volume? And how is latency on an individual instance vs clustered deployment?
                <span style="color: #6A67FE; right: 0; top: 24px;" class="position-absolute fa fa-angle-down"></span>
              </p>
              <p id="faq__answer8" class="collapse" aria-labelledby="faq__question8">
                Like any modern application, Fleet scales horizontally.  The biggest potential bottleneck for Fleet is the number of hosts being monitored, so that's where we've devoted the most attention when <a href="https://github.com/fleetdm/fleet/blob/19816cee1a261589c54f50e7b965c12e2186ae48/docs/infrastructure/faq.md#has-anyone-stress-tested-fleet-how-many-clients-can-the-fleet-server-handle">testing</a>. The largest number of hosts we've had a customer ask about was 350,000, for all of the production servers and employee laptops of a publicly traded company.
              </p>
            </div>
            <div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
              <p id="faq__question10" style="cursor: pointer;" class="faq-question pt-3 mb-3" data-toggle="collapse" data-target="#faq__answer10" aria-controls="faq__answer10">
                Where's the data stored?
                <span style="color: #6A67FE; right: 0; top: 24px;" class="position-absolute fa fa-angle-down"></span>
              </p>
              <p id="faq__answer10" class="collapse" aria-labelledby="faq__question10">
                Since Fleet is self-managed, some metadata is stored wherever it is deployed (e.g. Amazon, Azure, Google, their own data center, hybrid cloud, anything).  That's done using a MySQL database, but the bulk of the data is not stored there — instead, it flows directly into a tool like Splunk or ElasticSearch. You can send that information to any of Fleet's supported log destinations.
              </p>
            </div>
          </div>
        </div>

        <div style="max-width: 1260px;" class="container-fluid py-5 px-4 px-sm-5 mx-auto">
          <div style="max-width: 800px" class="mx-auto">
            <div style="max-width: 800px;" class="d-flex position-relative px-0 px-md-3 mx-auto">
              <div class="d-inline-block pr-2">
                <h1 style="font-size:48px; line-height: 58px;">&#8220;</h1>
              </div>
              <div class="d-inline-block pl-2">
                <p style="font-size: 24px; line-height: 36px;">Fleet is hands down the best osquery platform out there. Zach and I created Fleet as a natural extension to our original vision for osquery and this has manifested in the ease-of-use, flexibility, and adoption it has today. Look to Fleet for the future of open-source endpoint monitoring.</p>
                <p style="color: #676A7A" class="mb-4">- Mike Arpaia, Co-creator of <a style="color:#676A7A;" target="_blank" href="https://osquery.io/">osquery</a></p>
                <a target="_blank" href="https://osquery.io/"><img alt="osquery logo" src="/images/logo-osquery-137x40@2x.png" style="height: 40px; width: 137px;" class="d-inline-block my-3 mx-auto"/></a>  
              </div>
            </div>
          </div>
        </div>

      </section>
      <section id="questions" class="py-5 mx-auto border-top">
        <h2 class="text-center">
          Still got questions?
        </h2>
        <div
          class="tpbutton btn-toolbar justify-content-center"
          style="text-align: center"
        >
          <button
            style="max-width: 250px"
            class="btn btn-block btn-md btn-primary my-3 mx-2"
            @click="clickChatButton()"
          >
            Ask us anything
          </button>
          <a
            style="max-width: 350px"
            class="btn btn-block btn-lg btn-white my-3 mx-2"
            purpose="animated-arrow-button"
            target="_blank"
            href="https://calendly.com/fleetdm/demo"
            >Schedule a demo
          </a>
        </div>
      </section>
    </div>
  </div>
</div>