GitHub

Templates / Landing Page

Landing Page beta

A product landing page assembled entirely from blocks: site header, an aurora hero, logo cloud, testimonials, pricing with its billing toggle, FAQ, a call-to-action band and the site footer.

Preview
acme.studio
Acme Studio
Sign in Get started
ProductPricingDocsChangelogSign in
New — Templates have arrived

The calm way to run a studio.

Projects, invoices and clients in one quiet workspace. No feeds, no noise, no fifteen tabs — just the work, in order.

Start freeWatch the tour

Powering books for teams at

GitHub Slack Spotify YouTube Twitch LinkedIn Instagram X
We closed October in two days. The checklist alone was worth the switch — nothing hides, everything reconciles.
AKAoi KimuraFinance lead, Nordic Studio
I send the invoice from the train home. By the time a client pays, the books already know.
RSRen SatoFreelance designer
Support answered at 11pm with the actual fix, not a link to a help article. That has never happened before.
MCMei ChenOwner, Harbourlight

Pricing

Start small. Upgrade when the team does.

MonthlyYearly−20%
Starter
$9 / month

For one project and a quiet launch.

  • 3 projects
  • 1 GB storage
  • Community support
Most popular
Pro
$29 / month

For teams shipping every week.

  • Unlimited projects
  • 100 GB storage
  • Custom domain
  • Priority support
Team
$79 / month

For organizations with many hands.

  • Everything in Pro
  • SSO and roles
  • Audit log
  • A named contact

Frequently asked questions

The short answers. The long ones live in the docs, linked from each.

Can I change plans later?
Yes — up or down, whenever. Changes apply from the next billing cycle, and nothing about your data or settings moves.
What counts as a seat?
Anyone with their own login. Shared logins are not a loophole we police; they are a security problem we will help you fix.
Do you offer refunds?
Within 30 days, in full, no questions and no exit interview. After that, write to us — a human reads it.
Where is my data stored?
In the region you pick at signup, and it stays there. Exports are complete and free, including the day you leave.

Still stuck? Talk to a human — median first reply is under two hours.

Close the month in days, not weekends.

Start free for 30 days. Bring your last export and the ledger builds itself.

Start free

Built from: Blocks: Site Header, Logo Cloud, Testimonials, Pricing, FAQ, CTA Band, Site Footer · Parts: Aurora, Button, Badge — include their CSS alongside this template.

<div class="k-tpl4">
  <div class="k-tpl4-sec k-tpl4-top"><header class="k-hdr">
  <div class="k-hdr-in">
    <a class="brand" href="#"><span class="mk"><i></i></span>Acme Studio</a>
    <nav aria-label="Primary">
      <a href="#">Product</a><a href="#">Pricing</a><a href="#">Docs</a><a href="#">Changelog</a>
    </nav>
    <div class="acts">
      <a class="btn btn-ghost btn-md" href="#">Sign in</a>
      <a class="btn btn-pri btn-md" href="#">Get started</a>
    </div>
    <button class="burger" data-hdr-btn type="button" aria-expanded="false" aria-label="Open menu"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
  </div>
  <div class="panel" data-hdr-panel>
    <a href="#">Product</a><a href="#">Pricing</a><a href="#">Docs</a><a href="#">Changelog</a><a href="#">Sign in</a>
  </div>
