n class="time">14:06</span>
            <span class="nick" style="color:var(--nb)">reed</span>
            <span class="text">perfect</span>
          </div>
          <div class="irc-msg">
            <span class="time">14:08</span>
            <span class="nick" style="color:var(--ne)">sol</span>
            <span class="text">i made matcha</span>
          </div>
          <div class="irc-msg">
            <span class="time">14:08</span>
            <span class="nick" style="color:var(--na)">moth</span>
            <span class="text">jealous</span>
          </div>
          <div class="irc-msg">
            <span class="time">14:10</span>
            <span class="nick" style="color:var(--nc)">hako</span>
            <span class="text">sol what kind</span>
          </div>
          <div class="irc-msg">
            <span class="time">14:10</span>
            <span class="nick" style="color:var(--ne)">sol</span>
            <span class="text">ippodo. the ceremonial one</span>
          </div>
          <div class="irc-msg">
            <span class="time">14:11</span>
            <span class="nick" style="color:var(--nd)">juno</span>
            <span class="text">good taste</span>
          </div>
        </div>
      </div>
      <div class="cl-input">
        <div class="cl-input-field">
          <span>message #lobby</span>
          <div class="cl-cursor"></div>
        </div>
      </div>
    </div>
  </section>

  <section class="features reveal">
    <div class="feat">
      <div class="feat-label">bouncer</div>
      <div class="feat-body">
        <h3>your nick stays in the channel</h3>
        <p>a microbouncer holds your connections open. messages accumulate while you're gone. scroll back and read them when you return.</p>
      </div>
    </div>
    <div class="feat">
      <div class="feat-label">hostname</div>
      <div class="feat-body">
        <h3>nick@yourdomain.tld</h3>
        <p>on pro, your bouncer masks with a domain you control. <code>/whois</code> shows your name, not ours.</p>
      </div>
    </div>
    <div class="feat">
      <div class="feat-label">clients</div>
      <div class="feat-body">
        <h3>bring whatever client you want</h3>
        <p>we have a web client, but your bouncer speaks standard IRC. point any client at it and connect.</p>
      </div>
    </div>
    <div class="feat">
      <div class="feat-label">networks</div>
      <div class="feat-body">
        <h3>any network</h3>
        <p>libera, oftc, rizon, whatever. connect to multiple networks from one account.</p>
      </div>
    </div>
  </section>

  <section class="setup reveal">
    <div class="section-label">setup</div>
    <div class="terminal">
      <div class="terminal-chrome">
        <div class="dots"><span></span><span></span><span></span></div>
        <span>terminal</span>
      </div>
      <div class="terminal-body">
        <span class="cm"># connect</span><br>
        <span class="pr">/server</span> irc.now 6697 -ssl<br>
        <span class="gap"></span>
        <span class="cm"># add a network</span><br>
        <span class="pr">/msg</span> *control addnetwork libera<br>
        <span class="pr">/msg</span> *control connect libera<br>
        <span class="gap"></span>
        <span class="cm"># done</span>
      </div>
    </div>
  </section>

  <section class="pricing reveal" id="pricing">
    <div class="section-label">pricing</div>
    <div class="price-table">
      <div class="pt-row pt-head">
        <div class="pt-cell"></div>
        <div class="pt-cell">
          <span class="plan-name">free</span>
          <span class="plan-price">$0</span>
        </div>
        <div class="pt-cell">
          <span class="plan-name">pro</span>
          <span class="plan-price">$4 <span>/mo</span></span>
        </div>
      </div>
      <div class="pt-row">
        <div class="pt-cell">networks</div>
        <div class="pt-cell">1</div>
        <div class="pt-cell">unlimited</div>
      </div>
      <div class="pt-row">
        <div class="pt-cell">scrollback</div>
        <div class="pt-cell">48h</div>
        <div class="pt-cell">unlimited</div>
      </div>
      <div class="pt-row">
        <div class="pt-cell">bouncer</div>
        <div class="pt-cell">shared</div>
        <div class="pt-cell">dedicated</div>
      </div>
      <div class="pt-row">
        <div class="pt-cell">hostname</div>
        <div class="pt-cell pt-dim">—</div>
        <div class="pt-cell">custom</div>
      </div>
      <div class="pt-actions">
        <div class="pt-cell"></div>
        <div class="pt-cell"><a href="https://my.irc.now/auth/login" class="pt-btn pt-btn-o">sign up</a></div>
        <div class="pt-cell"><a href="https://my.irc.now/auth/login" class="pt-btn pt-btn-f">get pro</a></div>
      </div>
    </div>
  </section>

  <footer class="footer">
    <span class="mark">irc<span class="dot"></span>now</span>
    <div class="footer-links">
      <a href="/docs">docs</a>
      <a href="https://status.irc.now">status</a>
      <a href="/clients">clients</a>
      <a href="/faq">faq</a>
      <a href="/what-is-irc">what is irc</a>
      <a href="irc://irc.libera.chat/#irc.now">#irc.now</a>
      <a href="https://github.com/ircnow">github</a>
      <a href="mailto:hi@irc.now">hi@irc.now</a>
    </div>
  </footer>

</div>
<script>
const obs = new IntersectionObserver(entries => {
  entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
}, { threshold: .05 });
document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
</script>
</body>
</html>