Header

<header data-kit-site="header">
  <a href="../opening/"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></a>
  <nav aria-label="Site">
    <a href="../header/" aria-current="page">Product</a>
    <a href="../plans/">Pricing</a>
    <a href="../questions/">Questions</a>
  </nav>
  <details>
    <summary>Menu</summary>
    <nav aria-label="Site">
      <a href="../header/" aria-current="page">Product</a>
      <a href="../plans/">Pricing</a>
      <a href="../questions/">Questions</a>
      <a href="../action/">Log in</a>
    </nav>
  </details>
  <div data-kit-site-part="actions">
    <a href="../action/">Log in</a>
    <a data-kit-site-action="primary" href="../opening/">Start free</a>
  </div>
</header>
<main>
  <section data-kit-site="opening">
    <hgroup>
      <p>Venue hire software</p>
      <h1>Your hall, booked and paid</h1>
      <p>Take bookings, send invoices and chase payment from one screen.</p>
    </hgroup>
    <div data-kit-site-part="actions">
      <a data-kit-site-action="primary" href="../opening/">Start free</a>
      <a data-kit-site-action="secondary" href="../steps/">See how it works</a>
    </div>
    <figure data-kit-site-frame="window">
      <img src="../../screen.list.desktop.png" alt="Invoices awaiting payment, listed on a desktop" width="3024" height="1900" />
    </figure>
  </section>
</main>