</header></div>
  <section class="k-tpl4-hero" data-theme="dark">
    <div class="k-aurora">
      <i class="b1"></i><i class="b2"></i><i class="b3"></i>
      <div class="k-aurora-in k-tpl4-heroin">
        <span class="badge teal">New — Templates have arrived</span>
        <h1>The calm way to run a studio.</h1>
        <p>Projects, invoices and clients in one quiet workspace. No feeds, no noise, no fifteen tabs — just the work, in order.</p>
        <div class="k-tpl4-cta"><a class="btn btn-pri" href="#">Start free</a><a class="btn btn-sec" href="#">Watch the tour</a></div>
      </div>
    </div>
  </section>
  <div class="k-tpl4-sec"><section class="k-logoc">
  <p class="cap">Powering books for teams at</p>
  <div class="k-marquee">
    <div class="k-marquee-track">
      <div class="k-marquee-group"><span class="li"><svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.8a9.2 9.2 0 0 0-9.2 9.2c0 4.1 2.7 7.6 6.4 9 .5.1.6-.2.6-.4v-1.4c-2.6.6-3.1-1.2-3.1-1.2-.4-1.1-1-1.3-1-1.3-.9-.6.1-.6.1-.6.9.1 1.4.9 1.4.9.9 1.4 2.2 1 2.7.8.1-.6.3-1.1.6-1.3-2.1-.2-4.2-1-4.2-4.6 0-1 .4-1.8.9-2.5-.1-.2-.4-1.1.1-2.3 0 0 .8-.2 2.5.9a8.6 8.6 0 0 1 4.5 0c1.7-1.1 2.5-.9 2.5-.9.5 1.2.2 2.1.1 2.3.5.7.9 1.5.9 2.5 0 3.6-2.2 4.4-4.2 4.6.3.3.6.9.6 1.8v2.6c0 .2.2.5.6.4a9.2 9.2 0 0 0 6.4-9A9.2 9.2 0 0 0 12 2.8z"/></svg> GitHub</span><span class="li"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><path d="M9.5 8v8M14.5 8v8M8 9.5h8M8 14.5h8"/></svg> Slack</span><span class="li"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M8 10.2c2.7-.8 5.5-.6 8 .7M8.2 13c2.2-.6 4.5-.4 6.5.6M8.4 15.7c1.8-.5 3.6-.3 5.2.5"/></svg> Spotify</span><span class="li"><svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M21.6 7.1a2.8 2.8 0 0 0-2-2C17.9 4.7 12 4.7 12 4.7s-5.9 0-7.6.4a2.8 2.8 0 0 0-2 2A29 29 0 0 0 2 12a29 29 0 0 0 .4 4.9 2.8 2.8 0 0 0 2 2c1.7.4 7.6.4 7.6.4s5.9 0 7.6-.4a2.8 2.8 0 0 0 2-2A29 29 0 0 0 22 12a29 29 0 0 0-.4-4.9zM10 15.3V8.7L15.6 12 10 15.3z"/></svg> YouTube</span><span class="li"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="M21 2H3v16h5v4l4-4h5l4-4V2z"/><path d="M11 7v4M16 7v4"/></svg> Twitch</span><span class="li"><svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm3.2 7.3H4.6V18h2.6v-7.7zM5.9 9.2a1.5 1.5 0 1 0 0-3.1 1.5 1.5 0 0 0 0 3.1zM18 18h-2.6v-3.7c0-1.2-.4-2-1.5-2-1.3 0-1.9.9-1.9 2V18H9.4v-7.7h2.6v1.1c.4-.7 1.3-1.3 2.6-1.3 2 0 3.4 1.3 3.4 3.9v4z"/></svg> LinkedIn</span><span class="li"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="0.4" fill="currentColor" stroke="none"/></svg> Instagram</span><span class="li"><svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 3l6.9 9.3L4.4 21h2.9l5-6.3 4 6.3H20l-7.2-9.7L19.4 3h-2.9l-4.4 5.6L8.4 3H4z"/></svg> X</span></div>
      <div class="k-marquee-group" aria-hidden="true"><span class="li"><svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.8a9.2 9.2 0 0 0-9.2 9.2c0 4.1 2.7 7.6 6.4 9 .5.1.6-.2.6-.4v-1.4c-2.6.6-3.1-1.2-3.1-1.2-.4-1.1-1-1.3-1-1.3-.9-.6.1-.6.1-.6.9.1 1.4.9 1.4.9.9 1.4 2.2 1 2.7.8.1-.6.3-1.1.6-1.3-2.1-.2-4.2-1-4.2-4.6 0-1 .4-1.8.9-2.5-.1-.2-.4-1.1.1-2.3 0 0 .8-.2 2.5.9a8.6 8.6 0 0 1 4.5 0c1.7-1.1 2.5-.9 2.5-.9.5 1.2.2 2.1.1 2.3.5.7.9 1.5.9 2.5 0 3.6-2.2 4.4-4.2 4.6.3.3.6.9.6 1.8v2.6c0 .2.2.5.6.4a9.2 9.2 0 0 0 6.4-9A9.2 9.2 0 0 0 12 2.8z"/></svg> GitHub</span><span class="li"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><path d="M9.5 8v8M14.5 8v8M8 9.5h8M8 14.5h8"/></svg> Slack</span><span class="li"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M8 10.2c2.7-.8 5.5-.6 8 .7M8.2 13c2.2-.6 4.5-.4 6.5.6M8.4 15.7c1.8-.5 3.6-.3 5.2.5"/></svg> Spotify</span><span class="li"><svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M21.6 7.1a2.8 2.8 0 0 0-2-2C17.9 4.7 12 4.7 12 4.7s-5.9 0-7.6.4a2.8 2.8 0 0 0-2 2A29 29 0 0 0 2 12a29 29 0 0 0 .4 4.9 2.8 2.8 0 0 0 2 2c1.7.4 7.6.4 7.6.4s5.9 0 7.6-.4a2.8 2.8 0 0 0 2-2A29 29 0 0 0 22 12a29 29 0 0 0-.4-4.9zM10 15.3V8.7L15.6 12 10 15.3z"/></svg> YouTube</span><span class="li"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="M21 2H3v16h5v4l4-4h5l4-4V2z"/><path d="M11 7v4M16 7v4"/></svg> Twitch</span><span class="li"><svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm3.2 7.3H4.6V18h2.6v-7.7zM5.9 9.2a1.5 1.5 0 1 0 0-3.1 1.5 1.5 0 0 0 0 3.1zM18 18h-2.6v-3.7c0-1.2-.4-2-1.5-2-1.3 0-1.9.9-1.9 2V18H9.4v-7.7h2.6v1.1c.4-.7 1.3-1.3 2.6-1.3 2 0 3.4 1.3 3.4 3.9v4z"/></svg> LinkedIn</span><span class="li"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="0.4" fill="currentColor" stroke="none"/></svg> Instagram</span><span class="li"><svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 3l6.9 9.3L4.4 21h2.9l5-6.3 4 6.3H20l-7.2-9.7L19.4 3h-2.9l-4.4 5.6L8.4 3H4z"/></svg> X</span></div>
    </div>
  </div>
