feat(landing): New Relic pricing guide

apps/landing/src/lib/guide-highlight.ts

@@ -1,7 +1,7 @@
 // Tiny highlighter for guide code blocks. The token classes match the colors a
 // guide uses in its diagrams (metric name, labels, value), so a block reads the
 // same way as the annotated example above it. Style the `tok-*` classes on the page.
-export type GuideLang = "exposition" | "promql" | "yaml" | "python" | "typescript" | "go" | "rust" | "java" | "csharp";
+export type GuideLang = "exposition" | "promql" | "nrql" | "yaml" | "python" | "typescript" | "go" | "rust" | "java" | "csharp";
 
 const escape = (s: string) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 const span = (cls: string, text: string) => `<span class="tok-${cls}">${escape(text)}</span>`;
@@ -45,6 +45,16 @@ const promql = (code: string) =>
         [/[a-zA-Z_:][\w:]*/y, (m) => span("name", m[0])],
     ]);
 
+// New Relic Query Language: clauses and functions as fn, event types and
+// attributes as names, quoted values as labels.
+const nrql = (code: string) =>
+    tokenize(code, [
+        [/'[^'\n]*'/y, (m) => span("labels", m[0])],
+        [/\b(?:FROM|SELECT|WHERE|FACET|SINCE|UNTIL|TIMESERIES|LIMIT|AND|OR|AS|ago|months?|days?|hours?|sum|latest|count|average|max|min|uniqueCount|rate)\b/y, (m) => span("fn", m[0])],
+        [/\b\d+(?:\.\d+)?\b/y, (m) => span("value", m[0])],
+        [/[a-zA-Z_][\w.]*/y, (m) => span("name", m[0])],
+    ]);
+
 const exposition = (code: string) =>
     code
         .split("\n")
@@ -99,4 +109,4 @@ const java = braces("import|public|static|final|class|void|new|try|throws");
 const csharp = braces("using|var|new|await");
 
 export const highlight = (code: string, lang: GuideLang) =>
-    ({ exposition, promql, yaml, python, typescript, go, rust, java, csharp })[lang](code);
+    ({ exposition, promql, nrql, yaml, python, typescript, go, rust, java, csharp })[lang](code);

apps/landing/src/pages/guides/index.astro

@@ -56,6 +56,13 @@ const coreGuides = [
         description: "The four metric types with examples, the handful worth watching, and how to collect and chart them.",
         read: "7 min",
     },
+    {
+        href: "/guides/new-relic-pricing",
+        label: "Pricing",
+        title: "New Relic pricing, explained",
+        description: "How users and gigabytes add up to a monthly bill, what the free tier covers, and what a 12-person team pays.",
+        read: "9 min",
+    },
 ];
 
 const investigationGuides = [
@@ -210,8 +217,11 @@ const itemListJsonLd = {
                             href={guide.href}
                             class:list={[
                                 "group flex min-h-[280px] flex-col bg-bg p-6 transition-colors hover:bg-bg-deep focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-ring md:p-8",
-                                // An odd count leaves a hole in the last row; the last card fills it.
-                                index === coreGuides.length - 1 && coreGuides.length % 2 === 1 && "md:col-span-2",
+                                // A short last row leaves a hole; the last card stretches to fill it at each column count.
+                                index === coreGuides.length - 1 && [
+                                    coreGuides.length % 2 === 1 && "md:col-span-2",
+                                    ["xl:col-span-1", "xl:col-span-3", "xl:col-span-2"][coreGuides.length % 3],
+                                ],
                             ]}
                         >
                             <div class="flex items-center justify-between font-mono text-[10px] uppercase tracking-[0.12em] text-fg-muted">