Stackless-Website/pricing.html

636 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Pricing — Stackless</title>
<meta name="description" content="Three transparent plans: Build (project), Run (monthly retainer), Scale (custom). Rent-an-AI-Agent add-ons available on every tier. South African pricing in ZAR." />
<meta name="theme-color" content="#1DB897" />
<!-- Favicons -->
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
<link rel="manifest" href="manifest.json" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Stackless" />
<meta property="og:title" content="Pricing — Stackless" />
<meta property="og:description" content="Three plans: Build (project), Run (monthly retainer), Scale (custom). Rent-an-AI-Agent add-ons available on every tier." />
<meta property="og:url" content="https://stackless.co.za/pricing.html" />
<meta property="og:image" content="https://stackless.co.za/og-card.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Stackless — build · automate · integrate" />
<meta property="og:locale" content="en_ZA" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Pricing — Stackless" />
<meta name="twitter:description" content="Three plans: Build (project), Run (monthly retainer), Scale (custom). Rent-an-AI-Agent add-ons available on every tier." />
<meta name="twitter:image" content="https://stackless.co.za/og-card.png" />
<meta name="twitter:image:alt" content="Stackless — build · automate · integrate" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="shared.css" />
<style>
/* ---------- page-specific styles ---------- */
.lede { padding: 80px 0 24px; }
.lede h1 { max-width: 22ch; }
.lede p { margin-top: 18px; font-size: 18px; max-width: 60ch; color: var(--muted); }
.switcher {
display: inline-flex;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
padding: 4px;
margin: 36px 0 0;
}
.switcher button {
background: transparent; border: 0;
padding: 9px 16px;
border-radius: 999px;
font: 500 13.5px/1 var(--font-body);
color: var(--muted);
transition: background 0.15s, color 0.15s;
}
.switcher button.is-on {
background: var(--ink-2); color: #fff;
}
/* ---------- tier card variants (heavier than the index teaser) ---------- */
.tiers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 16px;
}
.tier {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 32px 30px;
display: flex; flex-direction: column;
position: relative;
}
.tier.is-featured {
border-color: var(--ink-2);
background: var(--ink-2);
color: #F4F2EC;
}
.tier__tag {
position: absolute; top: 16px; right: 16px;
font: 500 11px/1 var(--font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
padding: 5px 9px;
border-radius: 4px;
background: rgba(29, 184, 151, 0.12);
}
.tier.is-featured .tier__tag {
background: rgba(29, 184, 151, 0.18);
color: var(--accent);
}
.tier__name {
font: 500 13px/1 var(--font-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.tier.is-featured .tier__name { color: var(--accent); }
.tier__price {
margin: 18px 0 6px;
font: 600 46px/1 var(--font-display);
letter-spacing: -0.035em;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.tier.is-featured .tier__price { color: #fff; }
.tier__price small {
font: 500 14px/1 var(--font-body);
color: var(--muted);
margin-left: 4px;
letter-spacing: 0;
}
.tier.is-featured .tier__price small { color: rgba(244, 242, 236, 0.6); }
.tier__billed {
font: 500 12px/1 var(--font-mono);
color: var(--muted);
letter-spacing: 0.02em;
margin-bottom: 16px;
}
.tier.is-featured .tier__billed { color: rgba(244, 242, 236, 0.55); }
.tier__desc {
font-size: 14.5px; color: var(--muted);
min-height: 48px;
line-height: 1.5;
}
.tier.is-featured .tier__desc { color: rgba(244, 242, 236, 0.7); }
.tier__feat {
list-style: none;
margin: 22px 0 26px;
border-top: 1px solid var(--border);
padding-top: 18px;
}
.tier.is-featured .tier__feat { border-top-color: rgba(244, 242, 236, 0.15); }
.tier__feat li {
font-size: 14px;
padding: 8px 0;
display: flex; gap: 10px;
color: var(--ink);
}
.tier.is-featured .tier__feat li { color: rgba(244, 242, 236, 0.92); }
.tier__feat li svg {
flex-shrink: 0;
width: 16px; height: 16px;
color: var(--accent);
margin-top: 3px;
}
.tier__feat li.muted { color: var(--muted); }
.tier__feat li.muted svg { color: rgba(110, 115, 135, 0.5); }
.tier.is-featured .tier__feat li.muted { color: rgba(244, 242, 236, 0.4); }
.tier.is-featured .tier__feat li.muted svg { color: rgba(244, 242, 236, 0.3); }
.tier .btn { justify-content: center; margin-top: auto; }
/* ---------- add-ons ---------- */
.addons {
margin-top: 110px;
padding: 56px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
}
.addons__head { margin-bottom: 36px; }
.addons__head h2 {
font: 600 30px/1.15 var(--font-display);
letter-spacing: -0.02em;
color: var(--ink-2);
}
.addons__head p { margin-top: 8px; color: var(--muted); font-size: 15.5px; }
.addons__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.addon {
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 22px;
}
.addon h4 {
font: 600 16px/1.3 var(--font-display);
letter-spacing: -0.01em;
color: var(--ink-2);
margin-bottom: 6px;
}
.addon__price {
font: 500 13px/1 var(--font-mono);
color: var(--accent);
letter-spacing: 0.02em;
margin-bottom: 10px;
}
.addon p { font-size: 14px; color: var(--muted); line-height: 1.5; }
/* ---------- FAQ ---------- */
.faq { margin-top: 110px; }
.faq__list {
margin-top: 36px;
border-top: 1px solid var(--border);
}
.faq__item {
border-bottom: 1px solid var(--border);
padding: 22px 0;
}
.faq__q {
width: 100%;
display: flex; justify-content: space-between; align-items: center;
background: transparent; border: 0;
text-align: left;
font: 500 17px/1.4 var(--font-display);
letter-spacing: -0.01em;
color: var(--ink-2);
padding: 0;
}
.faq__q .ic {
width: 22px; height: 22px;
color: var(--accent);
flex-shrink: 0;
transition: transform 0.2s;
}
.faq__item.is-open .faq__q .ic { transform: rotate(45deg); }
.faq__a {
display: none;
margin-top: 14px;
font-size: 15px;
line-height: 1.6;
color: var(--muted);
max-width: 70ch;
}
.faq__item.is-open .faq__a { display: block; }
/* ---------- compare table ---------- */
.compare { margin-top: 110px; }
.compare__wrap {
margin-top: 32px;
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
background: var(--surface);
overflow-x: auto;
}
table.compare__tbl {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
min-width: 720px;
}
.compare__tbl th, .compare__tbl td {
padding: 16px 22px;
text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.compare__tbl thead th {
background: var(--bg);
font: 500 12.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
font-weight: 500;
}
.compare__tbl thead th.is-col {
color: var(--ink-2);
font: 600 14.5px/1 var(--font-display);
letter-spacing: -0.01em;
text-transform: none;
}
.compare__tbl tbody tr:last-child td { border-bottom: 0; }
.compare__tbl td:first-child { color: var(--ink); font-weight: 500; }
.compare__tbl td svg {
display: inline-block; vertical-align: middle;
width: 18px; height: 18px;
color: var(--accent);
}
.compare__tbl td.no svg { color: rgba(110, 115, 135, 0.4); }
.compare__tbl td.no { color: var(--muted); }
@media (max-width: 960px) {
.tiers, .addons__grid { grid-template-columns: 1fr; }
.addons { padding: 32px; }
}
</style>
</head>
<body>
<header class="header">
<div class="wrap header__row">
<a href="index.html" class="brand">
<span class="brand__mark"><img src="brand-mark.svg" alt="" width="26" height="26" /></span>
stackless
</a>
<nav class="nav" id="nav">
<a href="index.html#services">Services</a>
<a href="index.html#how">How it works</a>
<a href="pricing.html">Pricing</a>
<a href="index.html#why">Why us</a>
<a href="contact.html" class="nav__cta">Start a project</a>
</nav>
<button class="menu-btn" id="menuBtn" aria-label="Open menu">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M3 6h16M3 11h16M3 16h16" stroke="#212A40" stroke-width="2" stroke-linecap="round"/></svg>
</button>
</div>
</header>
<section class="section lede">
<div class="wrap">
<div class="section__head" style="margin: 0; text-align: left;">
<span class="section__kicker">Pricing</span>
<h1>Three ways to work with us.</h1>
<p>One-off projects for a single deliverable, a monthly retainer for an AI agent that lives in your business, or a studio engagement for ongoing builds. Prices are in South African Rand, exclusive of VAT, and exclude third-party software licences (we'll flag those up front).</p>
<div class="switcher" role="tablist">
<button type="button" class="is-on" data-period="monthly">Monthly</button>
<button type="button" data-period="annual">Annual · save 12%</button>
</div>
</div>
</div>
</section>
<section class="section" style="padding-top: 24px;">
<div class="wrap">
<div class="tiers">
<article class="tier">
<span class="tier__name">Project</span>
<div class="tier__price" data-monthly="R18 000" data-annual="R18 000">R18 000<small>starting</small></div>
<div class="tier__billed">one-off · fixed quote</div>
<p class="tier__desc">A single website, integration, or app build. Best when you know exactly what you need and just want it shipped.</p>
<ul class="tier__feat">
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Discovery call &amp; written scope</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Weekly demo every Friday</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>30 days post-launch support</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>All code, content &amp; accounts handed over</li>
<li class="muted"><svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>Dedicated account lead</li>
<li class="muted"><svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>Monthly refinement call</li>
</ul>
<a class="btn btn--ghost btn--sm" href="contact.html">Get a quote</a>
</article>
<article class="tier is-featured">
<span class="tier__tag">Most popular</span>
<span class="tier__name">Rent-an-AI-Agent</span>
<div class="tier__price" data-monthly="R9 800" data-annual="R8 624">R9 800<small>/ month</small></div>
<div class="tier__billed" data-monthly-billed="billed monthly · cancel any time" data-annual-billed="billed annually · R103 488 / year">billed monthly · cancel any time</div>
<p class="tier__desc">A dedicated AI agent trained on your business, refined weekly. Lives in your inbox, CRM and WhatsApp. Best for teams losing hours every week to routine work.</p>
<ul class="tier__feat">
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>One dedicated agent, named &amp; trained on you</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Email, CRM &amp; WhatsApp integrations</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Weekly 30-min refinement call</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Human escalation paths &amp; guardrails</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Monthly usage &amp; impact report</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Pause, swap or cancel any month</li>
</ul>
<a class="btn btn--accent btn--sm" href="contact.html">Start an agent</a>
</article>
<article class="tier">
<span class="tier__name">Studio</span>
<div class="tier__price" data-monthly="R48 000" data-annual="R42 240">R48 000<small>/ month</small></div>
<div class="tier__billed" data-monthly-billed="billed monthly · 90-day minimum" data-annual-billed="billed annually · R506 880 / year · 90-day minimum">billed monthly · 90-day minimum</div>
<p class="tier__desc">Ongoing builds, integrations, and agents — all in one retainer. Best for businesses that ship software or product changes every month.</p>
<ul class="tier__feat">
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Up to 3 active workstreams</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Dedicated lead + on-call engineer</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Same-day response, 4-hour SLA on P1</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Up to 2 deployed AI agents</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Quarterly roadmap review</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Discounted project add-ons</li>
</ul>
<a class="btn btn--ghost btn--sm" href="contact.html">Book a discovery call</a>
</article>
</div>
<!-- add-ons -->
<div class="addons">
<div class="addons__head">
<h2>Common add-ons.</h2>
<p>Drop these onto any plan. We bill at the same hourly rate every time — no project premium.</p>
</div>
<div class="addons__grid">
<div class="addon">
<h4>Voice agent</h4>
<div class="addon__price">from R2 400 / month</div>
<p>AI that picks up the phone, routes calls, books appointments, and only hands to a human when the rule says so.</p>
</div>
<div class="addon">
<h4>WhatsApp Business setup</h4>
<div class="addon__price">R4 800 once-off</div>
<p>Verified WhatsApp Business account, template library, agent integration, and 14-day on-boarding.</p>
</div>
<div class="addon">
<h4>Reporting dashboard</h4>
<div class="addon__price">from R14 000</div>
<p>A live dashboard pulling from Xero, Shopify, HubSpot or whatever stack you use. Email-digest on Mondays.</p>
</div>
<div class="addon">
<h4>Knowledge base agent</h4>
<div class="addon__price">from R3 200 / month</div>
<p>Trained on your docs, SOPs and past tickets. Answers customer questions and surfaces the right human when it's stuck.</p>
</div>
<div class="addon">
<h4>Migration sprint</h4>
<div class="addon__price">from R28 000</div>
<p>Two-week sprint to move you off a platform you've outgrown — Webflow → Next.js, old CRM → HubSpot, etc.</p>
</div>
<div class="addon">
<h4>Security review</h4>
<div class="addon__price">R9 600 once-off</div>
<p>Independent review of your stack, agent prompts, and access controls. Written report with prioritised fixes.</p>
</div>
</div>
</div>
<!-- compare table -->
<div class="compare">
<div class="section__head" style="text-align: left; margin: 0 0 8px;">
<span class="section__kicker">Compare</span>
<h2 style="font-size: 30px;">What's in each plan.</h2>
</div>
<div class="compare__wrap">
<table class="compare__tbl">
<thead>
<tr>
<th></th>
<th class="is-col">Project</th>
<th class="is-col">Rent-an-AI-Agent</th>
<th class="is-col">Studio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Web &amp; app builds</td>
<td>One-off</td>
<td>—</td>
<td>Up to 3 active</td>
</tr>
<tr>
<td>Deployed AI agents</td>
<td>—</td>
<td>1</td>
<td>Up to 2</td>
</tr>
<tr>
<td>Workflow integrations</td>
<td>Up to 2</td>
<td>Up to 4</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Weekly refinement call</td>
<td class="no"><svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></td>
<td><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></td>
<td><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></td>
</tr>
<tr>
<td>Dedicated lead</td>
<td class="no"><svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></td>
<td class="no"><svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></td>
<td><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></td>
</tr>
<tr>
<td>Response SLA</td>
<td>Next business day</td>
<td>Same business day</td>
<td>4-hour P1, same-day P2</td>
</tr>
<tr>
<td>Cancellation</td>
<td>End of project</td>
<td>Any month</td>
<td>90-day minimum, then any month</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- FAQ -->
<div class="faq">
<div class="section__head" style="text-align: left; margin: 0;">
<span class="section__kicker">Frequently asked</span>
<h2 style="font-size: 30px;">The questions we hear most.</h2>
</div>
<div class="faq__list">
<div class="faq__item is-open">
<button class="faq__q" type="button">
<span>Who actually does the work — humans or AI?</span>
<svg class="ic" viewBox="0 0 22 22" fill="none"><path d="M11 4v14M4 11h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
<div class="faq__a">
<p>Two named humans do the building, the architecture, and the reviews. AI handles the repeatable parts inside your workflows — drafting emails, qualifying leads, routing tickets — under rules we set up together and you approve. If the AI ever makes a call you're uncomfortable with, a human reviews it before it ships.</p>
</div>
</div>
<div class="faq__item">
<button class="faq__q" type="button">
<span>What does a typical agent cost in third-party fees?</span>
<svg class="ic" viewBox="0 0 22 22" fill="none"><path d="M11 4v14M4 11h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
<div class="faq__a">
<p>Most Rent-an-AI-Agent clients spend an extra R1 500–R4 000 a month on LLM API usage and a chat/SMS provider. We pass those costs through at cost with no markup, and we cap usage so a surprise bill is impossible. Larger clients on the Studio plan can negotiate committed-use discounts.</p>
</div>
</div>
<div class="faq__item">
<button class="faq__q" type="button">
<span>Do I really own everything you build?</span>
<svg class="ic" viewBox="0 0 22 22" fill="none"><path d="M11 4v14M4 11h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
<div class="faq__a">
<p>Yes. Code lives in your GitHub from day one. Content lives in your CMS. Agent prompts live in a workspace we share with you and you keep. Hosting and domain accounts are yours. If you fire us tomorrow, the only thing you lose is our weekly demo.</p>
</div>
</div>
<div class="faq__item">
<button class="faq__q" type="button">
<span>What happens after the 30 days of post-launch support?</span>
<svg class="ic" viewBox="0 0 22 22" fill="none"><path d="M11 4v14M4 11h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
<div class="faq__a">
<p>Your build is yours to run. Anything broken that was our fault, we fix free. Anything new you want built, we send a fixed quote. If you'd rather have us on call, the Rent-an-AI-Agent and Studio retainers both cover ongoing support, refinement and small new builds.</p>
</div>
</div>
<div class="faq__item">
<button class="faq__q" type="button">
<span>How long until I see results?</span>
<svg class="ic" viewBox="0 0 22 22" fill="none"><path d="M11 4v14M4 11h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
<div class="faq__a">
<p>Project builds ship in 10–14 working days. The first AI agent is in production within a week of kick-off, then refined over the next 4 weeks. Studio engagements usually have something live in week 2 and a clear roadmap by week 4.</p>
</div>
</div>
<div class="faq__item">
<button class="faq__q" type="button">
<span>What if my business is outside South Africa?</span>
<svg class="ic" viewBox="0 0 22 22" fill="none"><path d="M11 4v14M4 11h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
<div class="faq__a">
<p>We work with clients across the UK, EU and the rest of Africa. Pricing switches to GBP/EUR/USD at the same ballpark converted, and we adjust SLAs to your timezone. Most client calls run on 09:00–11:00 SAST, which is a friendly hour for London and Lagos.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="wrap">
<div class="foot">
<div class="foot__brand">
<a href="index.html" class="brand">
<span class="brand__mark"><img src="brand-mark.svg" alt="" width="26" height="26" /></span>
stackless
</a>
<p>The on-call studio for small and medium businesses. Build, automate, integrate — without hiring an in-house team.</p>
</div>
<div>
<h5>Services</h5>
<ul>
<li><a href="index.html#services">Websites</a></li>
<li><a href="index.html#services">AI agents</a></li>
<li><a href="pricing.html">Rent-an-AI-Agent</a></li>
<li><a href="index.html#services">Integrations</a></li>
<li><a href="index.html#services">Apps &amp; dashboards</a></li>
</ul>
</div>
<div>
<h5>Studio</h5>
<ul>
<li><a href="index.html#how">How we work</a></li>
<li><a href="index.html#why">Why us</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="contact.html">Start a project</a></li>
</ul>
</div>
<div>
<h5>Reach us</h5>
<ul>
<li><a href="mailto:hello@stackless.app">hello@stackless.app</a></li>
<li><a href="tel:+27210000000">+27 21 000 0000</a></li>
<li>Cape Town · Johannesburg</li>
<li>Mon–Fri, 08:00–17:00 SAST</li>
</ul>
</div>
</div>
<div class="foot__legal">
<span>© 2026 Stackless (Pty) Ltd · Reg. 2024/184256/07</span>
<span>Made on the African continent.</span>
</div>
</div>
</footer>
<script src="header.js"></script>
<script>
// Billing-period switcher
(function () {
var btns = document.querySelectorAll('.switcher button');
var prices = document.querySelectorAll('.tier__price[data-monthly]');
var billeds = document.querySelectorAll('[data-monthly-billed]');
if (!btns.length) return;
function apply(period) {
btns.forEach(function (b) { b.classList.toggle('is-on', b.dataset.period === period); });
prices.forEach(function (el) {
var v = el.dataset[period];
if (!v) return;
var small = el.querySelector('small');
var smallHTML = small ? small.outerHTML : '';
// Strip the "/ month" suffix for annual values (which already encode the discount)
if (period === 'annual' && small) {
el.innerHTML = v + '<small>once-off / month equiv.</small>';
} else if (small) {
el.innerHTML = v + smallHTML;
} else {
el.textContent = v;
}
});
billeds.forEach(function (el) {
var v = el.getAttribute('data-' + period + '-billed');
if (v) el.textContent = v;
});
}
btns.forEach(function (b) {
b.addEventListener('click', function () { apply(b.dataset.period); });
});
})();
// FAQ accordion
(function () {
document.querySelectorAll('.faq__q').forEach(function (btn) {
btn.addEventListener('click', function () {
btn.parentElement.classList.toggle('is-open');
});
});
})();
</script>
</body>
</html>