</section></div>
  <div class="k-tpl4-sec"><section class="k-tst">
  <div class="k-tst-grid">
    <div class="k-card"><div class="k-card-b"><div class="stars"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg></div><q>We closed October in two days. The checklist alone was worth the switch — nothing hides, everything reconciles.</q><div class="who"><span class="k-avatar">AK</span><span><b>Aoi Kimura</b><span>Finance lead, Nordic Studio</span></span></div></div></div>
    <div class="k-card"><div class="k-card-b"><div class="stars"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg></div><q>I send the invoice from the train home. By the time a client pays, the books already know.</q><div class="who"><span class="k-avatar">RS</span><span><b>Ren Sato</b><span>Freelance designer</span></span></div></div></div>
    <div class="k-card"><div class="k-card-b"><div class="stars"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg></div><q>Support answered at 11pm with the actual fix, not a link to a help article. That has never happened before.</q><div class="who"><span class="k-avatar">MC</span><span><b>Mei Chen</b><span>Owner, Harbourlight</span></span></div></div></div>
  </div>
</section></div>
  <div class="k-tpl4-sec"><div class="pricing">
  <div class="pricing-head">
    <div>
      <h3 class="pricing-h">Pricing</h3>
      <p class="pricing-sub">Start small. Upgrade when the team does.</p>
    </div>
    <span class="switchrow"><span>Monthly</span><label class="switch"><input type="checkbox" data-billing><span class="tr"></span></label><span>Yearly</span><span class="badge teal">−20%</span></span>
  </div>
  <div class="pricing-grid">
  <div class="plan">
    
    <div class="plan-name">Starter</div>
    <div class="plan-price"><span data-m="$9" data-y="$7">$9</span> <span class="plan-per">/ month</span></div>
    <p class="plan-desc">For one project and a quiet launch.</p>
    <button class="btn btn-sec btn-lg plan-cta">Start free</button>
    <hr class="k-sep">
    <ul class="plan-feats">
      <li><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> 3 projects</li>
      <li><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> 1 GB storage</li>
      <li><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> Community support</li>
    </ul>
  </div>
  <div class="plan plan-hot">
    <span class="plan-badge"><span class="badge dark">Most popular</span></span>
    <div class="plan-name">Pro</div>
    <div class="plan-price"><span data-m="$29" data-y="$23">$29</span> <span class="plan-per">/ month</span></div>
    <p class="plan-desc">For teams shipping every week.</p>
    <button class="btn btn-pri btn-lg plan-cta">Start 14-day trial</button>
    <hr class="k-sep">
    <ul class="plan-feats">
      <li><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> Unlimited projects</li>
      <li><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> 100 GB storage</li>
      <li><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> Custom domain</li>
      <li><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> Priority support</li>
    </ul>
  </div>
  <div class="plan">
    
    <div class="plan-name">Team</div>
    <div class="plan-price"><span data-m="$79" data-y="$63">$79</span> <span class="plan-per">/ month</span></div>
    <p class="plan-desc">For organizations with many hands.</p>
    <button class="btn btn-sec btn-lg plan-cta">Talk to us</button>
    <hr class="k-sep">
    <ul class="plan-feats">
      <li><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> Everything in Pro</li>
      <li><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> SSO and roles</li>
      <li><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> Audit log</li>
      <li><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> A named contact</li>
    </ul>
  </div>
  </div>
