////
export custom_body=true
////
= Chat with Freedom

++++
        <hgroup class="banner">
          <h1>Chat With Utmost Freedom</h1>
          <p>Modern chat using open standards</p>
          <p>Zero tracking or advertising</p>
          <p>Free and open source software</p>
          <button class="basic_button big_button">Create Account</button>
        </hgroup>
        <hgroup class="why_papo">
          <div class="why_papo-container">
            <h2>Why Papo?</h2>
            <div class="why_papo-cards-container">
              <div class="why_papo-card">
                <picture>
                  <source srcset="img/shield/dark.svg" media="(prefers-color-scheme: dark)" />
                  <img       src="img/shield/light.svg" class="icon" alt="an icon of a small outlined shield inside a chat bubble" />
                </picture>
                <h3>Privacy-first hosted team chat</h3>
                <p>
                  A convenient hosted service for you to subscribe to and delegate management of,
                  without handing away all your privacy alongside.  Choose if and when to export
                  your data to a self-hosted solution, and own the service from there.
                </p>
              </div>
              <div class="why_papo-card">
                <picture>
                  <source srcset="img/database/dark.svg" media="(prefers-color-scheme: dark)" />
                  <img       src="img/database/light.svg" class="icon" alt="an outlined database icon with an &quot;X&quot; marker on its right-bottom corner" />
                </picture>
                <h3>No gratuitous data collection</h3>
                <p>
                  No "accept necessary cookies" or third-party tracking.  Revenue is made via
                  subscriptions only, so that no advertisement sneaks in.
                </p>
              </div>
              <div class="why_papo-card">
                <picture>
                  <source srcset="img/diagram/dark.svg" media="(prefers-color-scheme: dark)" />
                  <img       src="img/diagram/light.svg" class="icon" alt="a small outlined icon of a cog surrounded by 6 smaller circles with a short dashed line between the cog and each circle, where each circle also has 2 dashed lines coming from and going to the next circle, fully surrounding the inner cog" />
                </picture>
                <h3>Build for interoperability</h3>
                <p>
                  Built on existing open standards, we're not in the business of profiting from
                  new walled gardens, and welcome others to interact with in a compatible way.
                  This also means you don't need to worry about lock-in, as we're not only
                  compatible with these standards, but also built on them.
                </p>
              </div>
            </div>
            <button class="basic_button big_button">Try Papo now</button>
          </div>
        </hgroup>
        <hgroup class="features">
          <div class="features-container">
            <h2>Chat hoc</h2>
            <h3>Purposefully designed to consectetur adipiscing elit</h3>
          </div>
        </hgroup>
        <!-- https://codepen.io/Laisses/pen/qBzwmoz -->
++++