@wenathlan/cobaia 0.0.0-stage → 2.0.155

package/App.tsx

@@ -0,0 +1,52 @@
+/**
+ * App — the global anchor (layer 1 of the anchor architecture) and the only
+ * TSX outside the cobaia theme. cobaia is the family site: the front door
+ * of the DevThink family — the pricing, the support page, the app directory
+ * and the update blog for the ten deployable applications. The site is a
+ * plain CONTENT surface: no onboarding, no entry gate — the home renders
+ * directly and every page is public; the intro (/intro) is the one bare
+ * presentation page the family grammar gives every app, mounted full-bleed
+ * under the family fullscreen law. The root manages the theme as a single
+ * file: it imports only the theme anchor (Sol/Sol.tsx — the file named
+ * after the theme folder, beside Sol/sol.css), the theme stylesheet and the
+ * root logics, wraps the anchor in the wouter router (the subpath the pages
+ * deploy owns answers through the declared base, the same mount grammar
+ * every sibling carries) and renders the theme into the root element —
+ * the site never booted without this mount (the blank cobaia defect).
+ * Every page and component lives behind the anchor chain (App → Sol → the
+ * page anchors → the loose components); nothing is imported directly.
+ */
+import { createRoot } from "react-dom/client";
+import { Router as WouterRouter } from "wouter";
+import Sol from "./Sol/Sol";
+import "@fontsource-variable/geist-mono";
+import "@fontsource-variable/inter";
+import "./Sol/sol.css";
+import { seedLabels } from "./labels";
+
+// the copy law rides the boot: the seed refreshes the label store rows from
+// the manifest (the browser cache mirrors the site db rows) before the theme
+// renders — best effort, the manifest always answers the wingets.
+if (typeof window !== "undefined") void seedLabels().catch(() => {});
+
+function routerBase(): string {
+  // the base rides the BUILD declaration only (the sibling grammar): the
+  // pages subpath owns /devthink/cobaia/, and that declaration arrives
+  // through the vite base — deriving it from the runtime path made every
+  // deep link look like a deployment subfolder
+  const declaredBase = import.meta.env.BASE_URL;
+  if (declaredBase !== "/" && declaredBase !== "./") return declaredBase.replace(/\/$/, "");
+  return "";
+}
+
+function App() {
+  return (
+    <WouterRouter base={routerBase()}>
+      <Sol />
+    </WouterRouter>
+  );
+}
+
+const root = document.getElementById("root");
+if (!root) throw new Error("cobaia root element is missing.");
+createRoot(root).render(<App />);

package/Dockerfile

@@ -0,0 +1,45 @@
+# cobaia 2.0.134 — THE SITE CONTAINER FILE
+#
+# The family container doctrine in the sol shape: one versioned static
+# container per site. The sol theme builds inside the container — stage one
+# installs the locked pnpm tree and runs the vite build, stage two serves
+# the built theme through the unprivileged nginx image. The version rides
+# the ARG the metadata lockstep stamps and the OCI labels declare — the
+# registry lanes pass it at build time, nothing is hardcoded beside the
+# stamp.
+
+FROM node:26-alpine@sha256:40cd011b55415bc894e45b02fdd5a5dfde056921b7d23a64c74f80497af48797 AS solbuild
+
+ARG COBAIA_VERSION=2.0.134
+
+WORKDIR /src
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+RUN apk add --no-cache python3 make g++ \
+ && npm install -g --no-fund --no-audit pnpm@12.3.4 \
+ && pnpm install --frozen-lockfile
+COPY . .
+RUN pnpm build
+
+FROM nginxinc/nginx-unprivileged:1.29-alpine@sha256:0c79d56aee561a1d81c63f00eee5fb5fe29279560cdc55e91425133104c7fbe6
+
+ARG COBAIA_VERSION=2.0.134
+
+LABEL org.opencontainers.image.title="cobaia" \
+      org.opencontainers.image.description="cobaia — the monetization surface: the ads, the plans and the conversion, kept apart from the main sites." \
+      org.opencontainers.image.version="${COBAIA_VERSION}" \
+      org.opencontainers.image.licenses="GPL-3.0-only" \
+      org.opencontainers.image.source="https://github.com/wenathlan/devthink" \
+      org.opencontainers.image.documentation="https://github.com/wenathlan/devthink/tree/main/cobaia"
+
+COPY --from=solbuild /src/ /usr/share/nginx/html/
+
+# the explicit non-root runtime user (uid 101 is the nginx-unprivileged
+# default): the scan gate refuses an image without a pinned unprivileged
+# user, so the declaration is spelled out instead of inherited.
+USER 101
+
+# the unprivileged image answers 8080; the healthcheck probes the served
+# root the same way the pages lane does.
+EXPOSE 8080
+HEALTHCHECK --interval=30s --timeout=5s --start-period=5s --retries=3 \
+  CMD ["wget", "-qO-", "http://127.0.0.1:8080/"]