</div></div>
  <div class="k-tpl4-sec"><section class="k-faqb">
  <h3>Frequently asked questions</h3>
  <p class="sub">The short answers. The long ones live in the docs, linked from each.</p>
  <div class="acc"><details class="k-acc" open><summary>Can I change plans later?<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary><div class="k-acc-body">Yes — up or down, whenever. Changes apply from the next billing cycle, and nothing about your data or settings moves.</div></details><details class="k-acc"><summary>What counts as a seat?<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary><div class="k-acc-body">Anyone with their own login. Shared logins are not a loophole we police; they are a security problem we will help you fix.</div></details><details class="k-acc"><summary>Do you offer refunds?<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary><div class="k-acc-body">Within 30 days, in full, no questions and no exit interview. After that, write to us — a human reads it.</div></details><details class="k-acc"><summary>Where is my data stored?<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary><div class="k-acc-body">In the region you pick at signup, and it stays there. Exports are complete and free, including the day you leave.</div></details></div>
  <p class="more">Still stuck? <a href="#">Talk to a human</a> — median first reply is under two hours.</p>
</section></div>
  <div class="k-tpl4-sec"><section class="k-ctab" data-theme="dark">
  <div class="k-aurora" aria-hidden="true"><i class="b1"></i><i class="b2"></i><i class="b3"></i></div>
  <div class="k-ctab-in">
    <h3>Close the month in days, not weekends.</h3>
    <p>Start free for 30 days. Bring your last export and the ledger builds itself.</p>
    <a class="btn btn-pri btn-lg" href="#">Start free</a>
  </div>
