dkimkit 0.0.0-stage → 0.7.0

package/dist/src/hosted/site.js

@@ -0,0 +1,653 @@
+import { readFileSync } from 'node:fs';
+import { renderMarkdown } from './markdown.js';
+export const FEEDBACK_KINDS = { feature: 'Feature request', feedback: 'Feedback', problem: 'Something isn’t working' };
+export const MAX_FEEDBACK_LENGTH = 5000;
+const DEFAULT_APP_NAME = 'DKIMkit';
+const DEFAULT_EFFECTIVE_DATE = '2026-10-25';
+const DOCS_DIR = new URL('../../../docs/', import.meta.url);
+/** Public docs, in sidebar order. Other files in docs/ (e.g. self-hosting.md) are not published. */
+const DOCS = [
+    { slug: 'getting-started', file: 'getting-started.md', label: 'Getting started' },
+    { slug: 'hosted-api', file: 'hosted-api.md', label: 'API reference' },
+    { slug: 'widget', file: 'widget.md', label: 'Embeddable widget' },
+    { slug: 'library', file: 'library.md', label: 'Node.js library and CLI' },
+    { slug: 'billing', file: 'billing.md', label: 'Plans and billing', needsBilling: true },
+];
+const esc = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+export class Site {
+    ctx;
+    appName;
+    /** Payments are live (not just a free plan). */
+    billing;
+    docs = new Map();
+    constructor(ctx) {
+        this.ctx = ctx;
+        this.appName = ctx.appName || DEFAULT_APP_NAME;
+        this.billing = Boolean(ctx.plan && !ctx.plan.comingSoon);
+        const price = ctx.plan ? this.money(ctx.plan.unitAmount) : '';
+        for (const doc of DOCS) {
+            if ('needsBilling' in doc && doc.needsBilling && !this.billing)
+                continue;
+            const source = readFileSync(new URL(doc.file, DOCS_DIR), 'utf8')
+                // {{#billing}}…{{/billing}}: text that only applies when billing (and so the free plan) is on.
+                .replace(/\{\{#billing\}\}([\s\S]*?)\{\{\/billing\}\}/g, (_, inner) => (this.billing ? inner : ''))
+                .replaceAll('{{APP_NAME}}', this.appName)
+                .replaceAll('{{PUBLIC_URL}}', ctx.publicUrl)
+                .replaceAll('{{FREE_DOMAINS}}', String(ctx.plan?.freeDomains ?? ''))
+                .replaceAll('{{PRICE}}', price)
+                // Examples in the docs use a placeholder host; show this server's.
+                .replaceAll('https://dns.example.com', ctx.publicUrl);
+            const rendered = renderMarkdown(source, { resolveLink: (href) => this.docLink(href) });
+            this.docs.set(doc.slug, { ...rendered, label: doc.label });
+        }
+    }
+    /** Missing settings show as a visible placeholder, so they're noticed before launch. */
+    missingSettings() {
+        return [
+            !this.ctx.legalName && 'LEGAL_NAME',
+            !this.ctx.contactEmail && 'CONTACT_EMAIL',
+            !this.ctx.legalCountry && 'LEGAL_COUNTRY',
+        ].filter((x) => Boolean(x));
+    }
+    /** Routes a request path to a page, or null if it isn't a site page. */
+    render(path) {
+        switch (path) {
+            case '/':
+                return this.page('', this.landing(), 'home');
+            case '/pricing':
+                return this.ctx.plan ? this.page('Pricing', this.pricing(), 'pricing') : null;
+            case '/about':
+                return this.page('About', this.about(), 'about');
+            case '/contact':
+                return this.page('Contact', this.contact(), 'contact');
+            case '/feedback':
+                return this.feedbackPage();
+            case '/terms':
+                return this.page('Terms of Service', this.terms(), 'legal');
+            case '/privacy':
+                return this.page('Privacy Policy', this.privacy(), 'legal');
+            case '/refunds':
+                return this.page('Refund Policy', this.refunds(), 'legal');
+            case '/site.js':
+                return {
+                    status: 200,
+                    headers: { 'content-type': 'text/javascript; charset=utf-8', 'cache-control': 'public, max-age=300', 'x-content-type-options': 'nosniff' },
+                    body: SITE_JS,
+                };
+            case '/docs':
+            case '/docs/':
+                return { status: 302, headers: { location: '/docs/getting-started' }, body: '' };
+        }
+        const doc = /^\/docs\/([\w-]+)$/.exec(path);
+        if (doc && this.docs.has(doc[1]))
+            return this.page(this.docs.get(doc[1]).title, this.docPage(doc[1]), 'docs');
+        return null;
+    }
+    /** The feedback page, blank or with what was submitted. Its form posts back to /feedback. */
+    feedbackPage(form) {
+        const page = this.page('Feedback', this.feedback(form), 'feedback', { formAction: true });
+        if (form)
+            page.headers['cache-control'] = 'no-store';
+        if (form?.error)
+            page.status = 400;
+        return page;
+    }
+    // ---- helpers ----
+    money(cents) {
+        const currency = (this.ctx.plan?.currency ?? 'usd').toUpperCase();
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency, minimumFractionDigits: cents % 100 ? 2 : 0 }).format(cents / 100);
+    }
+    docLink(href) {
+        // Only links to published docs survive; others (e.g. self-hosting.md) render as plain text.
+        const [target, hash] = href.split('#');
+        const doc = DOCS.find((d) => d.file === target || `/docs/${d.slug}` === target);
+        if (!doc || ('needsBilling' in doc && doc.needsBilling && !this.billing))
+            return null;
+        return `/docs/${doc.slug}${hash ? `#${hash}` : ''}`;
+    }
+    /** A value the operator must configure; shown highlighted until it is. */
+    setting(value, name) {
+        return value ? esc(value) : `<mark title="Set ${name}">[${name}]</mark>`;
+    }
+    get operator() {
+        return this.setting(this.ctx.legalName, 'LEGAL_NAME');
+    }
+    get email() {
+        return this.ctx.contactEmail
+            ? `<a href="mailto:${esc(this.ctx.contactEmail)}">${esc(this.ctx.contactEmail)}</a>`
+            : this.setting(undefined, 'CONTACT_EMAIL');
+    }
+    get effective() {
+        const date = this.ctx.effectiveDate || DEFAULT_EFFECTIVE_DATE;
+        return new Date(`${date}T00:00:00Z`).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' });
+    }
+    cta(primary = 'Start free') {
+        return this.ctx.signupEnabled ? `<a class="btn primary" href="/dashboard">${primary}</a>` : '';
+    }
+    // ---- layout ----
+    page(title, main, section, opts = {}) {
+        const app = esc(this.appName);
+        const nav = (href, label, key) => `<a href="${href}"${section === key ? ' aria-current="page"' : ''}>${label}</a>`;
+        const year = new Date().getUTCFullYear();
+        const body = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${title ? `${esc(title)} · ${app}` : `${app}: verified sending domains for your customers`}</title>
+<meta name="description" content="${app} authenticates your customers' sending domains with SendGrid, Postmark, Mailgun or Amazon SES: DNS records written or shown, verification tracked, webhooks when ready.">
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%233b5bdb'/%3E%3Cpath d='M8 11h16v11H8z M8 12l8 6 8-6' fill='none' stroke='white' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E">
+<style>${CSS}</style>
+<script src="/site.js" defer></script>
+</head>
+<body>
+<header class="site">
+  <div class="wrap bar">
+    <div class="hist" hidden>${HISTORY_BUTTONS}</div>
+    <a class="brand" href="/"><span class="mark" aria-hidden="true">${LOGO}</span>${app}</a>
+    <nav aria-label="Main">
+      ${nav('/docs/getting-started', 'Docs', 'docs')}
+      ${this.ctx.plan ? nav('/pricing', 'Pricing', 'pricing') : ''}
+      ${nav('/about', 'About', 'about')}
+      ${this.ctx.signupEnabled ? '<a class="btn small" href="/dashboard">Sign in</a>' : ''}
+    </nav>
+  </div>
+</header>
+<main>${main}</main>
+<footer class="site">
+  <div class="wrap foot">
+    <div>© ${year} ${this.operator}</div>
+    <nav aria-label="Footer">
+      <a href="/docs/getting-started">Docs</a>
+      ${this.ctx.plan ? '<a href="/pricing">Pricing</a>' : ''}
+      <a href="/about">About</a>
+      <a href="/contact">Contact</a>
+      <a href="/feedback">Feedback</a>
+      <a href="/terms">Terms</a>
+      <a href="/privacy">Privacy</a>
+      ${this.ctx.plan ? '<a href="/refunds">Refunds</a>' : ''}
+    </nav>
+  </div>
+</footer>
+</body>
+</html>`;
+        return {
+            status: 200,
+            headers: {
+                'content-type': 'text/html; charset=utf-8',
+                'cache-control': 'public, max-age=300',
+                'x-content-type-options': 'nosniff',
+                'referrer-policy': 'strict-origin-when-cross-origin',
+                'content-security-policy': `default-src 'none'; script-src 'self'; style-src 'unsafe-inline'; img-src 'self' data:; base-uri 'none'; form-action ${opts.formAction ? "'self'" : "'none'"}; frame-ancestors 'none'`,
+            },
+            body,
+        };
+    }
+    // ---- pages ----
+    landing() {
+        const plan = this.ctx.plan;
+        const features = [
+            ['Writes the DNS records', 'Connect a customer’s Cloudflare or Route 53 and the records are added for them. On any other host, they get the exact records to paste.'],
+            ['Watches until verified', 'Checks the authoritative nameservers, then your email provider, with backoff. Re-checks verified domains daily and tells you if one breaks.'],
+            ['Embeddable widget', 'Drop a setup flow into your app with two lines of code. Customers’ DNS credentials never touch your servers or your frontend.'],
+            ['Signed webhooks', 'Get domain.verified, domain.conflict and more as they happen, signed and retried, so your app updates itself.'],
+            ['Inbound email too', 'Optionally route replies to your app: the MX record and inbound forwarding are configured in the same flow (SendGrid, Postmark and Mailgun).'],
+            ['Bulk setup, no code', 'Paste up to 100 domains from any registrar into the dashboard. Each gets sender authentication, and inbound email if you want it, with records grouped by DNS host and a zone file to import.'],
+        ];
+        return `
+<section class="hero wrap">
+  <h1>Your customers’ sending domains, <span class="accent">verified automatically</span></h1>
+  <p class="lead">${esc(this.appName)} handles sending-domain authentication with SendGrid, Postmark, Mailgun or Amazon SES for every customer of your app: DNS records written or shown, verification tracked, and a webhook when each domain is ready to send.</p>
+  <div class="row">${this.cta()}<a class="btn" href="/docs/getting-started">Read the docs</a></div>
+  ${plan ? `<p class="small muted">Free for up to ${plan.freeDomains} domains. No credit card required.</p>` : ''}
+</section>
+
+<section class="wrap band">
+  <h2>How it works</h2>
+  <ol class="steps">
+    <li><b>Register the domain</b><span>One API call from your backend, or let customers enter it in the widget.</span></li>
+    <li><b>DNS gets set up</b><span>We write the records through Cloudflare or Route 53, or show your customer exactly what to add.</span></li>
+    <li><b>Verified, and you’re told</b><span>We track propagation and your provider’s verification, then send you a signed webhook.</span></li>
+  </ol>
+</section>
+
+<section class="wrap">
+  <div class="grid3">${features.map(([t, d]) => `<div class="card"><h3>${t}</h3><p>${d}</p></div>`).join('')}</div>
+</section>
+
+<section class="wrap split">
+  <div>
+    <h2>One call to start</h2>
+    <p>Register a customer’s domain and get the DNS records back immediately. Everything after that happens in the background. Tag domains with your own tenant ids and see usage per customer for your own billing.</p>
+    <a href="/docs/hosted-api">API reference →</a>
+  </div>
+  <pre><code>curl -X POST ${esc(this.ctx.publicUrl)}/v1/domains \\
+  -H "Authorization: Bearer $API_KEY" \\
+  -d '{"domain": "customer.com",
+       "tenant_id": "cus_42",
+       "dns": {"provider": "cloudflare",
+               "cloudflare_api_token": "…"}}'</code></pre>
+</section>
+
+${this.roadmap()}
+
+<section class="wrap band">
+  <h2>Credentials handled with care</h2>
+  <p class="muted">Email provider keys and DNS tokens are encrypted at rest (AES-256-GCM), API keys are stored only as hashes, and the widget runs on our domain so your customers’ DNS credentials never pass through your app. <a href="/privacy">How we handle data</a></p>
+</section>
+
+${plan ? `<section class="wrap center">
+  <h2>${plan.comingSoon ? 'Start free' : 'Start free, pay as you grow'}</h2>
+  <p class="muted">${plan.freeDomains} domains free. ${plan.comingSoon ? 'Paid plans with unlimited domains are coming soon.' : `Then ${this.money(plan.unitAmount)} per active domain per month.`}</p>
+  <div class="row center">${this.cta('Create your free account')}<a class="btn" href="/pricing">See pricing</a></div>
+</section>` : ''}`;
+    }
+    /** What's being built now, then what's planned after it. */
+    roadmap() {
+        const soon = [
+            ...(this.ctx.plan?.comingSoon ? [['Paid plans', 'Add a payment method to go past the free plan’s domains. Pay per active domain, monthly, cancel any time.']] : []),
+            ['Managed DNS', 'Point your domain’s nameservers to us once, and we handle every record from then on, at any registrar.'],
+            ['Buy domains in bulk', 'Search for and register many sending domains at once, right from the dashboard. Each one is authenticated automatically, with no registrar account or DNS setup.'],
+        ];
+        const planned = [
+            ['More DNS providers', 'Records written automatically at GoDaddy, Namecheap and DigitalOcean, plus Domain Connect where your registrar supports it.'],
+            ['One-click DNS connect', 'Sign in to your DNS provider instead of creating and pasting an API token.'],
+            ['Inbound email for Amazon SES', 'Receive email on SES domains too, delivered to your webhook like the other providers.'],
+        ];
+        const items = (list, tag) => list.map(([t, d]) => `<li><b>${t} <span class="soon">${tag}</span></b><span>${d}</span></li>`).join('');
+        return `<section class="wrap">
+  <h2>What’s next</h2>
+  <p class="muted">What we’re building now and what’s planned after it. Want something else? <a href="/feedback">Request a feature</a>.</p>
+  <ul class="roadmap">${items(soon, 'Coming soon')}${items(planned, 'Planned')}</ul>
+</section>`;
+    }
+    pricing() {
+        const p = this.ctx.plan;
+        if (p.comingSoon)
+            return this.pricingComingSoon(p.freeDomains);
+        const price = this.money(p.unitAmount);
+        const faq = [
+            ['What is an active domain?', `A domain that was verified on at least one day of the billing period. Each domain counts once per period, however many days it was active. Domains that never verify aren’t counted.`],
+            ['What happens when I reach the free limit?', `Creating more than ${p.freeDomains} domains is blocked until you add a payment method. Your existing domains keep working.`],
+            ['How am I billed?', `Monthly, for the active domains in each billing period. The first ${p.freeDomains} are always free. Your dashboard shows the estimated amount as the month goes.`],
+            ['Can I cancel?', 'Yes, any time from Manage billing in your dashboard. Your domains keep working and you return to the free plan’s limit.'],
+            ['Do prices include tax?', 'Payments are handled by Dodo Payments, our merchant of record, which adds any VAT, GST or sales tax that applies where you are.'],
+        ];
+        return `
+<section class="wrap hero small-hero">
+  <h1>Simple, usage-based pricing</h1>
+  <p class="lead">Start free. Pay only for the domains your customers actually use.</p>
+</section>
+<section class="wrap">
+  <div class="plans">
+    <div class="plan">
+      <h2>Free</h2>
+      <div class="price">${this.money(0)}<small> forever</small></div>
+      <ul>
+        <li>Up to ${p.freeDomains} domains</li>
+        <li>API and embeddable widget</li>
+        <li>Cloudflare, Route 53 and manual DNS</li>
+        <li>Signed webhooks and usage reports</li>
+        <li>No credit card required</li>
+      </ul>
+      ${this.cta('Start free')}
+    </div>
+    <div class="plan featured">
+      <h2>Pay as you go</h2>
+      <div class="price">${price}<small> / active domain / month</small></div>
+      <ul>
+        <li>First ${p.freeDomains} active domains free</li>
+        <li>Unlimited domains</li>
+        <li>Everything in Free</li>
+        <li>Billed monthly for what you use</li>
+        <li>Cancel any time</li>
+      </ul>
+      ${this.cta('Get started')}
+    </div>
+  </div>
+  <p class="small muted center">Example: 10 active domains in a month = (10 − ${p.freeDomains}) × ${price} = ${this.money((10 - p.freeDomains) * p.unitAmount)}.</p>
+</section>
+<section class="wrap narrow">
+  <h2>Questions</h2>
+  ${faq.map(([q, a]) => `<details><summary>${q}</summary><p>${a}</p></details>`).join('')}
+</section>`;
+    }
+    /** Before payments launch: the free plan, and a paid plan marked as coming soon. */
+    pricingComingSoon(freeDomains) {
+        const faq = [
+            ['What happens when I reach the free limit?', `Adding more than ${freeDomains} domains is blocked for now. Your existing domains keep working. Need more today? Email ${this.email}.`],
+            ['When will paid plans be available?', 'Soon. You’ll be able to add a payment method from your dashboard to unlock unlimited domains. We’ll announce prices before anything is charged.'],
+            ['Will my free domains stay free?', `Yes. The first ${freeDomains} domains stay free when paid plans launch.`],
+        ];
+        return `
+<section class="wrap hero small-hero">
+  <h1>Simple pricing</h1>
+  <p class="lead">Start free today. Paid plans for more domains are coming soon.</p>
+</section>
+<section class="wrap">
+  <div class="plans">
+    <div class="plan featured">
+      <h2>Free</h2>
+      <div class="price">${this.money(0)}<small> forever</small></div>
+      <ul>
+        <li>Up to ${freeDomains} domains</li>
+        <li>Bulk setup from the dashboard</li>
+        <li>Sender authentication and inbound email</li>
+        <li>API, embeddable widget and signed webhooks</li>
+        <li>No credit card required</li>
+      </ul>
+      ${this.cta('Start free')}
+    </div>
+    <div class="plan">
+      <h2>Pay as you go <span class="soon">Coming soon</span></h2>
+      <div class="price"><small>Usage-based, per active domain per month</small></div>
+      <ul>
+        <li>Unlimited domains</li>
+        <li>First ${freeDomains} domains still free</li>
+        <li>Everything in Free</li>
+        <li>Billed monthly for what you use</li>
+        <li>Cancel any time</li>
+      </ul>
+      <span class="btn" aria-disabled="true">Coming soon</span>
+    </div>
+  </div>
+</section>
+<section class="wrap narrow">
+  <h2>Questions</h2>
+  ${faq.map(([q, a]) => `<details><summary>${q}</summary><p>${a}</p></details>`).join('')}
+</section>`;
+    }
+    about() {
+        const country = this.ctx.legalCountry ? `, based in ${esc(this.ctx.legalCountry)}` : '';
+        return `
+<article class="wrap narrow prose">
+  <h1>About ${esc(this.appName)}</h1>
+  <p>${esc(this.appName)} helps software companies let their customers send email from their own domains.</p>
+  <p>Authenticating a sending domain with an email provider like SendGrid, Postmark, Mailgun or Amazon SES means creating DNS records, getting them added at the right DNS host, waiting for them to propagate, and confirming with the provider. Each step can go wrong, and each one usually ends up as a support ticket. ${esc(this.appName)} turns that into one API call, or a widget your customers complete themselves, and lets your app know the moment a domain is ready.</p>
+  <h2>Who we are</h2>
+  <p>${esc(this.appName)} is built and operated by ${this.operator}${country}.</p>
+  <h2>Get in touch</h2>
+  <p>Questions? Email ${this.email} or see our <a href="/contact">contact page</a>. Feedback or a feature you need? <a href="/feedback">Tell us</a>.</p>
+</article>`;
+    }
+    contact() {
+        return `
+<article class="wrap narrow prose">
+  <h1>Contact</h1>
+  <p>Email ${this.email}. We read every message and will get back to you as soon as we can.</p>
+  <h2>Before you write</h2>
+  <ul>
+    <li><b>Setting up a domain?</b> The <a href="/docs/getting-started">getting started guide</a> and <a href="/docs/hosted-api">API reference</a> cover most questions.</li>
+    ${this.billing ? '<li><b>Billing, invoices or cancelling?</b> Use <b>Manage billing</b> in your <a href="/dashboard">dashboard</a>. For anything else about a charge, email us with your account email.</li>' : ''}
+    <li><b>Feedback or a feature request?</b> Use the <a href="/feedback">feedback form</a>.</li>
+    <li><b>Found a security issue?</b> Email us with “Security” in the subject. Please don’t disclose it publicly until we’ve had a chance to fix it.</li>
+  </ul>
+  <h2>Operator</h2>
+  <p>${this.operator}${this.ctx.legalCountry ? `, ${esc(this.ctx.legalCountry)}` : ''}</p>
+</article>`;
+    }
+    feedback(form) {
+        if (form?.sent) {
+            return `
+<article class="wrap narrow prose">
+  <h1>Thanks for the feedback</h1>
+  <p>It’s on its way to the team. We read every message${form.email ? ' and will reply by email if we have questions' : ''}.</p>
+  <p><a class="btn" href="/feedback">Send more</a> <a class="btn" href="/">Back to home</a></p>
+</article>`;
+        }
+        const kind = form?.kind ?? 'feature';
+        const kinds = Object.entries(FEEDBACK_KINDS)
+            .map(([value, label]) => `<label class="choice"><input type="radio" name="kind" value="${value}"${value === kind ? ' checked' : ''}> ${label}</label>`)
+            .join('');
+        return `
+<article class="wrap narrow prose">
+  <h1>Feedback and feature requests</h1>
+  <p>Tell us what’s working, what isn’t, or what you’d like ${esc(this.appName)} to do next. Requests from users decide what we build, and every message is read.</p>
+  ${form?.error ? `<p class="error" role="alert">${esc(form.error)}</p>` : ''}
+  <form class="form" method="post" action="/feedback">
+    <fieldset><legend>What’s it about?</legend>${kinds}</fieldset>
+    <label>Your message
+      <textarea name="message" rows="7" maxlength="${MAX_FEEDBACK_LENGTH}" required placeholder="What would help you, and what are you trying to do?">${esc(form?.message ?? '')}</textarea>
+    </label>
+    <label>Your email <span class="muted">(optional, so we can reply)</span>
+      <input type="email" name="email" maxlength="254" autocomplete="email" value="${esc(form?.email ?? '')}">
+    </label>
+    <div class="hp" aria-hidden="true"><label>Leave this empty <input name="website" tabindex="-1" autocomplete="off"></label></div>
+    <button class="btn primary" type="submit">Send</button>
+  </form>
+  <p class="muted small">Reporting a problem with a domain? Include the domain name and, if you have one, the request ID from the error. For anything private, email ${this.email}.</p>
+</article>`;
+    }
+    docPage(slug) {
+        const doc = this.docs.get(slug);
+        const sidebar = [...this.docs.entries()]
+            .map(([s, d]) => `<a href="/docs/${s}"${s === slug ? ' aria-current="page"' : ''}>${esc(d.label)}</a>`)
+            .join('');
+        const toc = doc.headings.filter((h) => h.level === 2);
+        return `
+<div class="wrap docs">
+  <aside>
+    <nav aria-label="Documentation">${sidebar}</nav>
+    ${toc.length > 1 ? `<div class="toc"><div class="small muted">On this page</div>${toc.map((h) => `<a href="#${esc(h.id)}">${h.text}</a>`).join('')}</div>` : ''}
+  </aside>
+  <article class="prose">${doc.html}</article>
+</div>`;
+    }
+    // ---- legal (drafts: the operator should have these reviewed) ----
+    legal(title, sections) {
+        return `
+<article class="wrap narrow prose legal">
+  <h1>${title}</h1>
+  <p class="muted">Last updated ${this.effective}</p>
+  ${sections.map(([h, body]) => `<h2>${h}</h2>${body}`).join('\n')}
+</article>`;
+    }
+    terms() {
+        const app = esc(this.appName);
+        const p = this.billing ? this.ctx.plan : undefined;
+        const free = this.ctx.plan?.comingSoon ? this.ctx.plan.freeDomains : null;
+        return this.legal('Terms of Service', [
+            ['1. Agreement', `<p>These terms govern your use of ${app} (the “Service”), operated by ${this.operator} (“we”, “us”). By creating an account or using the Service you agree to them. If you use the Service for an organization, you accept them on its behalf.</p>`],
+            ['2. The Service', `<p>The Service creates and verifies email sending domains with your chosen email provider (SendGrid, Postmark, Mailgun or Amazon SES) on your behalf. It can write DNS records through DNS providers you or your customers connect, check DNS and verification status, configure inbound email, and notify your systems by webhook. It relies on third-party services (your email provider, DNS providers and our payment provider), whose own terms also apply to your use of them.</p>`],
+            ['3. Your account', `<p>You sign in with a link sent to your email address. Keep your email account and API keys secure: anyone with them can act on your account. You’re responsible for activity under your account, and you must tell us promptly about any unauthorized use.</p>`],
+            ['4. Domains and authorization', `<p>Only set up domains, and only connect DNS providers or email provider accounts, that you or your customers own or are authorized to manage. If your customers connect their DNS through you, you’re responsible for having their permission and for giving them any notices required by law. We use the credentials you or your customers provide only to perform the operations you request.</p>`],
+            ['5. Acceptable use', `<p>You must not use the Service to:</p><ul><li>send spam or unsolicited email, or break anti-spam laws or your email provider’s acceptable use policy;</li><li>configure domains you don’t control or impersonate others;</li><li>disrupt, overload or probe the Service or anyone else’s systems;</li><li>break any law that applies to you.</li></ul><p>We may suspend accounts that do.</p>`],
+            ['6. Plans, fees and payment', p
+                    ? `<p>The free plan includes up to ${p.freeDomains} domains. The pay-as-you-go plan is billed monthly per active domain beyond the free allowance, at the prices shown on our <a href="/pricing">pricing page</a>. An active domain is one verified on at least one day of the billing period. Payments are processed by Dodo Payments as merchant of record, which may add applicable taxes and whose terms apply to the purchase. We’ll give at least 30 days’ notice of price increases.</p>`
+                    : `<p>The Service is currently provided without charge${free !== null ? `, on a free plan that includes up to ${free} domains` : ''}. If we introduce fees, we’ll tell you in advance and you can stop using the Service before they apply.</p>`],
+            ['7. Cancellation and termination', `<p>You can stop using the Service ${p ? 'and cancel your subscription ' : ''}at any time${p ? ' from your dashboard' : ''}. We may suspend or end your access if you breach these terms${p ? ' or don’t pay amounts due' : ''}, and we’ll tell you why where we reasonably can. After your account ends, we delete your data as described in our <a href="/privacy">Privacy Policy</a>.</p>`],
+            ['8. Your data', `<p>You keep all rights to the data you provide. You allow us to use it only to provide, secure and improve the Service. Our <a href="/privacy">Privacy Policy</a> explains how we handle personal data.</p>`],
+            ['9. Availability and changes', `<p>We work to keep the Service reliable but don’t guarantee it will be uninterrupted or error-free, and it depends on third-party services we don’t control. We may change or discontinue features; if we discontinue the Service, we’ll give reasonable notice.</p>`],
+            ['10. Disclaimer', `<p>The Service is provided “as is” and “as available”. To the extent the law allows, we disclaim all warranties, including merchantability, fitness for a particular purpose and non-infringement. We don’t guarantee that email sent from authenticated domains will be delivered.</p>`],
+            ['11. Limitation of liability', `<p>To the extent the law allows, we are not liable for indirect, incidental, special, consequential or punitive damages, or for lost profits, revenue or data. Our total liability for any claim relating to the Service is limited to the amount you paid us in the 12 months before the claim${p ? '' : ' (or zero, if you paid nothing)'}. Nothing in these terms limits liability that can’t be limited by law.</p>`],
+            ['12. Indemnity', `<p>You’ll defend and indemnify us against claims arising from your use of the Service, the domains and content you or your customers send, or your breach of these terms.</p>`],
+            ['13. Changes to these terms', `<p>We may update these terms. We’ll post the new version here and, for material changes, tell you by email at least 30 days before they take effect. Continuing to use the Service after that means you accept them.</p>`],
+            ['14. Governing law', `<p>These terms are governed by the laws of ${this.setting(this.ctx.legalCountry, 'LEGAL_COUNTRY')}, and its courts have jurisdiction over disputes, except where the law where you live says otherwise.</p>`],
+            ['15. Contact', `<p>Questions about these terms: ${this.email}.</p>`],
+        ]);
+    }
+    privacy() {
+        const app = esc(this.appName);
+        const p = this.billing;
+        return this.legal('Privacy Policy', [
+            ['Who we are', `<p>${app} is operated by ${this.operator}${this.ctx.legalCountry ? `, ${esc(this.ctx.legalCountry)}` : ''}, which is responsible for your personal data. Contact: ${this.email}.</p>`],
+            ['What we collect', `<ul>
+        <li><b>Account details:</b> your email address and the name you give us.</li>
+        <li><b>Feedback you send:</b> your message and, if you give it, your email address, so we can reply.</li>
+        <li><b>Credentials you provide:</b> email provider API keys and DNS provider tokens or keys. They’re encrypted at rest and used only to perform the operations you request. Our own API keys are stored only as one-way hashes.</li>
+        <li><b>Domain data:</b> domain names, DNS records, verification status, and any tenant ids or metadata you send with them.</li>
+        <li><b>Usage records:</b> which domains were active on which days, used to calculate usage and bills.</li>
+        <li><b>Technical data:</b> IP addresses and request details in our server logs, used for security, rate limiting and troubleshooting.</li>
+        ${p ? '<li><b>Billing data:</b> your payment provider customer id and subscription status. Card details are collected by Dodo Payments and never reach us.</li>' : ''}
+      </ul>`],
+            ['Cookies', `<p>We use one cookie, a session cookie that keeps you signed in to the dashboard. It’s strictly necessary for the Service. We don’t use advertising or analytics cookies, and we don’t track you across other sites.</p>`],
+            ['How we use it', `<p>To provide and secure the Service, send sign-in emails and service notices, calculate usage${p ? ' and bill you' : ''}, respond to you, and meet legal obligations. We don’t sell personal data, and we don’t use it for advertising.</p>`],
+            ['Who we share it with', `<p>Only service providers that help us run the Service, under appropriate safeguards:</p><ul>
+        <li><b>The email provider you connect</b> (SendGrid, Postmark, Mailgun or Amazon SES): to authenticate your domains.</li>
+        ${this.ctx.mailProvider ? `<li><b>${esc(this.ctx.mailProvider)}:</b> sending our sign-in emails.</li>` : ''}
+        <li><b>DNS providers you connect</b> (such as Cloudflare or Amazon Route 53): to manage the records you ask us to.</li>
+        ${p ? '<li><b>Dodo Payments:</b> payment processing as merchant of record.</li>' : ''}
+        <li><b>Our hosting and database providers:</b> to store and run the Service.</li>
+      </ul><p>We may also disclose data when the law requires it.</p>`],
+            ['International transfers', `<p>Our providers may process data in countries other than yours. Where the law requires it, we rely on appropriate safeguards for these transfers.</p>`],
+            ['How long we keep it', `<p>Account data, credentials and domain data are kept while your account exists, and credentials are deleted as soon as you remove them or the domain. When you delete a domain, its usage records stay, because we need them for billing and accounting. When your account is closed, we delete your data within 30 days, except records we must keep by law. Server logs are kept for a limited time for security.</p>`],
+            ['Security', `<p>Connections use HTTPS. Credentials are encrypted with AES-256-GCM and API keys are hashed. Access to production systems is restricted. No system is perfectly secure, but we work to protect your data and will notify you of a breach where the law requires it.</p>`],
+            ['Your rights', `<p>Depending on where you live, including under the EU and UK GDPR and India’s Digital Personal Data Protection Act, 2023, you may have the right to access, correct, delete or export your personal data, to object to or restrict some processing, and to withdraw consent. To exercise them, email ${this.email}. You can also complain to your data protection authority.</p>`],
+            ['Your customers’ data', `<p>If you use the Service for your own customers, you decide what data you send us about them, and we process it on your behalf to provide the Service.</p>`],
+            ['Children', `<p>The Service is for businesses and isn’t intended for children.</p>`],
+            ['Changes', `<p>We’ll post updates here and tell you by email about significant changes.</p>`],
+        ]);
+    }
+    refunds() {
+        const p = this.ctx.plan;
+        if (p?.comingSoon) {
+            return this.legal('Refund Policy', [
+                ['Free plan', `<p>The free plan costs nothing, so there’s nothing to refund.</p>`],
+                ['Paid plans', `<p>Paid plans aren’t available yet, so nothing is charged. We’ll publish their refund terms here before they launch.</p>`],
+                ['Questions', `<p>Contact ${this.email}.</p>`],
+            ]);
+        }
+        return this.legal('Refund Policy', [
+            ['Free plan', `<p>The free plan costs nothing, so there’s nothing to refund.</p>`],
+            ['Pay as you go', `<p>You’re billed monthly in arrears for the active domains you actually used in each billing period${p ? `, after the first ${p.freeDomains}, which are free` : ''}. Because you only pay for usage that has already happened, charges are generally not refundable.</p><p>You can cancel at any time from <b>Manage billing</b> in your dashboard to stop future charges. You won’t be charged for periods after you cancel.</p>`],
+            ['Billing mistakes', `<p>If you were charged incorrectly, for example for a domain that wasn’t active or because of a technical error on our side, email ${this.email} within 30 days of the charge with your account email and the invoice. We’ll correct it and refund the difference.</p>`],
+            ['How refunds are paid', `<p>Payments are processed by Dodo Payments, our merchant of record. Approved refunds go back to your original payment method through Dodo Payments; how long it takes to appear depends on your bank or card issuer.</p>`],
+            ['Questions', `<p>Contact ${this.email}.</p>`],
+        ]);
+    }
+}
+const LOGO = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>`;
+const HISTORY_BUTTONS = '<button type="button" data-history="back" aria-label="Back" title="Back"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></button>' +
+    '<button type="button" data-history="forward" aria-label="Forward" title="Forward"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg></button>';
+/** Back and Forward buttons. Where the browser says whether there's somewhere to go, they're disabled when there isn't. */
+const SITE_JS = `(() => {
+  const box = document.querySelector('.hist');
+  if (!box) return;
+  const back = box.querySelector('[data-history="back"]');
+  const forward = box.querySelector('[data-history="forward"]');
+  back.addEventListener('click', () => history.back());
+  forward.addEventListener('click', () => history.forward());
+  const nav = window.navigation;
+  const update = () => {
+    if (!nav || !('canGoBack' in nav)) return;
+    back.disabled = !nav.canGoBack;
+    forward.disabled = !nav.canGoForward;
+  };
+  update();
+  if (nav) nav.addEventListener('currententrychange', update);
+  addEventListener('pageshow', update);
+  box.hidden = false;
+})();
+`;
+const CSS = `
+:root { --bg:#ffffff; --bg-2:#f6f7f9; --surface:#ffffff; --border:#e2e5ea; --text:#15181d; --muted:#5d6573; --accent:#3b5bdb; --accent-hover:#3249b8; --accent-soft:#e8edff; --on-accent:#fff; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color-scheme: light; }
+@media (prefers-color-scheme: dark) { :root { --bg:#0f1115; --bg-2:#141821; --surface:#171a20; --border:#2a2f39; --text:#e8eaee; --muted:#9aa3b2; --accent:#7b93ff; --accent-hover:#93a7ff; --accent-soft:#1f2645; --on-accent:#0b0f1f; color-scheme: dark; } }
+* { box-sizing: border-box; }
+body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif; }
+a { color:var(--accent); }
+/* Horizontal padding only: sections set their own vertical spacing. */
+.wrap { max-width:1080px; margin:0 auto; padding-left:20px; padding-right:20px; }
+.narrow { max-width:760px; }
+header.site { border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:1; }
+.bar { display:flex; align-items:center; gap:16px; min-height:60px; flex-wrap:wrap; }
+.hist { display:flex; gap:4px; }
+.hist[hidden] { display:none; }
+.hist button { width:32px; height:32px; display:grid; place-items:center; padding:0; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); cursor:pointer; }
+.hist button:hover:not(:disabled) { background:var(--bg-2); }
+.hist button:disabled { opacity:.4; cursor:default; }
+.hist button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
+.brand { display:flex; align-items:center; gap:10px; font-weight:650; color:var(--text); text-decoration:none; }
+.mark { width:28px; height:28px; border-radius:8px; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; }
+header nav { margin-left:auto; display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
+header nav a { color:var(--muted); text-decoration:none; font-size:15px; }
+header nav a:hover, header nav a[aria-current] { color:var(--text); }
+.btn { display:inline-block; font-weight:550; font-size:15px; border-radius:8px; padding:10px 18px; border:1px solid var(--border); background:var(--surface); color:var(--text) !important; text-decoration:none; }
+.btn:hover { background:var(--bg-2); }
+.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent) !important; }
+.btn.primary:hover { background:var(--accent-hover); }
+.btn.small { padding:6px 14px; font-size:14px; }
+.btn[aria-disabled="true"] { opacity:.6; cursor:default; justify-self:start; }
+.btn[aria-disabled="true"]:hover { background:var(--surface); }
+.soon { display:inline-block; vertical-align:middle; margin-left:6px; font-size:12px; font-weight:600; padding:2px 10px; border-radius:99px; background:var(--accent-soft); color:var(--accent); }
+.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
+.center { text-align:center; justify-content:center; }
+.muted { color:var(--muted); }
+.small { font-size:14px; }
+section { padding:56px 0 0; }
+.hero { padding-top:80px; max-width:820px; }
+.small-hero { padding-top:56px; }
+.hero h1 { font-size:clamp(32px,5vw,52px); line-height:1.1; letter-spacing:-.02em; margin:0 0 18px; }
+.accent { color:var(--accent); }
+.lead { font-size:19px; color:var(--muted); margin:0 0 26px; }
+h2 { font-size:26px; letter-spacing:-.01em; margin:0 0 14px; }
+.band h2 { margin-bottom:22px; }
+.steps { list-style:none; counter-reset:s; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
+.steps li { counter-increment:s; background:var(--bg-2); border:1px solid var(--border); border-radius:12px; padding:20px; display:grid; gap:6px; align-content:start; }
+.steps li::before { content:counter(s); width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-weight:700; font-size:14px; }
+.steps span { color:var(--muted); font-size:15px; }
+.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
+.roadmap { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
+.roadmap li { border:1px solid var(--border); border-radius:12px; padding:16px 18px; display:grid; gap:4px; background:var(--surface); }
+.roadmap b .soon { margin-left:8px; }
+.roadmap span:not(.soon) { color:var(--muted); font-size:15px; }
+.form { display:grid; gap:16px; margin:20px 0; }
+.form label { display:grid; gap:6px; font-weight:550; }
+.form fieldset { border:0; padding:0; margin:0; display:flex; gap:8px 18px; flex-wrap:wrap; }
+.form legend { font-weight:550; padding:0; margin-bottom:6px; }
+.form .choice { display:flex; gap:6px; align-items:center; font-weight:400; }
+.form textarea, .form input[type=email] { font:inherit; font-weight:400; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); width:100%; box-sizing:border-box; }
+.form textarea:focus, .form input:focus { outline:2px solid var(--accent); outline-offset:1px; }
+.form button { justify-self:start; cursor:pointer; font:inherit; font-weight:550; }
+.form .hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
+.error { border:1px solid #e03131; color:#e03131; border-radius:8px; padding:10px 14px; }
+.card { border:1px solid var(--border); border-radius:12px; padding:20px; background:var(--surface); }
+.card h3 { margin:0 0 6px; font-size:17px; }
+.card p { margin:0; color:var(--muted); font-size:15px; }
+.split { display:grid; grid-template-columns:1fr 1.2fr; gap:32px; align-items:center; }
+pre { margin:0; font-family:var(--mono); font-size:13.5px; line-height:1.55; background:#0f1115; color:#e8eaee; border:1px solid var(--border); border-radius:12px; padding:18px; overflow-x:auto; }
+code { font-family:var(--mono); font-size:.9em; }
+:not(pre) > code { background:var(--bg-2); border:1px solid var(--border); border-radius:5px; padding:1px 5px; }
+.plans { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:820px; margin:0 auto 18px; }
+.plan { border:1px solid var(--border); border-radius:14px; padding:26px; display:grid; gap:14px; align-content:start; background:var(--surface); }
+.plan.featured { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
+.plan h2 { margin:0; font-size:20px; }
+.price { font-size:36px; font-weight:700; letter-spacing:-.02em; }
+.price small { font-size:15px; font-weight:400; color:var(--muted); letter-spacing:0; }
+.plan ul { margin:0; padding-left:20px; display:grid; gap:6px; }
+details { border-bottom:1px solid var(--border); padding:14px 0; }
+summary { cursor:pointer; font-weight:600; }
+details p { color:var(--muted); margin:10px 0 0; }
+.prose h1 { font-size:36px; letter-spacing:-.02em; line-height:1.15; margin:48px 0 8px; }
+.prose h2 { font-size:22px; margin:36px 0 10px; }
+.prose h3 { font-size:17px; margin:26px 0 8px; }
+.prose p, .prose li { color:var(--text); }
+.prose ul, .prose ol { padding-left:22px; }
+.prose li { margin:4px 0; }
+.prose pre { margin:14px 0; }
+.legal h2 { font-size:19px; }
+.table { overflow-x:auto; margin:14px 0; }
+table { border-collapse:collapse; width:100%; font-size:15px; }
+th, td { text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid var(--border); }
+th { font-weight:600; background:var(--bg-2); }
+mark { background:#fff3bf; color:#5c3c00; padding:0 4px; border-radius:4px; }
+.docs { display:grid; grid-template-columns:220px 1fr; gap:40px; padding-bottom:40px; }
+.docs aside { position:sticky; top:76px; align-self:start; padding-top:48px; display:grid; gap:22px; }
+.docs aside nav, .toc { display:grid; gap:6px; }
+.docs aside a { color:var(--muted); text-decoration:none; font-size:15px; }
+.docs aside a[aria-current] { color:var(--accent); font-weight:600; }
+.toc a { font-size:14px; }
+.docs article { min-width:0; }
+footer.site { margin-top:72px; border-top:1px solid var(--border); background:var(--bg-2); }
+.foot { display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap; padding:24px 20px; color:var(--muted); font-size:14px; }
+.foot nav { display:flex; gap:16px; flex-wrap:wrap; }
+.foot a { color:var(--muted); text-decoration:none; }
+.foot a:hover { color:var(--text); }
+@media (max-width: 820px) {
+  .steps, .grid3, .split, .plans, .roadmap { grid-template-columns:1fr; }
+  .docs { grid-template-columns:1fr; gap:0; }
+  .docs aside { position:static; padding-top:24px; }
+  .toc { display:none; }
+  .hero { padding-top:48px; }
+}
+`;
+//# sourceMappingURL=site.js.map