package/Sol/Sol.tsx

@@ -0,0 +1,91 @@
+/**
+ * Sol theme anchor — layer 2 of the anchor architecture.
+ * The file carrying the theme folder's own name (Sol/Sol.tsx, beside
+ * Sol/sol.css) is the path manager of the pages: it imports one anchor per
+ * page folder (`folder/folder.tsx`, each beside the loose components its
+ * folder keeps) and mounts every route of the theme. App.tsx consumes only
+ * this file and the theme stylesheet; no page component is ever imported
+ * outside this layer. When a theme folder changes its name (Moon, Aqua),
+ * this file follows the new name and App.tsx keeps importing the anchor by
+ * the folder path.
+ *
+ * The cobaia is a CONTENT site (the monetization surface of the family): no
+ * onboarding, no entry gate — every content route is a page of the site, and
+ * the home renders directly on the bare root. The intro (/intro) is the one
+ * public presentation page of the family grammar (every app carries one) and
+ * mounts BARE — outside the window chrome, like the sibling sites mount
+ * theirs; the shell's close-caption door relaunches the site at it. Every
+ * content route renders as the page body of the ONE shared shell (the header
+ * and the footer); every page is freely reachable, and the catch-all lands
+ * on the 404 anchor.
+ */
+import type { ReactNode } from "react";
+import { Route, Switch } from "wouter";
+import AppsAnchor from "./apps/apps";
+import BlogAnchor from "./blog/blog";
+import HomeAnchor from "./home/home";
+import IntroAnchor from "./intro/intro";
+import LegalAnchor from "./legal/legal";
+import NotFoundAnchor from "./notfound/notfound";
+import PricingAnchor from "./pricing/pricing";
+import { Shell } from "./shell/Shell";
+import SupportAnchor from "./support/support";
+
+/** the content pages: the site chrome around one page anchor */
+function Content({ children }: { children: ReactNode }) {
+  return <Shell>{children}</Shell>;
+}
+
+/** the unrouted addresses: the 404 answer of the cobaia, inside the site
+ * chrome (the theme catch-all) */
+function Unrouted() {
+  return (
+    <Shell>
+      <NotFoundAnchor />
+    </Shell>
+  );
+}
+
+/** Mounts the theme surface through the page anchors: the bare intro first
+ * (the public presentation, outside the chrome, like the siblings mount
+ * theirs), then the content pages of the site — the home on the bare root,
+ * the five public sections, and the catch-all last. No entry flow: the site
+ * is content end to end. */
+export default function Sol() {
+  return (
+    <Switch>
+      <Route path="/intro" component={IntroAnchor} />
+      <Route path="/">
+        <Content>
+          <HomeAnchor />
+        </Content>
+      </Route>
+      <Route path="/apps">
+        <Content>
+          <AppsAnchor />
+        </Content>
+      </Route>
+      <Route path="/pricing">
+        <Content>
+          <PricingAnchor />
+        </Content>
+      </Route>
+      <Route path="/support">
+        <Content>
+          <SupportAnchor />
+        </Content>
+      </Route>
+      <Route path="/blog">
+        <Content>
+          <BlogAnchor />
+        </Content>
+      </Route>
+      <Route path="/legal">
+        <Content>
+          <LegalAnchor />
+        </Content>
+      </Route>
+      <Route component={Unrouted} />
+    </Switch>
+  );
+}

