{"$schema":"https://ui.artbloom.tech/schema/registry-item.json","name":"endpoint","type":"registry:page","title":"Endpoint","description":"A developer API-first code hero: a syntax-highlighted request block, an SDK tab switcher (Node/Python/Ruby/curl) that height-animates between snippets, a streaming JSON response terminal, a copy-to-checkmark morph and count-up reliability stats. No image assets; reduced-motion respected.","author":"@artbloom","dependencies":[],"registryDependencies":[],"files":[{"path":"app/endpoint/page.tsx","target":"app/endpoint/page.tsx","content":"\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\n\n/**\n * Endpoint — an API-first developer landing page where the code IS the marketing.\n *\n * Deliberate against the usual tells: the base is a true deep blue-black (not a\n * brown-tinted fake black), there is exactly ONE blue accent, and monospace is used\n * only where there is actual code, terminal, or API surface — never as decorative\n * chrome on prose labels. No tracked all-caps eyebrows, no middle-dot metas, no\n * em-dash fragment labels, no arrow-suffixed links, no glassmorphism. The one bold\n * move is the live multi-SDK code hero with a streaming HTTP response; the rest is\n * quiet. All motion is real, and every bit of it is gated on prefers-reduced-motion.\n *\n * Syntax highlighting is hand-tokenised: each snippet is an array of lines, each line\n * an array of [text, class] tokens. Nothing is parsed at runtime and no code sample\n * lives inside the CSS template literal.\n */\n\ntype Tok = [string, string]\ntype Line = Tok[]\n\nconst SDK_TABS: { id: string; label: string; lines: Line[] }[] = [\n {\n id: \"node\",\n label: \"Node\",\n lines: [\n [[\"import\", \"k\"], [\" { Endpoint } \", \"\"], [\"from\", \"k\"], [\" \", \"\"], [\"\\\"endpoint\\\"\", \"s\"], [\";\", \"o\"]],\n [],\n [[\"const\", \"k\"], [\" endpoint \", \"\"], [\"=\", \"o\"], [\" \", \"\"], [\"new\", \"k\"], [\" \", \"\"], [\"Endpoint\", \"f\"], [\"(\", \"\"], [\"process\", \"\"], [\".\", \"o\"], [\"env\", \"\"], [\".\", \"o\"], [\"EP_KEY\", \"y\"], [\")\", \"\"], [\";\", \"o\"]],\n [],\n [[\"const\", \"k\"], [\" { id } \", \"\"], [\"=\", \"o\"], [\" \", \"\"], [\"await\", \"k\"], [\" endpoint\", \"\"], [\".\", \"o\"], [\"emails\", \"\"], [\".\", \"o\"], [\"send\", \"f\"], [\"({\", \"\"]],\n [[\" from\", \"y\"], [\": \", \"o\"], [\"\\\"ci@acme.dev\\\"\", \"s\"], [\",\", \"o\"]],\n [[\" to\", \"y\"], [\": \", \"o\"], [\"\\\"dev@example.com\\\"\", \"s\"], [\",\", \"o\"]],\n [[\" subject\", \"y\"], [\": \", \"o\"], [\"\\\"Your build passed\\\"\", \"s\"], [\",\", \"o\"]],\n [[\" html\", \"y\"], [\": \", \"o\"], [\"\\\"All 214 checks green.\\\"\", \"s\"], [\",\", \"o\"]],\n [[\"});\", \"o\"]],\n ],\n },\n {\n id: \"python\",\n label: \"Python\",\n lines: [\n [[\"import\", \"k\"], [\" endpoint\", \"\"]],\n [],\n [[\"client \", \"\"], [\"=\", \"o\"], [\" endpoint\", \"\"], [\".\", \"o\"], [\"Client\", \"f\"], [\"(os\", \"\"], [\".\", \"o\"], [\"environ\", \"\"], [\"[\", \"\"], [\"\\\"EP_KEY\\\"\", \"s\"], [\"])\", \"\"]],\n [],\n [[\"email \", \"\"], [\"=\", \"o\"], [\" client\", \"\"], [\".\", \"o\"], [\"emails\", \"\"], [\".\", \"o\"], [\"send\", \"f\"], [\"(\", \"\"]],\n [[\" from_\", \"y\"], [\"=\", \"o\"], [\"\\\"ci@acme.dev\\\"\", \"s\"], [\",\", \"o\"]],\n [[\" to\", \"y\"], [\"=\", \"o\"], [\"\\\"dev@example.com\\\"\", \"s\"], [\",\", \"o\"]],\n [[\" subject\", \"y\"], [\"=\", \"o\"], [\"\\\"Your build passed\\\"\", \"s\"], [\",\", \"o\"]],\n [[\" html\", \"y\"], [\"=\", \"o\"], [\"\\\"All 214 checks green.\\\"\", \"s\"], [\",\", \"o\"]],\n [[\")\", \"\"]],\n ],\n },\n {\n id: \"ruby\",\n label: \"Ruby\",\n lines: [\n [[\"require\", \"k\"], [\" \", \"\"], [\"\\\"endpoint\\\"\", \"s\"]],\n [],\n [[\"client \", \"\"], [\"=\", \"o\"], [\" Endpoint\", \"f\"], [\"::\", \"o\"], [\"Client\", \"\"], [\".\", \"o\"], [\"new\", \"f\"], [\"(ENV\", \"\"], [\"[\", \"\"], [\"\\\"EP_KEY\\\"\", \"s\"], [\"])\", \"\"]],\n [],\n [[\"email \", \"\"], [\"=\", \"o\"], [\" client\", \"\"], [\".\", \"o\"], [\"emails\", \"\"], [\".\", \"o\"], [\"send\", \"f\"], [\"(\", \"\"]],\n [[\" from\", \"y\"], [\": \", \"o\"], [\"\\\"ci@acme.dev\\\"\", \"s\"], [\",\", \"o\"]],\n [[\" to\", \"y\"], [\": \", \"o\"], [\"\\\"dev@example.com\\\"\", \"s\"], [\",\", \"o\"]],\n [[\" subject\", \"y\"], [\": \", \"o\"], [\"\\\"Your build passed\\\"\", \"s\"], [\",\", \"o\"]],\n [[\" html\", \"y\"], [\": \", \"o\"], [\"\\\"All 214 checks green.\\\"\", \"s\"]],\n [[\")\", \"\"]],\n ],\n },\n {\n id: \"curl\",\n label: \"curl\",\n lines: [\n [[\"curl\", \"f\"], [\" https://api.endpoint.dev/v1/emails \", \"\"], [\"\\\\\", \"o\"]],\n [[\" -H\", \"y\"], [\" \", \"\"], [\"\\\"Authorization: Bearer $EP_KEY\\\"\", \"s\"], [\" \", \"\"], [\"\\\\\", \"o\"]],\n [[\" -H\", \"y\"], [\" \", \"\"], [\"\\\"Content-Type: application/json\\\"\", \"s\"], [\" \", \"\"], [\"\\\\\", \"o\"]],\n [[\" -d\", \"y\"], [\" \", \"\"], [\"'{\", \"s\"]],\n [[\" \", \"\"], [\"\\\"from\\\"\", \"y\"], [\": \", \"o\"], [\"\\\"ci@acme.dev\\\"\", \"s\"], [\",\", \"o\"]],\n [[\" \", \"\"], [\"\\\"to\\\"\", \"y\"], [\": \", \"o\"], [\"\\\"dev@example.com\\\"\", \"s\"], [\",\", \"o\"]],\n [[\" \", \"\"], [\"\\\"subject\\\"\", \"y\"], [\": \", \"o\"], [\"\\\"Your build passed\\\"\", \"s\"]],\n [[\" }'\", \"s\"]],\n ],\n },\n]\n\nconst RESPONSE_LINES: Line[] = [\n [[\"$\", \"o\"], [\" \", \"\"], [\"endpoint\", \"f\"], [\" emails send \", \"\"], [\"--to\", \"y\"], [\" dev@example.com\", \"\"]],\n [],\n [[\"<\", \"o\"], [\" HTTP/2 \", \"\"], [\"200\", \"n\"], [\" OK\", \"\"]],\n [[\"<\", \"o\"], [\" x-request-id: \", \"\"], [\"req_5b1e9c2a\", \"s\"]],\n [],\n [[\"{\", \"o\"]],\n [[\" \", \"\"], [\"\\\"id\\\"\", \"y\"], [\": \", \"o\"], [\"\\\"em_9f2c4a7d\\\"\", \"s\"], [\",\", \"o\"]],\n [[\" \", \"\"], [\"\\\"object\\\"\", \"y\"], [\": \", \"o\"], [\"\\\"email\\\"\", \"s\"], [\",\", \"o\"]],\n [[\" \", \"\"], [\"\\\"status\\\"\", \"y\"], [\": \", \"o\"], [\"\\\"delivered\\\"\", \"s\"], [\",\", \"o\"]],\n [[\" \", \"\"], [\"\\\"to\\\"\", \"y\"], [\": \", \"o\"], [\"\\\"dev@example.com\\\"\", \"s\"], [\",\", \"o\"]],\n [[\" \", \"\"], [\"\\\"created_at\\\"\", \"y\"], [\": \", \"o\"], [\"\\\"2026-09-20T18:04:11Z\\\"\", \"s\"], [\",\", \"o\"]],\n [[\" \", \"\"], [\"\\\"latency_ms\\\"\", \"y\"], [\": \", \"o\"], [\"38\", \"n\"]],\n [[\"}\", \"o\"]],\n]\n\nconst CAPS = [\n {\n title: \"Idempotency, on by default\",\n body: \"Every write takes an idempotency key. Retry a timed-out request as many times as you like — it resolves to one send, never two.\",\n stat: \"0\",\n statSuffix: \"\",\n proof: \"duplicate sends across 2.1B messages\",\n by: \"Groundwork\",\n },\n {\n title: \"Webhooks that survive\",\n body: \"Signed events, exponential backoff for three days, and one-click replay from the dashboard. Your consumer can go down without losing a thing.\",\n stat: \"99.998\",\n statSuffix: \"%\",\n proof: \"webhook delivery over 90 days\",\n by: \"Cadence\",\n },\n {\n title: \"A sandbox that mirrors prod\",\n body: \"Test keys, seeded data, and the same latency profile as live. What passes in test behaves identically the moment you flip to production.\",\n stat: \"2\",\n statSuffix: \" days\",\n proof: \"from first call to shipped, not two sprints\",\n by: \"Northwind\",\n },\n {\n title: \"Logs you can actually read\",\n body: \"Thirty days of full request and response bodies, a copyable curl to reproduce any call, and latency traces down to the millisecond.\",\n stat: \"74\",\n statSuffix: \"%\",\n proof: \"drop in mean time to debug\",\n by: \"Fathom\",\n },\n]\n\nconst STATS = [\n { value: 99.99, decimals: 2, suffix: \"%\", label: \"API uptime\", sub: \"trailing twelve months\" },\n { value: 40, decimals: 0, suffix: \"ms\", label: \"Median latency\", sub: \"p50, every region\" },\n { value: 8, decimals: 1, suffix: \"B\", label: \"Requests / month\", sub: \"and climbing\" },\n { value: 19, decimals: 0, suffix: \"\", label: \"Edge regions\", sub: \"on six continents\" },\n]\n\nconst SHIPPED = [\n { name: \"Batch send\", body: \"Queue up to 100 messages in a single idempotent call.\", ver: \"v2.6.0\", date: \"Sep 2026\" },\n { name: \"Inbound parsing\", body: \"Route replies straight to a webhook as structured JSON.\", ver: \"v2.5.0\", date: \"Aug 2026\" },\n { name: \"EU data residency\", body: \"Pin storage and processing to eu-central-1.\", ver: \"v2.4.0\", date: \"Jul 2026\" },\n { name: \"Scheduled sends\", body: \"Send at a future timestamp, cancellable to the minute.\", ver: \"v2.3.0\", date: \"Jun 2026\" },\n { name: \"Suppression lists\", body: \"Programmatic bounce and complaint handling.\", ver: \"v2.2.0\", date: \"May 2026\" },\n { name: \"Typed async SDKs\", body: \"Fully typed clients for Node, Python 3.13, and Go.\", ver: \"v2.1.0\", date: \"Apr 2026\" },\n]\n\nconst TIERS = [\n {\n name: \"Free\",\n price: \"$0\",\n unit: \"forever\",\n blurb: \"Everything you need to ship a side project.\",\n features: [\"3,000 emails / month\", \"1 sending domain\", \"1-day log retention\", \"Community support\"],\n cta: \"Start building\",\n highlight: false,\n },\n {\n name: \"Pro\",\n price: \"$20\",\n unit: \"/ month\",\n blurb: \"For products in production with real traffic.\",\n features: [\"50,000 emails / month\", \"10 sending domains\", \"30-day log retention\", \"Webhooks and replay\", \"Email support\"],\n cta: \"Start free trial\",\n highlight: true,\n },\n {\n name: \"Scale\",\n price: \"Custom\",\n unit: \"\",\n blurb: \"Volume pricing, residency, and a signed SLA.\",\n features: [\"Millions of emails / month\", \"Unlimited domains\", \"90-day log retention\", \"SSO and SAML\", \"99.99% uptime SLA\", \"Priority support\"],\n cta: \"Talk to us\",\n highlight: false,\n },\n]\n\n/** Reveal a node once when it scrolls into view. Reduced-motion shows instantly. */\nfunction useReveal() {\n const ref = useRef(null)\n const [shown, setShown] = useState(false)\n useEffect(() => {\n const node = ref.current\n if (!node) return\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n setShown(true)\n return\n }\n const io = new IntersectionObserver(\n ([e]) => {\n if (e.isIntersecting) {\n setShown(true)\n io.disconnect()\n }\n },\n { threshold: 0.25 },\n )\n io.observe(node)\n return () => io.disconnect()\n }, [])\n return [ref, shown] as const\n}\n\n/** Count from 0 to target with an ease-out cubic once `run` is true. */\nfunction useCountUp(target: number, run: boolean, dur = 1600) {\n const [v, setV] = useState(0)\n useEffect(() => {\n if (!run) return\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n setV(target)\n return\n }\n let raf = 0\n const t0 = performance.now()\n const tick = (now: number) => {\n const p = Math.min(1, (now - t0) / dur)\n const e = 1 - Math.pow(1 - p, 3)\n setV(target * e)\n if (p < 1) raf = requestAnimationFrame(tick)\n }\n raf = requestAnimationFrame(tick)\n return () => cancelAnimationFrame(raf)\n }, [target, run, dur])\n return v\n}\n\n/** Render a tokenised snippet. Empty arrays become a non-breaking space to hold height. */\nfunction Code({ lines }: { lines: Line[] }) {\n return (\n <>\n {lines.map((line, i) => (\n \n {line.length === 0\n ? \" \"\n : line.map((tok, j) => (\n \n {tok[0]}\n \n ))}\n \n ))}\n \n )\n}\n\nconst plain = (lines: Line[]) => lines.map((l) => l.map((t) => t[0]).join(\"\")).join(\"\\n\")\n\n/** Copy-to-clipboard whose clipboard icon morphs into a checkmark on success. */\nfunction CopyButton({ text, label = \"Copy\" }: { text: string; label?: string }) {\n const [done, setDone] = useState(false)\n const copy = async () => {\n try {\n await navigator.clipboard.writeText(text)\n } catch {\n /* clipboard may be unavailable; the morph still confirms intent */\n }\n setDone(true)\n window.setTimeout(() => setDone(false), 1600)\n }\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction Stat({ s }: { s: (typeof STATS)[number] }) {\n const [ref, shown] = useReveal()\n const v = useCountUp(s.value, shown)\n return (\n
\n
\n {v.toFixed(s.decimals)}\n {s.suffix}\n
\n
{s.label}
\n
{s.sub}
\n
\n )\n}\n\nexport default function Endpoint() {\n const [reduced, setReduced] = useState(false)\n const [active, setActive] = useState(SDK_TABS[0].id)\n const [bodyH, setBodyH] = useState(undefined)\n const panelRefs = useRef>({})\n\n useEffect(() => {\n const mq = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n setReduced(mq.matches)\n const onMq = () => setReduced(mq.matches)\n mq.addEventListener(\"change\", onMq)\n return () => mq.removeEventListener(\"change\", onMq)\n }, [])\n\n // Measure the active SDK panel so the card can height-animate between snippets.\n useEffect(() => {\n const measure = () => {\n const el = panelRefs.current[active]\n if (el) setBodyH(el.offsetHeight)\n }\n measure()\n const t = window.setTimeout(measure, 60)\n window.addEventListener(\"resize\", measure)\n return () => {\n clearTimeout(t)\n window.removeEventListener(\"resize\", measure)\n }\n }, [active])\n\n // Stream the HTTP response line by line, then pause and loop.\n const [respRef, respShown] = useReveal()\n const [visible, setVisible] = useState(0)\n useEffect(() => {\n if (!respShown) return\n if (reduced) {\n setVisible(RESPONSE_LINES.length)\n return\n }\n let timer = 0\n let i = 0\n setVisible(0)\n const step = () => {\n i += 1\n setVisible(i)\n if (i < RESPONSE_LINES.length) {\n timer = window.setTimeout(step, 165)\n } else {\n timer = window.setTimeout(() => {\n i = 0\n setVisible(0)\n timer = window.setTimeout(step, 150)\n }, 2600)\n }\n }\n timer = window.setTimeout(step, 420)\n return () => clearTimeout(timer)\n }, [respShown, reduced])\n\n const activeTab = SDK_TABS.find((t) => t.id === active) ?? SDK_TABS[0]\n\n return (\n
\n \n\n
\n \n \n \n \n \n \n Endpoint\n \n \n
\n\n {/* HERO — capability statement + copyable install, paired with the live SDK card */}\n
\n
\n
\n
\n

The email API for developers

\n

\n Send email with\n
\n one API call.\n

\n

\n A single, well-typed request from the SDK you already use. Delivery, retries, and\n logs are handled. You write the call and move on.\n

\n
\n \n Read the docs\n \n
\n \n $\n \n npm install endpoint\n \n
\n
\n

No credit card. 3,000 emails a month on the free tier.

\n
\n\n {/* Live code card: multi-language SDK switcher with height-animated cross-fade */}\n
\n
\n
\n {SDK_TABS.map((t) => (\n setActive(t.id)}\n >\n {t.label}\n \n ))}\n
\n \n
\n
\n {SDK_TABS.map((t) => (\n {\n panelRefs.current[t.id] = el\n }}\n className={`ep-panel ${active === t.id ? \"is-active\" : \"\"}`}\n aria-hidden={active !== t.id}\n >\n \n \n \n \n ))}\n
\n
\n \n POST /v1/emails\n \n returns in ~38ms\n
\n
\n
\n
\n\n {/* RESPONSE — paired terminal that streams the JSON back line by line */}\n
\n
\n

And this comes back

\n

Every call is a clean round trip.

\n

\n One request, one predictable JSON body, one request id you can grep for in the logs.\n No polling, no guessing what state the send is in.\n

\n
\n
\n
\n \n \n 200 OK\n \n 38 ms\n
\n 
\n            \n              {RESPONSE_LINES.map((line, i) => (\n                \n                  {line.length === 0 ? (\n                    \" \"\n                  ) : (\n                    <>\n                      {line.map((tok, j) => (\n                        \n                          {tok[0]}\n                        \n                      ))}\n                      {!reduced && i === visible - 1 && visible < RESPONSE_LINES.length && (\n                        \n                      )}\n                    \n                  )}\n                \n              ))}\n            \n
\n
\n
\n\n {/* CAPABILITIES — each block pinned to an inline customer proof stat */}\n
\n
\n

Built for the boring parts

\n

The reliability work, already done.

\n

\n The things you would otherwise build twice and still get wrong — retries, signatures,\n a sandbox that tells the truth — are the product.\n

\n
\n
\n {CAPS.map((c) => (\n
\n

{c.title}

\n

{c.body}

\n
\n \n {c.stat}\n {c.statSuffix}\n \n \n {c.proof}\n {c.by}\n \n
\n
\n ))}\n
\n
\n\n {/* STATS BAND — counts up on reveal */}\n
\n
\n {STATS.map((s) => (\n \n ))}\n
\n
\n\n {/* RECENTLY SHIPPED — version tags + dates */}\n
\n
\n

Recently shipped

\n

We ship primitives, not press releases.

\n
\n
\n {SHIPPED.map((s) => (\n
\n
\n {s.ver}\n {s.date}\n
\n

{s.name}

\n

{s.body}

\n
\n ))}\n
\n
\n\n {/* PRICING — three tiers, generous free tier, one highlighted */}\n
\n
\n

Pricing

\n

Free until it's real. Fair after.

\n

\n No per-seat fees, no charge for teammates, no surprise overage bill. You pay for the\n email you send, and the first few thousand are on us.\n

\n
\n
\n {TIERS.map((t) => (\n
\n {t.highlight && Most popular}\n

{t.name}

\n
\n {t.price}\n {t.unit && {t.unit}}\n
\n

{t.blurb}

\n
    \n {t.features.map((f) => (\n
  • \n \n \n \n {f}\n
    • \n ))}\n
\n \n {t.cta}\n \n
\n ))}\n
\n
\n\n {/* DOCS-FORWARD FINAL CTA + GitHub */}\n
\n
\n
\n

The docs are the demo.

\n

\n Every endpoint has a runnable example in four languages and a copyable curl. Read for\n ten minutes, ship before lunch.\n

\n \n
\n \n $\n \n npm install endpoint\n \n
\n
\n
\n\n \n
\n )\n}\n\nconst css = `\n.endpoint-root {\n --ep-base: #10131c;\n --ep-base-2: #0b0e16;\n --ep-panel: #171b26;\n --ep-panel-2: #12151f;\n --ep-frost: #e9eef7;\n --ep-code: #cdd6e6;\n --ep-mute: #96a0b5;\n --ep-faint: #626d84;\n --ep-accent: #4f8ff7;\n --ep-accent-hi: #7cb0ff;\n --ep-line: rgba(148, 163, 184, 0.14);\n --ep-line-2: rgba(148, 163, 184, 0.08);\n --sx-key: #ff8b7e;\n --sx-str: #8fdf9f;\n --sx-num: #f2b366;\n --sx-com: #69748a;\n --sx-fn: #c9a3ff;\n --sx-prop: #7cc4ff;\n --sx-op: #9aa6bd;\n background: var(--ep-base);\n color: var(--ep-frost);\n font-family: var(--font-geist), system-ui, sans-serif;\n -webkit-font-smoothing: antialiased;\n line-height: 1.6;\n overflow-x: hidden;\n}\n.endpoint-root *,\n.endpoint-root *::before,\n.endpoint-root *::after { box-sizing: border-box; }\n.endpoint-root ::selection { background: rgba(79, 143, 247, 0.28); }\n\n/* shared type */\n.ep-kicker {\n color: var(--ep-accent);\n font-size: 0.92rem;\n font-weight: 500;\n margin: 0 0 1rem;\n}\n.ep-h2 {\n font-size: clamp(1.9rem, 4vw, 3rem);\n font-weight: 600;\n line-height: 1.05;\n letter-spacing: -0.025em;\n margin: 0 0 1rem;\n}\n.ep-section-lede {\n color: var(--ep-mute);\n font-size: clamp(1.02rem, 1.4vw, 1.18rem);\n max-width: 40rem;\n margin: 0;\n}\n\n/* code token colours (only ever inside code) */\n.ep-t-k { color: var(--sx-key); }\n.ep-t-s { color: var(--sx-str); }\n.ep-t-n { color: var(--sx-num); }\n.ep-t-c { color: var(--sx-com); }\n.ep-t-f { color: var(--sx-fn); }\n.ep-t-y { color: var(--sx-prop); }\n.ep-t-o { color: var(--sx-op); }\n.ep-line { display: block; }\n\n/* NAV */\n.ep-nav {\n position: sticky; top: 0; z-index: 50;\n display: flex; align-items: center; justify-content: space-between;\n padding: 1rem clamp(1.25rem, 4vw, 3.5rem);\n background: rgba(16, 19, 28, 0.82);\n border-bottom: 1px solid var(--ep-line-2);\n}\n.ep-mark {\n display: inline-flex; align-items: center; gap: 0.6rem;\n color: var(--ep-frost); text-decoration: none;\n font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em;\n}\n.ep-mark-ico { width: 22px; height: 22px; color: var(--ep-accent); }\n.ep-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }\n.ep-links a { color: var(--ep-mute); text-decoration: none; font-size: 0.95rem; transition: color 0.25s; }\n.ep-links a:hover { color: var(--ep-frost); }\n.ep-nav-cta {\n color: var(--ep-frost) !important;\n border: 1px solid var(--ep-line);\n border-radius: 8px;\n padding: 0.45rem 0.95rem;\n transition: border-color 0.25s, background 0.25s;\n}\n.ep-nav-cta:hover { border-color: var(--ep-accent); background: rgba(79, 143, 247, 0.1); }\n@media (max-width: 720px) { .ep-links a:not(.ep-nav-cta) { display: none; } }\n\n/* BUTTONS */\n.ep-btn {\n display: inline-flex; align-items: center; justify-content: center;\n font-weight: 600; font-size: 1rem; text-decoration: none;\n padding: 0.85rem 1.4rem; border-radius: 10px;\n transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s, background 0.25s, border-color 0.25s;\n}\n.ep-btn-primary { background: var(--ep-accent); color: #06101f; }\n.ep-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(79, 143, 247, 0.7); }\n\n/* HERO */\n.ep-hero { position: relative; padding: clamp(3rem, 7vw, 6.5rem) clamp(1.25rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }\n.ep-hero-glow {\n position: absolute; top: -22%; right: -8%; width: 60rem; height: 40rem; pointer-events: none;\n background: radial-gradient(circle at 60% 40%, rgba(79, 143, 247, 0.22), transparent 62%);\n}\n.ep-hero-grid {\n position: relative; display: grid; grid-template-columns: 1fr 1.04fr;\n gap: clamp(2rem, 5vw, 4.5rem); align-items: center;\n max-width: 78rem; margin: 0 auto;\n}\n.ep-hero-copy { max-width: 34rem; }\n.ep-title {\n font-size: clamp(2.6rem, 6vw, 4.6rem);\n font-weight: 620;\n line-height: 1.0;\n letter-spacing: -0.035em;\n margin: 0 0 1.4rem;\n}\n.ep-lede { color: var(--ep-mute); font-size: clamp(1.06rem, 1.5vw, 1.25rem); margin: 0 0 2rem; }\n.ep-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }\n.ep-npm {\n display: inline-flex; align-items: center; gap: 0.65rem;\n background: var(--ep-panel-2); border: 1px solid var(--ep-line);\n border-radius: 10px; padding: 0.55rem 0.6rem 0.55rem 0.95rem;\n}\n.ep-npm-prompt { color: var(--ep-accent); font-family: var(--font-geist-mono), monospace; font-weight: 700; }\n.ep-npm-cmd { font-family: var(--font-geist-mono), monospace; font-size: 0.95rem; color: var(--ep-frost); }\n.ep-hero-note { color: var(--ep-faint); font-size: 0.9rem; margin: 1.3rem 0 0; }\n\n/* COPY BUTTON with morphing icon */\n.ep-copy {\n position: relative; width: 34px; height: 34px; flex: none;\n display: inline-grid; place-items: center;\n background: transparent; border: 1px solid var(--ep-line); border-radius: 8px;\n color: var(--ep-mute); cursor: pointer; padding: 0;\n transition: color 0.25s, border-color 0.25s, background 0.25s;\n}\n.ep-copy:hover { color: var(--ep-frost); border-color: var(--ep-accent); background: rgba(79, 143, 247, 0.08); }\n.ep-copy.is-done { color: var(--sx-str); border-color: rgba(143, 223, 159, 0.5); }\n.ep-ico { grid-area: 1 / 1; width: 17px; height: 17px; transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }\n.ep-ico-copy { opacity: 1; transform: scale(1) rotate(0deg); }\n.ep-ico-check { opacity: 0; transform: scale(0.5) rotate(-25deg); }\n.ep-copy.is-done .ep-ico-copy { opacity: 0; transform: scale(0.5) rotate(25deg); }\n.ep-copy.is-done .ep-ico-check { opacity: 1; transform: scale(1) rotate(0deg); }\n\n/* CODE CARD */\n.ep-card {\n background: var(--ep-panel);\n border: 1px solid var(--ep-line);\n border-radius: 14px;\n box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;\n overflow: hidden;\n}\n.ep-card-bar {\n display: flex; align-items: center; justify-content: space-between;\n padding: 0.55rem 0.7rem 0.55rem 0.85rem;\n border-bottom: 1px solid var(--ep-line-2);\n background: var(--ep-panel-2);\n}\n.ep-tabs { display: flex; gap: 0.15rem; }\n.ep-tab {\n position: relative;\n font-family: var(--font-geist-mono), monospace;\n font-size: 0.85rem; color: var(--ep-mute);\n background: transparent; border: 0; cursor: pointer;\n padding: 0.4rem 0.7rem; border-radius: 6px;\n transition: color 0.25s, background 0.25s;\n}\n.ep-tab:hover { color: var(--ep-frost); }\n.ep-tab.is-active { color: var(--ep-frost); background: rgba(79, 143, 247, 0.12); }\n.ep-tab.is-active::after {\n content: \"\"; position: absolute; left: 0.7rem; right: 0.7rem; bottom: -0.56rem; height: 2px;\n background: var(--ep-accent);\n}\n.ep-card-body { position: relative; min-height: 17rem; transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1); }\n.ep-panel {\n position: absolute; inset: 0; margin: 0;\n padding: 1.2rem 1.35rem;\n font-family: var(--font-geist-mono), monospace;\n font-size: 0.86rem; line-height: 1.72; color: var(--ep-code);\n white-space: pre; overflow-x: auto;\n opacity: 0; transform: translateY(8px); pointer-events: none;\n transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.ep-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }\n.ep-card-foot {\n display: flex; align-items: center; gap: 0.5rem;\n padding: 0.7rem 1.1rem; border-top: 1px solid var(--ep-line-2);\n font-family: var(--font-geist-mono), monospace; font-size: 0.8rem; color: var(--ep-mute);\n background: var(--ep-panel-2);\n}\n.ep-card-foot-spacer { flex: 1; }\n.ep-card-foot-mut { color: var(--ep-faint); }\n.ep-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ep-accent); }\n\n/* RESPONSE / TERMINAL */\n.ep-resp-sec {\n display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem);\n align-items: center;\n max-width: 78rem; margin: 0 auto;\n padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 5rem);\n border-top: 1px solid var(--ep-line-2);\n}\n.ep-resp-head { max-width: 30rem; }\n.ep-term {\n background: var(--ep-panel); border: 1px solid var(--ep-line); border-radius: 14px;\n overflow: hidden; box-shadow: 0 40px 90px -55px rgba(0, 0, 0, 0.9);\n}\n.ep-term-bar {\n display: flex; align-items: center; justify-content: space-between;\n padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--ep-line-2); background: var(--ep-panel-2);\n}\n.ep-status {\n display: inline-flex; align-items: center; gap: 0.5rem;\n font-family: var(--font-geist-mono), monospace; font-size: 0.82rem; color: var(--sx-str);\n}\n.ep-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sx-str); box-shadow: 0 0 0 3px rgba(143, 223, 159, 0.16); }\n.ep-term-latency { font-family: var(--font-geist-mono), monospace; font-size: 0.82rem; color: var(--ep-mute); }\n.ep-term-body {\n margin: 0; padding: 1.2rem 1.4rem 1.5rem;\n font-family: var(--font-geist-mono), monospace;\n font-size: 0.87rem; line-height: 1.8; color: var(--ep-code);\n white-space: pre; overflow-x: auto; min-height: 20rem;\n}\n.ep-rline {\n display: block; opacity: 0; transform: translateY(3px);\n transition: opacity 0.3s ease, transform 0.3s ease;\n}\n.ep-rline.is-in { opacity: 1; transform: none; }\n.ep-caret {\n display: inline-block; width: 0.5rem; height: 1.02em; margin-left: 0.15rem;\n background: var(--ep-accent); vertical-align: text-bottom;\n animation: epblink 1s steps(2, start) infinite;\n}\n@keyframes epblink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }\n\n/* CAPABILITIES */\n.ep-caps {\n max-width: 78rem; margin: 0 auto;\n padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 5rem);\n border-top: 1px solid var(--ep-line-2);\n}\n.ep-caps-head { max-width: 40rem; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }\n.ep-caps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }\n.ep-cap {\n background: var(--ep-panel-2); border: 1px solid var(--ep-line);\n border-radius: 14px; padding: 1.8rem 1.9rem;\n transition: border-color 0.3s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.ep-cap:hover { border-color: rgba(79, 143, 247, 0.4); transform: translateY(-4px); }\n.ep-cap-title { font-size: 1.28rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.7rem; }\n.ep-cap-body { color: var(--ep-mute); font-size: 1rem; margin: 0 0 1.5rem; }\n.ep-cap-proof { display: flex; align-items: baseline; gap: 0.9rem; padding-top: 1.2rem; border-top: 1px solid var(--ep-line-2); }\n.ep-cap-stat {\n font-size: 1.9rem; font-weight: 650; letter-spacing: -0.03em; color: var(--ep-accent);\n font-variant-numeric: tabular-nums; line-height: 1; flex: none;\n}\n.ep-cap-proof-txt { color: var(--ep-mute); font-size: 0.9rem; line-height: 1.35; }\n.ep-cap-by { display: block; color: var(--ep-faint); font-size: 0.82rem; margin-top: 0.15rem; }\n@media (max-width: 720px) { .ep-caps-grid { grid-template-columns: 1fr; } }\n\n/* STATS BAND */\n.ep-band { background: var(--ep-base-2); border-top: 1px solid var(--ep-line-2); border-bottom: 1px solid var(--ep-line-2); }\n.ep-band-inner {\n max-width: 78rem; margin: 0 auto;\n padding: clamp(2.6rem, 5vw, 4rem) clamp(1.25rem, 5vw, 5rem);\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;\n}\n.ep-stat { text-align: left; }\n.ep-stat-num {\n font-size: clamp(2.4rem, 4.4vw, 3.4rem); font-weight: 650; letter-spacing: -0.035em;\n line-height: 1; font-variant-numeric: tabular-nums;\n}\n.ep-stat-suffix { color: var(--ep-accent); }\n.ep-stat-label { font-size: 1rem; font-weight: 500; margin-top: 0.7rem; }\n.ep-stat-sub { color: var(--ep-faint); font-size: 0.85rem; margin-top: 0.15rem; }\n@media (max-width: 720px) { .ep-band-inner { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; } }\n\n/* SHIPPED */\n.ep-shipped {\n max-width: 78rem; margin: 0 auto;\n padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 5rem);\n}\n.ep-shipped-head { max-width: 40rem; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }\n.ep-shipped-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }\n.ep-ship {\n background: var(--ep-panel-2); border: 1px solid var(--ep-line);\n border-radius: 12px; padding: 1.4rem 1.5rem;\n transition: border-color 0.3s;\n}\n.ep-ship:hover { border-color: rgba(79, 143, 247, 0.4); }\n.ep-ship-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }\n.ep-ver {\n font-family: var(--font-geist-mono), monospace; font-size: 0.78rem;\n color: var(--ep-accent-hi); background: rgba(79, 143, 247, 0.14);\n border: 1px solid rgba(79, 143, 247, 0.24); border-radius: 6px; padding: 0.16rem 0.5rem;\n}\n.ep-ship-date { color: var(--ep-faint); font-size: 0.85rem; }\n.ep-ship-name { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 0.4rem; }\n.ep-ship-body { color: var(--ep-mute); font-size: 0.94rem; margin: 0; }\n@media (max-width: 860px) { .ep-shipped-grid { grid-template-columns: repeat(2, 1fr); } }\n@media (max-width: 560px) { .ep-shipped-grid { grid-template-columns: 1fr; } }\n\n/* PRICING */\n.ep-pricing {\n max-width: 78rem; margin: 0 auto;\n padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 5rem);\n border-top: 1px solid var(--ep-line-2);\n}\n.ep-pricing-head { max-width: 40rem; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }\n.ep-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: start; }\n.ep-tier {\n position: relative; background: var(--ep-panel-2);\n border: 1px solid var(--ep-line); border-radius: 16px; padding: 2rem 1.9rem;\n display: flex; flex-direction: column; gap: 0.9rem;\n}\n.ep-tier.is-hi {\n border-color: rgba(79, 143, 247, 0.55);\n background: linear-gradient(180deg, rgba(79, 143, 247, 0.08), var(--ep-panel-2) 60%);\n box-shadow: 0 30px 70px -45px rgba(79, 143, 247, 0.6);\n}\n.ep-tier-badge {\n position: absolute; top: -0.7rem; left: 1.9rem;\n background: var(--ep-accent); color: #06101f;\n font-size: 0.75rem; font-weight: 600; padding: 0.22rem 0.65rem; border-radius: 999px;\n}\n.ep-tier-name { font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--ep-mute); }\n.ep-tier-price { display: flex; align-items: baseline; gap: 0.4rem; }\n.ep-tier-amount { font-size: 2.6rem; font-weight: 680; letter-spacing: -0.04em; line-height: 1; }\n.ep-tier-unit { color: var(--ep-faint); font-size: 0.95rem; }\n.ep-tier-blurb { color: var(--ep-mute); font-size: 0.95rem; margin: 0; min-height: 2.6em; }\n.ep-tier-feats { list-style: none; padding: 0; margin: 0.4rem 0 0.4rem; display: flex; flex-direction: column; gap: 0.7rem; }\n.ep-tier-feats li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; color: var(--ep-frost); }\n.ep-tick { width: 18px; height: 18px; flex: none; color: var(--ep-accent); margin-top: 0.1rem; }\n.ep-tier-cta { margin-top: 0.6rem; width: 100%; }\n.ep-btn-ghost { background: transparent; color: var(--ep-frost); border: 1px solid var(--ep-line); }\n.ep-btn-ghost:hover { border-color: var(--ep-accent); background: rgba(79, 143, 247, 0.08); transform: translateY(-2px); }\n@media (max-width: 860px) { .ep-tiers { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } .ep-tier-blurb { min-height: 0; } }\n\n/* FINAL CTA */\n.ep-final { position: relative; border-top: 1px solid var(--ep-line-2); overflow: hidden; }\n.ep-final-glow {\n position: absolute; inset: 0; pointer-events: none;\n background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(79, 143, 247, 0.18), transparent 70%);\n}\n.ep-final-inner {\n position: relative; max-width: 46rem; margin: 0 auto; text-align: center;\n padding: clamp(4rem, 9vw, 7rem) clamp(1.5rem, 5vw, 4rem);\n}\n.ep-final-title { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 640; letter-spacing: -0.03em; line-height: 1.04; margin: 0 0 1.1rem; }\n.ep-final-lede { color: var(--ep-mute); font-size: clamp(1.05rem, 1.5vw, 1.2rem); margin: 0 auto 2rem; max-width: 34rem; }\n.ep-final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-bottom: 1.8rem; }\n.ep-gh { display: inline-flex; align-items: center; gap: 0.55rem; }\n.ep-gh-ico { width: 19px; height: 19px; }\n.ep-final-cmd {\n display: inline-flex; align-items: center; gap: 0.65rem;\n background: var(--ep-panel-2); border: 1px solid var(--ep-line);\n border-radius: 10px; padding: 0.55rem 0.6rem 0.55rem 0.95rem;\n}\n\n/* FOOTER */\n.ep-footer { background: var(--ep-base-2); border-top: 1px solid var(--ep-line-2); }\n.ep-footer-inner {\n max-width: 78rem; margin: 0 auto;\n padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 5rem) 2.5rem;\n display: grid; grid-template-columns: 1.3fr 2fr; gap: 2.5rem;\n}\n.ep-footer-brand .ep-mark { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 1.12rem; color: var(--ep-frost); }\n.ep-footer-tag { color: var(--ep-mute); font-size: 0.95rem; margin: 0.9rem 0 0; }\n.ep-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }\n.ep-footer-col h4 { font-size: 0.9rem; font-weight: 600; color: var(--ep-frost); margin: 0 0 0.9rem; }\n.ep-footer-col a { display: block; color: var(--ep-mute); text-decoration: none; font-size: 0.92rem; margin-bottom: 0.55rem; transition: color 0.25s; }\n.ep-footer-col a:hover { color: var(--ep-frost); }\n.ep-footer-fine {\n max-width: 78rem; margin: 0 auto;\n padding: 1.4rem clamp(1.25rem, 5vw, 5rem); border-top: 1px solid var(--ep-line-2);\n display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;\n color: var(--ep-faint); font-size: 0.85rem;\n}\n@media (max-width: 720px) { .ep-footer-inner { grid-template-columns: 1fr; gap: 2rem; } }\n\n@media (max-width: 900px) {\n .ep-hero-grid { grid-template-columns: 1fr; }\n .ep-resp-sec { grid-template-columns: 1fr; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .endpoint-root * { transition: none !important; animation: none !important; }\n .ep-rline { opacity: 1; transform: none; }\n .ep-panel.is-active { opacity: 1; transform: none; }\n}\n`\n","type":"registry:page"}],"meta":{"kind":"templates","categories":["landing"],"docs":"https://ui.artbloom.tech/artbloom/templates/endpoint"}}