create-ailk 0.22.0 → 0.24.0

package/templates/apps/web/app/[locale]/newsletter/__tests__/page.test.tsx

@@ -1,101 +1,104 @@
 /**
- * newsletter/page.tsx — a signup only when there is somewhere to keep it
- * (#6730 D9).
+ * newsletter/page.tsx — the newsletter magnet is the only source (#8847 D11,
+ * AC-6), and a signup only when there is somewhere to keep it (#6730 D9).
  *
- * Boundaries mocked: `@working-theory/ui` (the section tree is a stub that
- * renders one element per section, with a `newsletter` section rendering the
- * form its content declares), `@working-theory/api-client`
- * (`leads.captureStatus`), `next-intl/server`, and the Server Action module.
+ * Renders the REAL `NewsletterFormInline` and binds the REAL
+ * `subscribeNewsletterAction`. Mocked boundaries: `@working-theory/api-client`
+ * (`flows.get`, `flows.submitStep`, `leads.captureStatus`, `leads.subscribe`),
+ * `next/headers`, `next-intl/server` (over the real English catalog), the
+ * `_site.mdx` contact-email read, and the page-renderer's content loaders
+ * (injected).
  */
 import React from "react";
-import { render, screen } from "@testing-library/react";
-
-jest.mock("@working-theory/ui", () => ({
-  // #7789: renderPage's fallback page head renders inside the section Container.
-  Container: ({ children }: { children?: React.ReactNode }) =>
-    React.createElement("div", null, children),
-  Heading: ({ children, level }: { children: React.ReactNode; level: number }) =>
-    React.createElement(`h${level}`, null, children),
-  SectionRenderer: ({
-    sections,
-  }: {
-    sections: Array<{
-      id: string;
-      type: string;
-      data: { action?: string; primaryCta?: { href: string } };
-    }>;
-  }) =>
-    React.createElement(
-      "div",
-      { "data-testid": "section-renderer" },
-      sections.map((s) =>
-        s.type === "newsletter"
-          ? React.createElement(
-              "form",
-              { key: s.id, "data-section-id": s.id, action: s.data.action },
-              "signup",
-            )
-          : React.createElement(
-              "div",
-              { key: s.id, "data-section-id": s.id },
-              s.data.primaryCta
-                ? React.createElement("a", { href: s.data.primaryCta.href }, "cta")
-                : null,
-            ),
-      ),
-    ),
-  localeHref: (locale: string, path: string) => `/${locale}${path}`,
-  LeadCaptureForm: (props: { fields?: Array<{ name: string; type: string }> }) =>
-    React.createElement("div", {
-      "data-testid": "lead-capture-form",
-      "data-fields": (props.fields ?? []).map((f) => `${f.name}:${f.type}`).join(","),
-    }),
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { newsletterFlowConfig, type FlowConfig } from "@working-theory/validation";
+
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: jest.fn(() => {
+    throw new Error("NEXT_NOT_FOUND");
+  }),
+}));
+
+jest.mock("next-mdx-remote/rsc", () => ({
+  __esModule: true,
+  MDXRemote: ({ source }: { source: string }) =>
+    React.createElement("div", { "data-testid": "mdx-rendered" }, source),
 }));
 
 jest.mock("@working-theory/api-client", () => ({
-  leads: { captureStatus: jest.fn() },
+  flows: { get: jest.fn(), submitStep: jest.fn() },
+  leads: { captureStatus: jest.fn(), submit: jest.fn(), subscribe: jest.fn() },
+  visitorForwardHeaders: () => undefined,
 }));
 