package/Sol/apps/apps.tsx

@@ -0,0 +1,66 @@
+/**
+ * apps page anchor — layer 3 of the anchor architecture.
+ * The file carrying the folder's own name is the path manager of the page:
+ * it imports the loose components beside it (the roster data), mounts the
+ * page and re-exports the public component surface. Only the theme anchor
+ * (Sol/Sol.tsx) consumes this file.
+ *
+ * The app directory of the cobaia content site: the ten deploy units of the
+ * family, each card carrying the honest one-line role and the deep link
+ * through the familyurl contract (../slug/ — the family redirects both
+ * ways). The accents come from the spec §12 table mirrored in the roster;
+ * the roles are the ones each app declares in its own devthink.toml. The
+ * in-feed ad slot closes the feed at the end of the content.
+ */
+import type { CSSProperties } from "react";
+import { useContent } from "../../content.ts";
+import { familyurl } from "../../familyurl";
+import { label, labelfill } from "../../labels";
+import { roster } from "../../roster.ts";
+import { AdSlot } from "../wingets";
+
+export function Apps() {
+  useContent();
+  return (
+    <div className="cb-page">
+      <section className="cb-hero" aria-label={label("apps.aria.hero")}>
+        <p className="cb-eyebrow cb-in" style={{ "--cb-d": 0 } as CSSProperties}>
+          {label("apps.eyebrow")}
+        </p>
+        <h1 className="cb-title cb-in" style={{ "--cb-d": 1 } as CSSProperties}>
+          {label("apps.title")}
+        </h1>
+        <p className="cb-lede cb-in" style={{ "--cb-d": 2 } as CSSProperties}>
+          {label("apps.lede")}
+        </p>
+      </section>
+
+      <section className="cb-section" aria-label={label("apps.section.rosterAria")}>
+        <div className="cb-appgrid">
+          {roster().map((member, index) => (
+            <a
+              key={member.slug}
+              className="cb-appcard cb-in"
+              href={familyurl(member.slug)}
+              target="_blank"
+              rel="noreferrer"
+              style={{ "--cb-dot": member.accent, "--cb-d": Math.min(index + 1, 6) } as CSSProperties}
+            >
+              <span className="cb-apphead">
+                <span className="cb-appdot" aria-hidden="true" />
+                <span className="cb-appname">{member.slug}</span>
+              </span>
+              <span className="cb-approle">{member.role}</span>
+              <span className="cb-appopen">{labelfill("apps.card.open", { slug: member.slug })}</span>
+            </a>
+          ))}
+        </div>
+      </section>
+
+      {/* the one reserved ad slot of the page: after the feed it belongs to */}
+      <AdSlot page="apps" />
+    </div>
+  );
+}
+
+export default Apps;

package/Sol/blog/blog.tsx