</section></div>
  <div class="k-tpl4-sec k-tpl4-foot"><footer class="k-ftr">
  <div class="k-ftr-top">
    <div>
      <div class="brand"><span class="mk"><i></i></span>Acme Studio</div>
      <p class="tag">Invoicing and books for small teams, kept in one ledger.</p>
    </div>
    <div class="col"><h6>Product</h6><a href="#">Features</a><a href="#">Pricing</a><a href="#">Changelog</a><a href="#">Roadmap</a></div>
    <div class="col"><h6>Company</h6><a href="#">About</a><a href="#">Careers</a><a href="#">Press</a><a href="#">Contact</a></div>
    <div class="news">
      <h6>The monthly ledger</h6>
      <p>One email a month: what shipped, what broke, what we learned. No growth hacks.</p>
      <div class="row"><input class="input" type="email" placeholder="[email protected]" aria-label="Email address" style="flex:1;min-width:0"><button class="btn btn-pri btn-md">Subscribe</button></div>
    </div>
  </div>
  <div class="k-ftr-bot">
    <span>© 2026 Acme Studio, Inc.</span><a href="#" style="color:inherit;text-decoration:none">Privacy</a><a href="#" style="color:inherit;text-decoration:none">Terms</a><a href="#" style="color:inherit;text-decoration:none">Security</a>
    <span class="soc"><a href="#" aria-label="GitHub"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.8a9.2 9.2 0 0 0-9.2 9.2c0 4.1 2.7 7.6 6.4 9 .5.1.6-.2.6-.4v-1.4c-2.6.6-3.1-1.2-3.1-1.2-.4-1.1-1-1.3-1-1.3-.9-.6.1-.6.1-.6.9.1 1.4.9 1.4.9.9 1.4 2.2 1 2.7.8.1-.6.3-1.1.6-1.3-2.1-.2-4.2-1-4.2-4.6 0-1 .4-1.8.9-2.5-.1-.2-.4-1.1.1-2.3 0 0 .8-.2 2.5.9a8.6 8.6 0 0 1 4.5 0c1.7-1.1 2.5-.9 2.5-.9.5 1.2.2 2.1.1 2.3.5.7.9 1.5.9 2.5 0 3.6-2.2 4.4-4.2 4.6.3.3.6.9.6 1.8v2.6c0 .2.2.5.6.4a9.2 9.2 0 0 0 6.4-9A9.2 9.2 0 0 0 12 2.8z"/></svg></a><a href="#" aria-label="X"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 3l6.9 9.3L4.4 21h2.9l5-6.3 4 6.3H20l-7.2-9.7L19.4 3h-2.9l-4.4 5.6L8.4 3H4z"/></svg></a><a href="#" aria-label="YouTube"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M21.6 7.1a2.8 2.8 0 0 0-2-2C17.9 4.7 12 4.7 12 4.7s-5.9 0-7.6.4a2.8 2.8 0 0 0-2 2A29 29 0 0 0 2 12a29 29 0 0 0 .4 4.9 2.8 2.8 0 0 0 2 2c1.7.4 7.6.4 7.6.4s5.9 0 7.6-.4a2.8 2.8 0 0 0 2-2A29 29 0 0 0 22 12a29 29 0 0 0-.4-4.9zM10 15.3V8.7L15.6 12 10 15.3z"/></svg></a></span>
  </div>
</footer></div>
</div>
.k-tpl4{background:var(--k-bg);color:var(--k-ink);border:1px solid var(--k-line);border-radius:16px;overflow:hidden;font-family:var(--k-font);text-align:left}
.k-tpl4-sec{max-width:920px;margin:0 auto;padding:36px 28px}
.k-tpl4-top{padding:18px 28px 4px}
.k-tpl4-top .k-hdr{margin-inline:auto}
.k-tpl4-foot{padding-bottom:26px}
.k-tpl4-hero{max-width:1080px;margin:0 auto;padding:22px 28px 4px}
.k-tpl4-heroin{display:grid;gap:16px;justify-items:start;padding:14px 6px}
.k-tpl4-heroin h1{font-size:41px;font-weight:650;letter-spacing:-.03em;line-height:1.12;max-width:15ch}
.k-tpl4-heroin p{font-size:15.5px;line-height:1.75;max-width:52ch}
.k-tpl4-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
@media (max-width:560px){.k-tpl4-heroin h1{font-size:31px}.k-tpl4-sec{padding:26px 18px}}

Usage

This template is the blocks, verbatim — open any block's own page to copy just that section. Only the hero and the page rhythm (section width and spacing) are template glue. The pricing toggle and the header's mobile menu keep their block scripts; include them alongside. Swap the fictional copy and the Acme name, and the page is yours.

Previous
Inbox