-jest.mock("next-intl/server", () => ({
-  getTranslations: async () => (key: string) => key,
+jest.mock("next/headers", () => ({
+  __esModule: true,
+  headers: jest.fn().mockResolvedValue({ get: () => null }),
+  cookies: jest.fn().mockResolvedValue({ get: () => undefined }),
 }));
 
-// eslint-disable-next-line no-restricted-syntax -- test-seam mock: the Server Action module is a "use server" boundary; the page only passes it through
-jest.mock("../newsletter.actions", () => ({
-  subscribeNewsletterAction: jest.fn(),
+// The real English catalog, so the page's own strings render as they ship.
+jest.mock("next-intl/server", () => {
+  const messages = jest.requireActual("../../../../messages/en.json") as Record<
+    string,
+    Record<string, unknown>
+  >;
+  return {
+    getLocale: async () => "en",
+    getTranslations: async (arg: string | { namespace: string }) => {
+      const ns = messages[typeof arg === "string" ? arg : arg.namespace] ?? {};
+      return (key: string, values?: Record<string, string>) =>
+        String(ns[key] ?? key).replace(/\{(\w+)\}/g, (m, name: string) => values?.[name] ?? m);
+    },
+  };
+});
+
+// eslint-disable-next-line no-restricted-syntax -- test-seam mock: the real read is a node:fs frontmatter parse of content/_site.mdx; narrowest possible scope
+jest.mock("../../contact/site-contact-email", () => ({
+  readSiteContactEmail: jest.fn().mockReturnValue("hi@x.co"),
 }));
 
-import { leads } from "@working-theory/api-client";
+import { flows, leads } from "@working-theory/api-client";
 
+import * as pageModule from "../page";
 import NewsletterPage from "../page";
 
+const mockFlowsGet = flows.get as jest.Mock;
+const mockSubmitStep = flows.submitStep as jest.Mock;
 const mockCaptureStatus = leads.captureStatus as jest.Mock;
+
 const status = (newsletter: boolean) => ({
   ok: true,
   status: 200,
   body: { ok: true, data: { contact: true, newsletter } },
 });
 
+/** The served magnet: the stored config minus its completion email. */
+function served(config: FlowConfig) {
+  const { completionEmail: _omitted, ...body } = config;
+  return { ok: true, status: 200, body };
+}
+
 const source = {
   frontmatter: {
     type: "NewsletterSignup" as const,
     slug: "newsletter",
-    title: "Newsletter",
+    title: "{Newsletter}",
     description: "What subscribers get.",
   },
   body: "",
 };
 
-/** `_base`'s content: a hero whose CTA points at `#signup`, the signup section, an FAQ. */
-const BASE_SECTIONS = [
-  { id: "hero", type: "hero", data: { headline: "News", primaryCta: { label: "Subscribe", href: "#signup" } } },
-  { id: "signup", type: "newsletter", data: { action: "/v1/leads/subscribe", source: "newsletter" } },
-  { id: "faq", type: "faq", data: { items: [] } },
+/** The starter's seed (#8847 D14): one column contact-form section. */
+const STARTER_SECTIONS = [
+  { id: "signup", type: "contact-form", data: { variant: "column", fields: [] } },
 ];
 
-/** #6738's Free content: no signup section. */
-const FREE_SECTIONS = [
-  { id: "hero", type: "hero", data: { headline: "News" } },
+/** `_base`'s pre-#8847 content: a hero whose CTA points at `#signup`, the signup section, an FAQ. */
+const LEGACY_SECTIONS = [
+  { id: "hero", type: "hero", data: { headline: "News", primaryCta: { label: "Subscribe", href: "#signup" } } },
+  { id: "signup", type: "newsletter", data: { action: "/v1/leads/subscribe", source: "newsletter" } },
   { id: "faq", type: "faq", data: { items: [] } },
 ];
 
@@ -108,59 +111,126 @@ async function renderWith(sections: unknown[]) {
   return render(element);
 }
 
-beforeEach(() => jest.clearAllMocks());
+// The page shares its hub reads for a few seconds, per module instance. Each
+// test starts an hour later so none sees another's read.
+let clock = 1_900_000_000_000;
+jest.spyOn(Date, "now").mockImplementation(() => clock);
 
-describe("NewsletterPage — #6730 D9", () => {
-  it("newsletter:true + no newsletter section → one appended form with a single email field", async () => {
-    mockCaptureStatus.mockResolvedValue(status(true));
+beforeEach(() => {
+  jest.clearAllMocks();
+  clock += 60 * 60 * 1000;
+  mockCaptureStatus.mockResolvedValue(status(true));
+  mockFlowsGet.mockResolvedValue(served(newsletterFlowConfig));
+});
 
-    await renderWith(FREE_SECTIONS);
+describe("NewsletterPage — the newsletter magnet (#8847 AC-6)", () => {
+  it("is rendered on every request, never ISR", () => {
+    expect(pageModule.dynamic).toBe("force-dynamic");
+    expect("revalidate" in pageModule).toBe(false);
+  });
+
+  it("the H1, label, consent and help line are the magnet's; no upsell", async () => {
+    await renderWith(STARTER_SECTIONS);
+
+    expect(mockFlowsGet).toHaveBeenCalledWith("newsletter");
+    const headings = screen.getAllByRole("heading", { level: 1 });
+    expect(headings).toHaveLength(1);
+    expect(headings[0]).toHaveTextContent("Get the newsletter");
+    expect(document.body).toHaveTextContent("One email when there is something new.");
+    expect(screen.getByText("Email")).not.toHaveClass("sr-only");
+    const statement = screen.getByTestId("newsletter-consent-statement");
+    expect(statement).toHaveTextContent("I accept the Terms and Privacy Policy.");
+    expect(statement.querySelector("a[href='/terms']")).not.toBeNull();
+    expect(statement.querySelector("a[href='/privacy']")).not.toBeNull();
+    expect(screen.getByTestId("newsletter-help")).toHaveTextContent("No spam. Unsubscribe any time.");
+    expect(screen.getByTestId("newsletter-submit")).toHaveTextContent("Subscribe");
+    for (const upsell of ["Substack", "Pro", "ailaunchkit.ai"]) {
+      expect(document.body).not.toHaveTextContent(upsell);
+    }
+  });
 
-    expect(screen.getAllByTestId("lead-capture-form")).toHaveLength(1);
-    expect(screen.getByTestId("lead-capture-form")).toHaveAttribute(
-      "data-fields",
-      "email:email",
+  it("generateMetadata's title is the magnet's step title", async () => {
+    const metadata = await pageModule.generateMetadata({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: jest.fn().mockResolvedValue(source),
+      getPageSections: jest.fn().mockResolvedValue(STARTER_SECTIONS),
+    });
+    expect(String((metadata.title as { absolute?: string })?.absolute ?? metadata.title)).toContain(
+      "Get the newsletter",
     );
   });
 
-  it("newsletter:false + no newsletter section → no form at all", async () => {
+  it("a signup goes through the magnet and the ending replaces the form", async () => {
+    mockSubmitStep.mockResolvedValue({
+      ok: true,
+      status: 200,
+      body: { sessionId: "s1", nextStepKey: null, completed: true },
+    });
+
+    await renderWith(STARTER_SECTIONS);
+    fireEvent.change(screen.getByTestId("newsletter-email-input"), { target: { value: "a@b.co" } });
+    fireEvent.click(screen.getByTestId("newsletter-consent-checkbox"));
+    await act(async () => {
+      fireEvent.submit(screen.getByTestId("newsletter-form"));
+    });
+
+    await waitFor(() =>
+      expect(screen.getByTestId("newsletter-success-headline")).toHaveTextContent("Check your inbox"),
+    );
+    expect(mockSubmitStep).toHaveBeenCalledWith("newsletter", {
+      stepKey: "subscribe",
+      values: { email: "a@b.co", "terms.newsletter": true },
+      locale: "en",
+    });
+    expect(leads.subscribe).not.toHaveBeenCalled();
+  });
+
+  it("with the hub unreadable, the seeded config renders", async () => {
+    mockFlowsGet.mockRejectedValue(new Error("hub down"));
+
+    await renderWith(STARTER_SECTIONS);
+
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Get the newsletter");
+    expect(screen.getByTestId("newsletter-form")).toBeInTheDocument();
+  });
+
+  it("with capture off, ContactFallback with the _site.mdx email renders and no newsletter form", async () => {
     mockCaptureStatus.mockResolvedValue(status(false));
 
-    const { container } = await renderWith(FREE_SECTIONS);
+    await renderWith(STARTER_SECTIONS);
 
-    expect(screen.queryByTestId("lead-capture-form")).toBeNull();
-    expect(container.querySelector("form")).toBeNull();
+    expect(screen.queryByTestId("newsletter-form")).toBeNull();
+    expect(document.querySelector("a[href='mailto:hi@x.co']")).not.toBeNull();
   });
 
-  it("newsletter:true + _base's newsletter section → that section renders, no second form", async () => {
-    mockCaptureStatus.mockResolvedValue(status(true));
+  it("an authored newsletter section never renders beside the slot (one signup form)", async () => {
+    await renderWith([...STARTER_SECTIONS, LEGACY_SECTIONS[1]]);
+
+    expect(screen.getAllByTestId("newsletter-form")).toHaveLength(1);
+    expect(document.querySelector("form[action='/v1/leads/subscribe']")).toBeNull();
+  });
+});
 
-    const { container } = await renderWith(BASE_SECTIONS);
+describe("NewsletterPage — a page with no contact-form section keeps its composition (#6730 D9)", () => {
+  it("newsletter:true + its own newsletter section → that section renders, no second form", async () => {
+    await renderWith(LEGACY_SECTIONS);
 
-    expect(container.querySelector("form[action='/v1/leads/subscribe']")).not.toBeNull();
-    expect(screen.queryByTestId("lead-capture-form")).toBeNull();
-    expect(container.querySelector("a[href='#signup']")).not.toBeNull();
+    expect(screen.getAllByTestId("newsletter-form")).toHaveLength(1);
+    expect(document.querySelector("a[href='#signup']")).not.toBeNull();
   });
 
-  it.each([
-    ["newsletter:false", () => mockCaptureStatus.mockResolvedValue(status(false))],
-    ["the status read rejecting", () => mockCaptureStatus.mockRejectedValue(new Error("ECONNREFUSED"))],
-    ["a 404 (older API)", () => mockCaptureStatus.mockResolvedValue({ ok: false, status: 404, body: {} })],
-  ])(
-    "%s + _base's newsletter section → the section is absent, and so is the hero CTA to it",
-    async (_label, arrange) => {
-      arrange();
-
-      const { container } = await renderWith(BASE_SECTIONS);
-
-      expect(container.querySelector("[data-section-id='signup']")).toBeNull();
-      expect(container.querySelector("form")).toBeNull();
-      expect(container.innerHTML).not.toContain("/v1/leads/subscribe");
-      expect(container.querySelector("a[href='#signup']")).toBeNull();
-      expect(screen.queryByTestId("lead-capture-form")).toBeNull();
-      // The rest of the page still renders.
-      expect(container.querySelector("[data-section-id='hero']")).not.toBeNull();
-      expect(container.querySelector("[data-section-id='faq']")).not.toBeNull();
-    },
-  );
+  it("newsletter:false → the signup section and the hero CTA to it are dropped", async () => {
+    mockCaptureStatus.mockResolvedValue(status(false));
+
+    await renderWith(LEGACY_SECTIONS);
+
+    expect(screen.queryByTestId("newsletter-form")).toBeNull();
+    expect(document.querySelector("a[href='#signup']")).toBeNull();
+  });
+
+  it("newsletter:true + no signup section → the magnet's form is appended", async () => {
+    await renderWith([{ id: "faq", type: "faq", data: { items: [] } }]);
+
+    expect(screen.getAllByTestId("newsletter-form")).toHaveLength(1);
+  });
 });

package/templates/apps/web/app/[locale]/newsletter/page.tsx

@@ -3,21 +3,26 @@
 // content the route 404s. Mirrors for/page.tsx: a sections-composed
 // page renders its sections, a prose-only page its MDX body.
 //
-// A signup only when there is somewhere to keep it (#6730 D9). The API says
-// whether it accepts a subscription (`GET /v1/leads/capture` — a database is
-// set up):
+// The newsletter magnet is the only source (#8847 D11): the page reads the
+// workspace's `newsletter` magnet (`flows.get("newsletter")`, shared for 15
+// seconds per instance like /contact's read), else the seeded
+// `newsletterFlowConfig` when the hub cannot be read. Its step title is the
+// page's H1 and `<title>`, its body the line under it (`framedSources`), and
+// the standard `NewsletterFormInline` — label, consent, help line, button and
+// ending all the magnet's — goes into the page's first `contact-form`
+// section, bound to `subscribeNewsletterAction`. Rendered on every request.
 //
-//   - accepting: a content `newsletter` section renders as authored (its own
-//     form posts to `/v1/leads/subscribe`); a page with no such section gets
-//     the shared `LeadCaptureForm` (one email field) appended, bound to
-//     `subscribeNewsletterAction`.
-//   - otherwise — including an unreachable API — every `newsletter` section
-//     is dropped before render, and a leading hero's CTA that pointed at a
-//     dropped section's anchor goes with it, so no signup form of any kind
-//     renders and no button points at a section that is gone. The API
-//     refuses a subscribe in that state anyway, so a cached page can never
-//     record a false success.
-import { leads } from "@working-theory/api-client";
+// A signup only when there is somewhere to keep it (#6730 D9): when the API
+// does not accept a subscription (`GET /v1/leads/capture` — a database is set
+// up), the slot holds `ContactFallback` with the site's contact email.
+//
+// An authored `newsletter` section never renders beside the slot. A page with
+// no `contact-form` section keeps the composition it had before
+// #8847: a content `newsletter` section renders as authored when accepting
+// (its own form posts to `/v1/leads/subscribe`), a page with no such section
+// gets the signup appended, and when not accepting every `newsletter` section
+// is dropped before render, with any leading-hero CTA that pointed at a
+// dropped section's anchor.
 import type {
   getMdxSource as defaultGetMdxSource,
   getPageSections as defaultGetPageSections,
@@ -28,14 +33,25 @@ import {
   renderPage,
   renderPageMetadata,
 } from "@working-theory/page-renderer";
-import { LeadCaptureForm, localeHref } from "@working-theory/ui";
+import { ContactFallback } from "@working-theory/ui";
+import { NEWSLETTER_FLOW_SLUG, newsletterFlowConfig } from "@working-theory/validation";
 import type { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
 
-import { subscribeNewsletterAction } from "./newsletter.actions";
+import {
+  framedSources,
+  inPageView,
+  type InPageView,
+  newsletterSignup,
+  type NewsletterFormView,
+  readCaptureStatus,
+  readServedMagnet,
+} from "../../../lib/in-page-magnet";
+import { readSiteContactEmail } from "../contact/site-contact-email";
 
-export const revalidate = 60;
+// #8847 D11 — rendered on every request; the magnet read behind it is shared for 15 seconds.
+export const dynamic = "force-dynamic";
 
 interface Props {
   params: Promise<{ locale: string }>;
@@ -44,15 +60,16 @@ interface Props {
 }
 
 type Section = Awaited<ReturnType<typeof defaultGetPageSections>>[number];
+type NewsletterView = InPageView & { form: NewsletterFormView };
 
-/** Whether the API accepts a subscription; `false` for any failed read. */
-async function acceptsSubscription(): Promise<boolean> {
-  try {
-    const res = await leads.captureStatus();
-    return res.ok && res.body.ok === true && res.body.data.newsletter;
-  } catch {
-    return false;
-  }
+/** The served newsletter magnet's view when it maps, else the seeded config's. */
+async function newsletterView(locale: string): Promise<NewsletterView> {
+  const magnet = await readServedMagnet(NEWSLETTER_FLOW_SLUG);
+  const view =
+    (magnet ? inPageView(magnet, locale, "newsletter") : null) ??
+    // The seeded config always maps: one step, its email and consent fields.
+    inPageView(newsletterFlowConfig, locale, "newsletter")!;
+  return view as NewsletterView;
 }
 
 /**
@@ -77,12 +94,22 @@ function withoutSignup(sections: Section[]): Section[] {
 
 export async function generateMetadata({
   params,
-}: Pick<Props, "params">): Promise<Metadata> {
+  getMdxSource,
+  getPageSections,
+}: Props): Promise<Metadata> {
   const { locale } = await params;
+  const view = await newsletterView(locale);
+  // #8847 D11 — the `<title>` is the magnet's step title, like the H1.
+  const framed = framedSources({
+    getMdxSource: getMdxSource ?? loadMdxSource,
+    getPageSections: getPageSections ?? loadPageSections,
+    view,
+  });
   return renderPageMetadata({
     type: "NewsletterSignup",
     slug: "newsletter",
     locale,
+    getMdxSource: framed.getMdxSource,
   });
 }
 
@@ -92,51 +119,61 @@ export default async function Page({
   getPageSections,
 }: Props): Promise<ReactElement> {
   const { locale } = await params;
-  const load = getMdxSource ?? loadMdxSource;
-  const loadSections = getPageSections ?? loadPageSections;
-  const [source, accepting] = await Promise.all([
-    load("NewsletterSignup", "newsletter", locale),
-    acceptsSubscription(),
-  ]);
-  const declared = source ? await loadSections(source.frontmatter) : [];
+  const [status, view] = await Promise.all([readCaptureStatus(), newsletterView(locale)]);
+  const accepting = status?.newsletter === true;
+  const framed = framedSources({
+    getMdxSource: getMdxSource ?? loadMdxSource,
+    getPageSections: getPageSections ?? loadPageSections,
+    view,
+  });
+  const source = await framed.getMdxSource("NewsletterSignup", "newsletter", locale);
+  const declared = source ? await framed.getPageSections(source.frontmatter) : [];
   const composed = declared.length > 0;
+  const slot = declared.find((s) => s.type === "contact-form")?.id;
   const hasSignupSection = declared.some((s) => s.type === "newsletter");
+  const contactEmail = readSiteContactEmail();
+
+  let surface: ReactElement;
+  if (accepting) {
+    surface = newsletterSignup(view, {
+      locale,
+      className: "mx-auto",
+      ...(contactEmail !== undefined && { fallbackEmail: contactEmail }),
+    });
+  } else {
+    const tc = await getTranslations({ locale, namespace: "contact" });
+    surface = (
+      <ContactFallback
+        email={contactEmail}
+        text={{
+          heading: tc("unavailableHeading"),
+          body: tc("unavailableBody", { email: "{email}" }),
+          noEmail: tc("unavailableNoEmail"),
+        }}
+      />
+    );
+  }
 
   const rendered = await renderPage({
     type: "NewsletterSignup",
     slug: "newsletter",
     locale,
     ...(composed ? {} : { bodyMode: "mdx-body" as const }),
-    ...(getMdxSource !== undefined && { getMdxSource }),
-    getPageSections: accepting
-      ? loadSections
-      : async (frontmatter: unknown) => withoutSignup(await loadSections(frontmatter)),
+    getMdxSource: framed.getMdxSource,
+    // With a slot the magnet's form is the page's one signup, so an authored
+    // `newsletter` section (posting around the magnet) never renders beside it.
+    getPageSections:
+      accepting && slot === undefined
+        ? framed.getPageSections
+        : async (frontmatter: unknown) => withoutSignup(await framed.getPageSections(frontmatter)),
+    ...(slot !== undefined && { sectionSlots: { [slot]: surface } }),
   });
 
-  if (!accepting || hasSignupSection || source === null) return rendered;
-
-  const [t, tc] = await Promise.all([
-    getTranslations({ locale, namespace: "newsletter" }),
-    getTranslations({ locale, namespace: "contact" }),
-  ]);
+  if (slot !== undefined || !accepting || hasSignupSection || source === null) return rendered;
   return (
     <>
       {rendered}
-      <LeadCaptureForm
-        action={subscribeNewsletterAction}
-        fields={[{ name: "email", label: t("emailLabel"), type: "email", required: true }]}
-        termsHref={localeHref(locale, "/terms")}
-        text={{
-          submit: t("submit"),
-          sending: t("sending"),
-          success: t("success"),
-          consentStatement: t("consentStatement"),
-          genericError: tc("genericError"),
-          unavailableHeading: tc("unavailableHeading"),
-          unavailableBody: tc("unavailableBody", { email: "{email}" }),
-          unavailableNoEmail: tc("unavailableNoEmail"),
-        }}
-      />
+      {surface}
     </>
   );
 }

package/templates/apps/web/app/[locale]/pricing/__tests__/__snapshots__/unconnected.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`/pricing on an unconnected site is today's page (#8927 AC-4) renders today's DI page for ?plan=BASIC 1`] = `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"Pricing","description":"Plans for every stage."},{"@context":"https://schema.org","@type":"Offer","name":"Basic","price":"29","priceCurrency":"USD"},{"@context":"https://schema.org","@type":"Offer","name":"Business","price":"79","priceCurrency":"USD"},{"@context":"https://schema.org","@type":"Offer","name":"Agency","price":"199","priceCurrency":"USD"},{"@context":"https://schema.org","@type":"AggregateOffer","priceCurrency":"USD","lowPrice":"29","highPrice":"199","offerCount":3}]}</script><main id="main"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 py-section"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">Pricing</h1><p data-testid="pricing-description" class="mt-block-tight text-lead">Plans for every stage.</p></div><div class="ailk-section-renderer" data-testid="section-renderer"><span id="section-plans" class="ailk-section-anchor" aria-hidden="true" data-testid="section-anchor"></span><section class="py-section bg-(--color-bg)" data-testid="pricing" data-section="pricing"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8"><span hidden="" data-testid="pricing-recommended-anchor"></span><div class="grid gap-grid md:grid-cols-2 lg:grid-cols-3 mt-10 items-stretch pricing-card-row-grid" data-testid="pricing-grid" data-separation="gapped"><div class="ailk-pricing-tier-card pricing-card-subgrid" data-testid="pricing-tier-card" aria-current="true"><div class="pricing-card-subgrid-body"><div class="h-full rounded-card p-card pricing-card-subgrid border-thin border-(--color-brand) bg-(--color-surface-raised)" data-testid="card"><div class="row-start-1 flex flex-wrap items-center gap-2 justify-between"><h3 class="text-heading-3 font-display text-fg text-2xl font-normal">Basic</h3><div class="group inline-flex items-center border-hairline rounded-full transition-colors focus-visible:outline-none bg-(--color-brand) border-transparent text-(--color-fg-on-brand) hover:bg-(--color-brand)/90 focus-visible:bg-(--color-brand)/90 ps-2 pe-2 py-0.5 text-body-sm" data-testid="tier-badge">Recommended for you</div></div><div class="row-start-3 mt-6"><h4 class="text-heading-4 font-display text-fg text-4xl font-medium tracking-tight">$29</h4><span class="text-body font-body leading-normal text-fg mt-1 text-body-sm text-(--color-text-muted)">/month</span></div><div class="row-start-5 mt-6"><a class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 bg-(--color-brand) text-(--color-fg-on-brand) not-disabled:hover:bg-(--button-hover-bg) not-disabled:hover:text-(--button-hover-fg) not-disabled:hover:outline not-disabled:hover:outline-1 not-disabled:hover:-outline-offset-1 not-disabled:hover:outline-(--button-hover-border) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:opacity-80 rounded-control px-control-x min-h-(--control-height-big) w-full" href="/checkout/basic" data-testid="tier-cta">Choose Basic</a></div><ul class="row-start-6 mt-block-loose space-y-3" role="list"><li class="flex items-start gap-2"><span data-testid="feature-check-circle" class="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full check-badge"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-[var(--icon-size-xs)] check-glyph" aria-label="Included" role="img"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-body font-body leading-normal text-fg text-body-sm text-(--color-fg)">One site</span></li></ul></div></div></div><div class="ailk-pricing-tier-card pricing-card-subgrid" data-testid="pricing-tier-card"><div class="pricing-card-subgrid-body"><div class="h-full rounded-card p-card pricing-card-subgrid border-hairline border-(--color-border) bg-(--color-surface-raised)" data-testid="card"><div class="row-start-1 flex flex-wrap items-center gap-2 justify-between"><h3 class="text-heading-3 font-display text-fg text-2xl font-normal">Business</h3></div><div class="row-start-3 mt-6"><h4 class="text-heading-4 font-display text-fg text-4xl font-medium tracking-tight">$79</h4><span class="text-body font-body leading-normal text-fg mt-1 text-body-sm text-(--color-text-muted)">/month</span></div><div class="row-start-5 mt-6"><a class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 border-hairline border-(--color-border) text-(--color-fg) bg-transparent not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x min-h-(--control-height-big) w-full" href="/checkout/business" data-testid="tier-cta">Choose Business</a></div><ul class="row-start-6 mt-block-loose space-y-3" role="list"><li class="flex items-start gap-2"><span data-testid="feature-check-circle" class="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full check-badge"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-[var(--icon-size-xs)] check-glyph" aria-label="Included" role="img"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-body font-body leading-normal text-fg text-body-sm text-(--color-fg)">Three sites</span></li></ul></div></div></div><div class="ailk-pricing-tier-card pricing-card-subgrid" data-testid="pricing-tier-card"><div class="pricing-card-subgrid-body"><div class="h-full rounded-card p-card pricing-card-subgrid border-hairline border-(--color-border) bg-(--color-surface-raised)" data-testid="card"><div class="row-start-1 flex flex-wrap items-center gap-2 justify-between"><h3 class="text-heading-3 font-display text-fg text-2xl font-normal">Agency</h3></div><div class="row-start-3 mt-6"><h4 class="text-heading-4 font-display text-fg text-4xl font-medium tracking-tight">$199</h4><span class="text-body font-body leading-normal text-fg mt-1 text-body-sm text-(--color-text-muted)">/month</span></div><div class="row-start-5 mt-6"><a class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 border-hairline border-(--color-border) text-(--color-fg) bg-transparent not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x min-h-(--control-height-big) w-full" href="/checkout/agency" data-testid="tier-cta">Choose Agency</a></div><ul class="row-start-6 mt-block-loose space-y-3" role="list"><li class="flex items-start gap-2"><span data-testid="feature-check-circle" class="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full check-badge"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-[var(--icon-size-xs)] check-glyph" aria-label="Included" role="img"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-body font-body leading-normal text-fg text-body-sm text-(--color-fg)">Unlimited sites</span></li></ul></div></div></div></div></div></section></div></main>"`;
+
+exports[`/pricing on an unconnected site is today's page (#8927 AC-4) renders today's DI page for ?plan=agency 1`] = `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"Pricing","description":"Plans for every stage."},{"@context":"https://schema.org","@type":"Offer","name":"Basic","price":"29","priceCurrency":"USD"},{"@context":"https://schema.org","@type":"Offer","name":"Business","price":"79","priceCurrency":"USD"},{"@context":"https://schema.org","@type":"Offer","name":"Agency","price":"199","priceCurrency":"USD"},{"@context":"https://schema.org","@type":"AggregateOffer","priceCurrency":"USD","lowPrice":"29","highPrice":"199","offerCount":3}]}</script><main id="main"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 py-section"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">Pricing</h1><p data-testid="pricing-description" class="mt-block-tight text-lead">Plans for every stage.</p></div><div class="ailk-section-renderer" data-testid="section-renderer"><span id="section-plans" class="ailk-section-anchor" aria-hidden="true" data-testid="section-anchor"></span><section class="py-section bg-(--color-bg)" data-testid="pricing" data-section="pricing"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8"><span hidden="" data-testid="pricing-recommended-anchor"></span><div class="grid gap-grid md:grid-cols-2 lg:grid-cols-3 mt-10 items-stretch pricing-card-row-grid" data-testid="pricing-grid" data-separation="gapped"><div class="ailk-pricing-tier-card pricing-card-subgrid" data-testid="pricing-tier-card"><div class="pricing-card-subgrid-body"><div class="h-full rounded-card p-card pricing-card-subgrid border-hairline border-(--color-border) bg-(--color-surface-raised)" data-testid="card"><div class="row-start-1 flex flex-wrap items-center gap-2 justify-between"><h3 class="text-heading-3 font-display text-fg text-2xl font-normal">Basic</h3></div><div class="row-start-3 mt-6"><h4 class="text-heading-4 font-display text-fg text-4xl font-medium tracking-tight">$29</h4><span class="text-body font-body leading-normal text-fg mt-1 text-body-sm text-(--color-text-muted)">/month</span></div><div class="row-start-5 mt-6"><a class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 border-hairline border-(--color-border) text-(--color-fg) bg-transparent not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x min-h-(--control-height-big) w-full" href="/checkout/basic" data-testid="tier-cta">Choose Basic</a></div><ul class="row-start-6 mt-block-loose space-y-3" role="list"><li class="flex items-start gap-2"><span data-testid="feature-check-circle" class="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full check-badge"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-[var(--icon-size-xs)] check-glyph" aria-label="Included" role="img"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-body font-body leading-normal text-fg text-body-sm text-(--color-fg)">One site</span></li></ul></div></div></div><div class="ailk-pricing-tier-card pricing-card-subgrid" data-testid="pricing-tier-card"><div class="pricing-card-subgrid-body"><div class="h-full rounded-card p-card pricing-card-subgrid border-hairline border-(--color-border) bg-(--color-surface-raised)" data-testid="card"><div class="row-start-1 flex flex-wrap items-center gap-2 justify-between"><h3 class="text-heading-3 font-display text-fg text-2xl font-normal">Business</h3></div><div class="row-start-3 mt-6"><h4 class="text-heading-4 font-display text-fg text-4xl font-medium tracking-tight">$79</h4><span class="text-body font-body leading-normal text-fg mt-1 text-body-sm text-(--color-text-muted)">/month</span></div><div class="row-start-5 mt-6"><a class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 border-hairline border-(--color-border) text-(--color-fg) bg-transparent not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x min-h-(--control-height-big) w-full" href="/checkout/business" data-testid="tier-cta">Choose Business</a></div><ul class="row-start-6 mt-block-loose space-y-3" role="list"><li class="flex items-start gap-2"><span data-testid="feature-check-circle" class="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full check-badge"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-[var(--icon-size-xs)] check-glyph" aria-label="Included" role="img"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-body font-body leading-normal text-fg text-body-sm text-(--color-fg)">Three sites</span></li></ul></div></div></div><div class="ailk-pricing-tier-card pricing-card-subgrid" data-testid="pricing-tier-card" aria-current="true"><div class="pricing-card-subgrid-body"><div class="h-full rounded-card p-card pricing-card-subgrid border-thin border-(--color-brand) bg-(--color-surface-raised)" data-testid="card"><div class="row-start-1 flex flex-wrap items-center gap-2 justify-between"><h3 class="text-heading-3 font-display text-fg text-2xl font-normal">Agency</h3><div class="group inline-flex items-center border-hairline rounded-full transition-colors focus-visible:outline-none bg-(--color-brand) border-transparent text-(--color-fg-on-brand) hover:bg-(--color-brand)/90 focus-visible:bg-(--color-brand)/90 ps-2 pe-2 py-0.5 text-body-sm" data-testid="tier-badge">Recommended for you</div></div><div class="row-start-3 mt-6"><h4 class="text-heading-4 font-display text-fg text-4xl font-medium tracking-tight">$199</h4><span class="text-body font-body leading-normal text-fg mt-1 text-body-sm text-(--color-text-muted)">/month</span></div><div class="row-start-5 mt-6"><a class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 bg-(--color-brand) text-(--color-fg-on-brand) not-disabled:hover:bg-(--button-hover-bg) not-disabled:hover:text-(--button-hover-fg) not-disabled:hover:outline not-disabled:hover:outline-1 not-disabled:hover:-outline-offset-1 not-disabled:hover:outline-(--button-hover-border) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:opacity-80 rounded-control px-control-x min-h-(--control-height-big) w-full" href="/checkout/agency" data-testid="tier-cta">Choose Agency</a></div><ul class="row-start-6 mt-block-loose space-y-3" role="list"><li class="flex items-start gap-2"><span data-testid="feature-check-circle" class="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full check-badge"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-[var(--icon-size-xs)] check-glyph" aria-label="Included" role="img"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-body font-body leading-normal text-fg text-body-sm text-(--color-fg)">Unlimited sites</span></li></ul></div></div></div></div></div></section></div></main>"`;
+
+exports[`/pricing on an unconnected site is today's page (#8927 AC-4) renders today's DI page for no plan 1`] = `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"Pricing","description":"Plans for every stage."},{"@context":"https://schema.org","@type":"Offer","name":"Basic","price":"29","priceCurrency":"USD"},{"@context":"https://schema.org","@type":"Offer","name":"Business","price":"79","priceCurrency":"USD"},{"@context":"https://schema.org","@type":"Offer","name":"Agency","price":"199","priceCurrency":"USD"},{"@context":"https://schema.org","@type":"AggregateOffer","priceCurrency":"USD","lowPrice":"29","highPrice":"199","offerCount":3}]}</script><main id="main"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 py-section"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">Pricing</h1><p data-testid="pricing-description" class="mt-block-tight text-lead">Plans for every stage.</p></div><div class="ailk-section-renderer" data-testid="section-renderer"><span id="section-plans" class="ailk-section-anchor" aria-hidden="true" data-testid="section-anchor"></span><section class="py-section bg-(--color-bg)" data-testid="pricing" data-section="pricing"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8"><div class="grid gap-grid md:grid-cols-2 lg:grid-cols-3 mt-10 items-stretch pricing-card-row-grid" data-testid="pricing-grid" data-separation="gapped"><div class="ailk-pricing-tier-card pricing-card-subgrid" data-testid="pricing-tier-card"><div class="pricing-card-subgrid-body"><div class="h-full rounded-card p-card pricing-card-subgrid border-hairline border-(--color-border) bg-(--color-surface-raised)" data-testid="card"><div class="row-start-1 flex flex-wrap items-center gap-2 justify-between"><h3 class="text-heading-3 font-display text-fg text-2xl font-normal">Basic</h3></div><div class="row-start-3 mt-6"><h4 class="text-heading-4 font-display text-fg text-4xl font-medium tracking-tight">$29</h4><span class="text-body font-body leading-normal text-fg mt-1 text-body-sm text-(--color-text-muted)">/month</span></div><div class="row-start-5 mt-6"><a class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 border-hairline border-(--color-border) text-(--color-fg) bg-transparent not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x min-h-(--control-height-big) w-full" href="/checkout/basic" data-testid="tier-cta">Choose Basic</a></div><ul class="row-start-6 mt-block-loose space-y-3" role="list"><li class="flex items-start gap-2"><span data-testid="feature-check-circle" class="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full check-badge"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-[var(--icon-size-xs)] check-glyph" aria-label="Included" role="img"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-body font-body leading-normal text-fg text-body-sm text-(--color-fg)">One site</span></li></ul></div></div></div><div class="ailk-pricing-tier-card pricing-card-subgrid" data-testid="pricing-tier-card" aria-current="true"><div class="pricing-card-subgrid-body"><div class="h-full rounded-card p-card pricing-card-subgrid border-thin border-(--color-brand) bg-(--color-surface-raised)" data-testid="card"><div class="row-start-1 flex flex-wrap items-center gap-2 justify-between"><h3 class="text-heading-3 font-display text-fg text-2xl font-normal">Business</h3><div class="group inline-flex items-center border-hairline rounded-full transition-colors focus-visible:outline-none bg-(--color-brand) border-transparent text-(--color-fg-on-brand) hover:bg-(--color-brand)/90 focus-visible:bg-(--color-brand)/90 ps-2 pe-2 py-0.5 text-body-sm" data-testid="tier-badge">Recommended</div></div><div class="row-start-3 mt-6"><h4 class="text-heading-4 font-display text-fg text-4xl font-medium tracking-tight">$79</h4><span class="text-body font-body leading-normal text-fg mt-1 text-body-sm text-(--color-text-muted)">/month</span></div><div class="row-start-5 mt-6"><a class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 bg-(--color-brand) text-(--color-fg-on-brand) not-disabled:hover:bg-(--button-hover-bg) not-disabled:hover:text-(--button-hover-fg) not-disabled:hover:outline not-disabled:hover:outline-1 not-disabled:hover:-outline-offset-1 not-disabled:hover:outline-(--button-hover-border) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:opacity-80 rounded-control px-control-x min-h-(--control-height-big) w-full" href="/checkout/business" data-testid="tier-cta">Choose Business</a></div><ul class="row-start-6 mt-block-loose space-y-3" role="list"><li class="flex items-start gap-2"><span data-testid="feature-check-circle" class="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full check-badge"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-[var(--icon-size-xs)] check-glyph" aria-label="Included" role="img"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-body font-body leading-normal text-fg text-body-sm text-(--color-fg)">Three sites</span></li></ul></div></div></div><div class="ailk-pricing-tier-card pricing-card-subgrid" data-testid="pricing-tier-card"><div class="pricing-card-subgrid-body"><div class="h-full rounded-card p-card pricing-card-subgrid border-hairline border-(--color-border) bg-(--color-surface-raised)" data-testid="card"><div class="row-start-1 flex flex-wrap items-center gap-2 justify-between"><h3 class="text-heading-3 font-display text-fg text-2xl font-normal">Agency</h3></div><div class="row-start-3 mt-6"><h4 class="text-heading-4 font-display text-fg text-4xl font-medium tracking-tight">$199</h4><span class="text-body font-body leading-normal text-fg mt-1 text-body-sm text-(--color-text-muted)">/month</span></div><div class="row-start-5 mt-6"><a class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 border-hairline border-(--color-border) text-(--color-fg) bg-transparent not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x min-h-(--control-height-big) w-full" href="/checkout/agency" data-testid="tier-cta">Choose Agency</a></div><ul class="row-start-6 mt-block-loose space-y-3" role="list"><li class="flex items-start gap-2"><span data-testid="feature-check-circle" class="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full check-badge"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-[var(--icon-size-xs)] check-glyph" aria-label="Included" role="img"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-body font-body leading-normal text-fg text-body-sm text-(--color-fg)">Unlimited sites</span></li></ul></div></div></div></div></div></section></div></main>"`;