@@ -0,0 +1,86 @@
+/**
+ * blog page anchor — layer 3 of the anchor architecture.
+ * The file carrying the folder's own name is the path manager of the page:
+ * it imports the loose components beside it, mounts the page and re-exports
+ * the public component surface. Only the theme anchor (Sol/Sol.tsx) consumes
+ * this file.
+ *
+ * The update blog of the cobaia content site: the sorted index (the pure
+ * posts module at the app root owns the posts and the ordering) and the full
+ * bodies rendered below as real articles — the in-article surface of the
+ * site. Every post title wears the trylle display type (the clamp, the
+ * -0.02em track) so the articles open like the site hero does. The tree
+ * rule keeps this one page (no post subfolders), so every post anchors in
+ * place and the index links jump to the article.
+ */
+import type { CSSProperties } from "react";
+import { useContent } from "../../content.ts";
+import { label, labelfill } from "../../labels";
+import { type blogpost, postindex, postwords } from "../../posts";
+import { AdSlot } from "../wingets";
+
+/** the meta line of one post: the date and the honest word count. */
+function PostMeta({ post }: { post: blogpost }) {
+  return (
+    <p className="cb-postdate">
+      {labelfill("blog.post.meta", {
+        date: post.date,
+        words: String(postwords(post)),
+        tags: post.tags.join(" / "),
+      })}
+    </p>
+  );
+}
+
+export function Blog() {
+  useContent();
+  const posts = postindex();
+  return (
+    <div className="cb-page">
+      <section className="cb-hero" aria-label={label("blog.aria.hero")}>
+        <p className="cb-eyebrow cb-in" style={{ "--cb-d": 0 } as CSSProperties}>
+          {label("blog.eyebrow")}
+        </p>
+        <h1 className="cb-title cb-in" style={{ "--cb-d": 1 } as CSSProperties}>
+          {label("blog.title")}
+        </h1>
+        <p className="cb-lede cb-in" style={{ "--cb-d": 2 } as CSSProperties}>
+          {label("blog.lede")}
+        </p>
+      </section>
+
+      <section className="cb-section" aria-label={label("blog.section.indexAria")}>
+        <ul className="cb-postlist">
+          {posts.map((post, index) => (
+            <li key={post.slug} className="cb-postrow cb-in" style={{ "--cb-d": index + 1 } as CSSProperties}>
+              <PostMeta post={post} />
+              <a className="cb-postlink" href={`#${post.slug}`}>
+                {post.title}
+              </a>
+              <p className="cb-postexcerpt">{post.excerpt}</p>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <section className="cb-section" aria-label={label("blog.section.fullAria")}>
+        {posts.map((post) => (
+          <article key={post.slug} id={post.slug} className="cb-article" aria-label={post.title}>
+            <h2 className="cb-posttitle">{post.title}</h2>
+            <PostMeta post={post} />
+            <div className="cb-articlebody">
+              {post.body.map((paragraph) => (
+                <p key={paragraph}>{paragraph}</p>
+              ))}
+            </div>
+          </article>
+        ))}
+      </section>
+
+      {/* the one reserved ad slot of the page, after the articles */}
+      <AdSlot page="blog" />
+    </div>
+  );
+}
+
+export default Blog;

package/Sol/home/home.tsx

@@ -0,0 +1,140 @@
+/**
+ * home page anchor — layer 3 of the anchor architecture.
+ * The file carrying the folder's own name is the path manager of the page:
+ * it imports the loose components beside it, mounts the page and re-exports
+ * the public component surface. Only the theme anchor (Sol/Sol.tsx) consumes
+ * this file.
+ *
+ * The landing of the cobaia content site: what the devthink family is, said
+ * directly — ten deployable applications on one engine, shipped as static
+ * sites, tracked nowhere. Left-aligned hero (no centered hero + pill), the
+ * three how-it-works steps on hairline seams (01 engine · 02 static · 03
+ * honest), a four-card preview of the directory leading to /apps, the
+ * support strip, and the one reserved ad slot at the end of the content.
+ * No entry gate and no first-run flow: cobaia is a content site — the home
+ * renders directly, every page is public.
+ * Styled entirely by Sol/sol.css.
+ */
+import type { CSSProperties } from "react";
+import { Link } from "wouter";
+import { useContent } from "../../content.ts";
+import { familyurl } from "../../familyurl";
+import { type LabelKey, label, labelfill } from "../../labels";
+import { roster } from "../../roster.ts";
+import { AdSlot, BrandMark } from "../wingets";
+
+/** the featured deploy units of the landing preview (the full directory
+ * lives on /apps): the OS, the engine, the store and one studio — read
+ * from the one roster table so the preview can never drift from /apps. */
+const FEATUREDSLUGS: readonly string[] = ["devthink", "saddle", "vault", "cadria"];
+/** the featured rows answer the accessor at render time (the content
+ * lane law): the seed answers the first paint and the useContent mount
+ * refreshes the derivation when the live rows land. */
+const featured = () => roster().filter((member) => FEATUREDSLUGS.includes(member.slug));
+
+/** the three steps of the landing: what the family is made of — the text
+ * rides the label accessor (the store keeps the sentence). */
+const STEPS: readonly { n: LabelKey; title: LabelKey; text: LabelKey }[] = [
+  { n: "home.steps.engine.n", title: "home.steps.engine.title", text: "home.steps.engine.text" },
+  { n: "home.steps.static.n", title: "home.steps.static.title", text: "home.steps.static.text" },
+  { n: "home.steps.honest.n", title: "home.steps.honest.title", text: "home.steps.honest.text" },
+];
+
+export function Home() {
+  useContent();
+  return (
+    <div className="cb-page">
+      {/* the hero: the family said plainly */}
+      <section className="cb-hero" aria-label={label("home.aria.hero")}>
+        <div className="cb-in" style={{ "--cb-d": 0 } as CSSProperties}>
+          <BrandMark size={52} />
+        </div>
+        <p className="cb-eyebrow cb-in" style={{ "--cb-d": 1 } as CSSProperties}>
+          {label("home.eyebrow")}
+        </p>
+        <h1 className="cb-title cb-in" style={{ "--cb-d": 2 } as CSSProperties}>
+          {label("home.title")}
+        </h1>
+        <p className="cb-lede cb-in" style={{ "--cb-d": 3 } as CSSProperties}>
+          {label("home.lede")}
+        </p>
+        <div className="cb-btnrow cb-in" style={{ "--cb-d": 4 } as CSSProperties}>
+          <Link className="cb-btn" href="/pricing">
+            {label("home.action.pricing")}
+          </Link>
+          <Link className="cb-btn cb-btn--ghost" href="/apps">
+            {label("home.action.apps")}
+          </Link>
+        </div>
+      </section>
+
+      {/* the three steps, on hairline seams */}
+      <section className="cb-section" aria-label={label("home.section.stepsAria")}>
+        <div className="cb-secthead cb-in" style={{ "--cb-d": 0 } as CSSProperties}>
+          <h2 className="cb-secttitle">{label("home.section.stepsTitle")}</h2>
+          <p className="cb-sectlede">{label("home.section.stepsLede")}</p>
+        </div>
+        <div className="cb-grid cb-grid--3">
+          {STEPS.map((step, index) => (
+            <div key={step.n} className="cb-card cb-in" style={{ "--cb-d": index + 1 } as CSSProperties}>
+              <p className="cb-cardmeta">{label(step.n)}</p>
+              <h3 className="cb-cardtitle">{label(step.title)}</h3>
+              <p className="cb-cardtext">{label(step.text)}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* the directory preview: four of the ten, the rest on /apps */}
+      <section className="cb-section" aria-label={label("home.section.previewAria")}>
+        <div className="cb-secthead cb-in" style={{ "--cb-d": 0 } as CSSProperties}>
+          <h2 className="cb-secttitle">{label("home.section.previewTitle")}</h2>
+          <p className="cb-sectlede">
+            {label("home.section.previewLede")}{" "}
+            <Link className="cb-link" href="/apps">
+              {label("home.section.previewLink")}
+            </Link>
+            {label("home.section.previewTail")}
+          </p>
+        </div>
+        <div className="cb-appgrid">
+          {featured().map((app, index) => (
+            <a
+              key={app.slug}
+              className="cb-appcard cb-in"
+              href={familyurl(app.slug)}
+              target="_blank"
+              rel="noreferrer"
+              style={{ "--cb-dot": app.accent, "--cb-d": index + 1 } as CSSProperties}
+            >
+              <span className="cb-apphead">
+                <span className="cb-appdot" aria-hidden="true" />
+                <span className="cb-appname">{app.slug}</span>
+              </span>
+              <span className="cb-approle">{app.role}</span>
+              <span className="cb-appopen">{labelfill("home.appcard.open", { slug: app.slug })}</span>
+            </a>
+          ))}
+        </div>
+      </section>
+
+      {/* the support strip: the honest ask */}
+      <section className="cb-section" aria-label={label("home.section.supportAria")}>
+        <div className="cb-secthead cb-in" style={{ "--cb-d": 0 } as CSSProperties}>
+          <h2 className="cb-secttitle">{label("home.section.supportTitle")}</h2>
+          <p className="cb-sectlede">{label("home.section.supportLede")}</p>
+        </div>
+        <div className="cb-btnrow cb-in" style={{ "--cb-d": 1 } as CSSProperties}>
+          <Link className="cb-btn cb-btn--ghost" href="/support">
+            {label("home.action.support")}
+          </Link>
+        </div>
+      </section>
+
+      {/* the one reserved ad slot of the page, at the end of the content */}
+      <AdSlot page="home" />
+    </div>
+  );
+}
+
+export default Home;

package/Sol/intro/intro.tsx

@@ -0,0 +1,187 @@
+/**
+ * intro page anchor — layer 3 of the anchor architecture. The file carrying
+ * the folder's own name is the path manager of the page: it imports the
+ * loose components beside it, mounts the page and re-exports the public
+ * component surface. Only the theme anchor (Sol/Sol.tsx) consumes this file.
+ *
+ * The PRESENTATION page of cobaia — the family grammar's last seat (every
+ * app of the family carries one): the page mounts BARE at /intro, no window
+ * chrome, riding the site voice, not the frame. The akash splash opens over
+ * the landing (the mark spring on the overshoot curve, the name rise, the
+ * role fade; click/tap/key skip; reduced motion never plays; the no storage
+ * law holds — no seen flag, the splash plays per visit and writes nothing),
+ * then the landing answers: the hero says what the surface is (the
+ * monetization face kept apart so the main sites stay clean), the plans
+ * zone renders the real offer from the one checkoutlinks table (the not
+ * configured state stays honest), the doors panes open the app directory
+ * and the legal page, and the footer carries the doors (the site row, the
+ * family row, the legal line). The entrance rides the cb-in stagger under
+ * the second, the layers ride the surface-ladder bands, the door panes ride
+ * the silk law. Public-site rules: zero network calls from the page itself,
+ * React state only; zero decorative dots; zero invented numbers and zero
+ * fake testimonials — the real offer, read from the data modules.
+ */
+
+import type { CSSProperties } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { Link } from "wouter";
+import { label } from "../../labels";
+import { BrandMark, IntroFooter, IntroPlans, IntroSplash } from "../wingets";
+
+/** the lifecycle of the opening act: resolving (the motion preference
+ * decides) → playing (the akash floor over the landing) → done (the
+ * landing alone). No seen state is consulted — the no storage law. */
+type SplashPhase = "resolving" | "playing" | "done";
+
+/** the door glyph of the panes: the inline 10×10 chevron the chrome's
+ * caption grammar draws (the app carries no icon dependency). */
+function DoorGlyph() {
+  return (
+    <svg
+      className="cb-intropane__glyph"
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M3 0l5 5-5 5" fill="none" stroke="currentColor" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+/**
+ * The intro page: the splash plays over the landing, then the bare
+ * presentation answers — hero, plans, doors, footer.
+ *
+ * @returns the intro element (null while the motion preference decides).
+ */
+export function Intro() {
+  const [splash, setSplash] = useState<SplashPhase>("resolving");
+
+  // the splash decision rides the motion preference alone — nothing is read
+  // from the visitor machine and nothing is written back (the no storage law)
+  useEffect(() => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setSplash("done");
+      return;
+    }
+    setSplash("playing");
+  }, []);
+
+  /** the slide completed: the splash unmounts, the landing owns the page. */
+  const onSplashDone = useCallback(() => {
+    setSplash("done");
+  }, []);
+
+  /** the quiet cue: walks the page to the plans band. */
+  const cuePlans = useCallback(() => {
+    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    document.getElementById("intro-plans")?.scrollIntoView({ behavior: reduced ? "auto" : "smooth", block: "start" });
+  }, []);
+
+  // the phase decision holds the paint: nothing renders while it resolves —
+  // no flash of the landing under a splash that will never play
+  if (splash === "resolving") return null;
+
+  return (
+    <div className="cb-intro" data-page="intro">
+      {/* the skip link rides outside no frame — the bare page answers the
+       * viewport directly; the splash sits above it while it plays */}
+      <a className="cb-skip" href="#intro-content">
+        {label("shell.skip")}
+      </a>
+
+      {/* the akash floor: the opening act rides over the landing until its
+       * slide completes; reduced motion never mounts it */}
+      {splash === "playing" && <IntroSplash onDone={onSplashDone} />}
+
+      {/* the intro bar: the wordmark and the two quiet doors — the ONE
+       * primary cta lives in the hero */}
+      <header className="cb-introbar">
+        <div className="cb-introbar__in">
+          <span className="cb-introbar__brand">
+            <BrandMark size={20} />
+            <span className="cb-introbar__word">{label("shell.name")}</span>
+          </span>
+          <span className="cb-introbar__spacer" />
+          <nav className="cb-introbar__nav" aria-label={label("intro.bar.aria")}>
+            <Link className="cb-introdoor" href="/apps">
+              {label("shell.foot.apps")}
+            </Link>
+            <Link className="cb-introdoor" href="/pricing">
+              {label("shell.foot.pricing")}
+            </Link>
+          </nav>
+        </div>
+      </header>
+
+      <main id="intro-content">
+        {/* the hero: what the surface is, said directly */}
+        <section className="cb-introhero" aria-label={label("intro.aria.page")}>
+          <div className="cb-introwrap">
+            <span className="cb-introhero__mark cb-in" style={{ "--cb-d": 0 } as CSSProperties} aria-hidden="true">
+              <BrandMark size={64} />
+            </span>
+            <p className="cb-eyebrow cb-in" style={{ "--cb-d": 1 } as CSSProperties}>
+              {label("intro.hero.eyebrow")}
+            </p>
+            <h1 className="cb-title cb-in" style={{ "--cb-d": 2 } as CSSProperties}>
+              {label("intro.hero.title")}
+            </h1>
+            <p className="cb-lede cb-in" style={{ "--cb-d": 3 } as CSSProperties}>
+              {label("intro.hero.lede")}
+            </p>
+            <div className="cb-btnrow cb-in" style={{ "--cb-d": 4 } as CSSProperties}>
+              <Link className="cb-btn" href="/">
+                {label("intro.hero.cta")}
+              </Link>
+              <button type="button" className="cb-btn cb-btn--ghost" onClick={cuePlans}>
+                {label("intro.hero.cue")}
+              </button>
+            </div>
+            <p className="cb-note cb-in" style={{ "--cb-d": 5 } as CSSProperties}>
+              {label("intro.hero.note")}
+            </p>
+          </div>
+        </section>
+
+        {/* the plans as they really are (the one checkoutlinks table) */}
+        <IntroPlans />
+
+        {/* the doors: the app directory and the legal page, on silk panes */}
+        <section className="cb-introband cb-introband--deep" aria-label={label("intro.doors.aria")}>
+          <div className="cb-introwrap">
+            <div className="cb-secthead cb-in" style={{ "--cb-d": 0 } as CSSProperties}>
+              <p className="cb-eyebrow">{label("intro.doors.eyebrow")}</p>
+              <h2 className="cb-secttitle">{label("intro.doors.title")}</h2>
+            </div>
+            <div className="cb-introdoorgrid">
+              <article className="cb-intropane cb-in" style={{ "--cb-d": 1 } as CSSProperties}>
+                <p className="cb-cardmeta">{label("intro.doors.apps")}</p>
+                <p className="cb-intropane__text">{label("intro.doors.appsText")}</p>
+                <Link className="cb-intropane__door" href="/apps">
+                  {label("intro.doors.appsCta")}
+                  <DoorGlyph />
+                </Link>
+              </article>
+              <article className="cb-intropane cb-in" style={{ "--cb-d": 2 } as CSSProperties}>
+                <p className="cb-cardmeta">{label("intro.doors.legal")}</p>
+                <p className="cb-intropane__text">{label("intro.doors.legalText")}</p>
+                <Link className="cb-intropane__door" href="/legal">
+                  {label("intro.doors.legalCta")}
+                  <DoorGlyph />
+                </Link>
+              </article>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      {/* the footer carries the doors: the site row, the family row, the line */}
+      <IntroFooter />
+    </div>
+  );
+}
+
+export default Intro;