diff --git a/assets/style.css b/assets/style.css
index fdc52f9..94862d7 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -23,7 +23,10 @@
   font-family: var(--font-heading, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: hsl(var(--foreground));
+  /* Inherit colour from context so headings placed on an inverted band
+     (e.g. a bg-primary CTA) read as primary-foreground, not a hardcoded
+     foreground that goes dark-on-bright and fails contrast. */
+  color: inherit;
 }
 
 .terminal-mono {
@@ -428,3 +431,45 @@
   margin: 0 auto;
   font-family: var(--font-body, ui-monospace, monospace);
 }
+
+/* --- Reliable responsive grids (see manifest.yaml input_css_append:
+   the host scans rendered block HTML, not theme override templates, so
+   responsive Tailwind grid utilities in overrides are purge-fragile;
+   define multi-column layout in CSS instead). minmax(0,1fr) prevents
+   long content forcing horizontal overflow on mobile. --- */
+.tty-grid,
+.tty-grid-2,
+.tty-grid-3,
+.tty-grid-4 { display: grid; gap: 1.5rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
+@media (min-width: 640px) {
+  .tty-grid-2,
+  .tty-grid-3,
+  .tty-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (min-width: 1024px) {
+  .tty-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .tty-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+}
+.tty-grid-stats2,
+.tty-grid-stats3,
+.tty-grid-stats4 { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+@media (min-width: 768px) {
+  .tty-grid-stats3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .tty-grid-stats4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+}
+
+/* --- Two-column form grid (col-span utilities purge-fragile) --- */
+.tty-form-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.tty-form-grid > .tty-col-full { grid-column: 1 / -1; }
+@media (min-width: 640px) { .tty-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+
+/* --- Contained console shell for full-width landing pages --- */
+.tty-console-shell { width: 100%; max-width: 56rem; margin: 1.5rem auto; padding-inline: 1rem; }
+
+/* --- Hero heights (purge-fragile utilities pinned in CSS) --- */
+.tty-hero { position: relative; }
+.tty-hero-screen { min-height: 100vh; }
+.tty-hero-tall   { min-height: 75vh; }
+.tty-hero-half   { min-height: 50vh; }
+.tty-hero-auto   { min-height: 24rem; }
+.tty-hero-media  { min-height: 20rem; }
diff --git a/blocks/boot_log.ninjatpl b/blocks/boot_log.ninjatpl
index f459c4e..6f8b1d9 100644
--- a/blocks/boot_log.ninjatpl
+++ b/blocks/boot_log.ninjatpl
@@ -1 +1 @@
-{% if lines %}<div class="boot-log" data-block="terminal:boot_log">{% for line in lines %}<span class="boot-line" data-line-index="{{ forloop.Counter0 }}" style="animation-delay: {{ forloop.Counter * 80 }}ms;">[ {{ forloop.Counter0 }} ] {{ line }}</span>{% endfor %}{% set cur = cursor|default:"block" %}{% if cur != "none" %}<span class="boot-cursor">{% if cur == "underscore" %}_{% elif cur == "pipe" %}|{% else %}█{% endif %}</span>{% endif %}</div>{% endif %}
+{% if lines %}<div class="tty-console-shell"><div class="boot-log" data-block="terminal:boot_log">{% for line in lines %}<span class="boot-line" data-line-index="{{ forloop.Counter0 }}" style="animation-delay: {{ forloop.Counter * 80 }}ms;">[ {{ forloop.Counter0 }} ] {{ line }}</span>{% endfor %}{% set cur = cursor|default:"block" %}{% if cur != "none" %}<span class="boot-cursor">{% if cur == "underscore" %}_{% elif cur == "pipe" %}|{% else %}█{% endif %}</span>{% endif %}</div></div>{% endif %}
diff --git a/blocks/code_console.ninjatpl b/blocks/code_console.ninjatpl
index a42e708..99e2b7e 100644
--- a/blocks/code_console.ninjatpl
+++ b/blocks/code_console.ninjatpl
@@ -1 +1 @@
-{% if command or output %}<div class="code-console" data-block="terminal:code_console" data-language="{{ language|default:"shell" }}">{% if command %}<div class="cmd-line"><span class="cmd-prompt">{{ prompt|default:"$" }}</span><span class="cmd-text">{{ command }}</span></div>{% endif %}{% if output %}<pre>{{ output }}</pre>{% endif %}</div>{% endif %}
+{% if command or output %}<div class="tty-console-shell"><div class="code-console" data-block="terminal:code_console" data-language="{{ language|default:"shell" }}">{% if command %}<div class="cmd-line"><span class="cmd-prompt">{{ prompt|default:"$" }}</span><span class="cmd-text">{{ command }}</span></div>{% endif %}{% if output %}<pre>{{ output }}</pre>{% endif %}</div></div>{% endif %}
diff --git a/manifest.yaml b/manifest.yaml
index b0b7ddb..6fcd716 100644
--- a/manifest.yaml
+++ b/manifest.yaml
@@ -458,6 +458,58 @@ css:
     }
     @media (max-width: 768px) { .terminal-article-grid { grid-template-columns: 1fr; } }
 
+    /* --- Reliable responsive grids ----------------------------
+       The host scans rendered block HTML, not theme override
+       .ninjatpl files, so responsive Tailwind grid utilities used
+       only in overrides (lg:grid-cols-*, sm:grid-cols-2) are
+       purge-fragile and can silently collapse to one column on
+       desktop. Multi-column layout is therefore defined here as
+       plain CSS, which is compiled into the Tailwind input and can
+       never be purged. minmax(0,1fr) stops long/unbreakable content
+       from forcing horizontal overflow on mobile. */
+    .tty-grid,
+    .tty-grid-2,
+    .tty-grid-3,
+    .tty-grid-4 { display: grid; gap: 1.5rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
+    @media (min-width: 640px) {
+      .tty-grid-2,
+      .tty-grid-3,
+      .tty-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    }
+    @media (min-width: 1024px) {
+      .tty-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+      .tty-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    }
+    .tty-grid-stats2,
+    .tty-grid-stats3,
+    .tty-grid-stats4 { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    @media (min-width: 768px) {
+      .tty-grid-stats3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+      .tty-grid-stats4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    }
+
+    /* --- Two-column form grid (col-span utilities in overrides
+       are purge-fragile; pin the grid in CSS) ------------------- */
+    .tty-form-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
+    .tty-form-grid > .tty-col-full { grid-column: 1 / -1; }
+    @media (min-width: 640px) { .tty-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+
+    /* --- Contained console shell ------------------------------
+       The persona code-console / boot-log blocks ship no max-width
+       wrapper, so on a full-width landing page they run edge-to-edge
+       while the neighbouring sections are contained. This shell
+       centres them and keeps a mobile side gutter. */
+    .tty-console-shell { width: 100%; max-width: 56rem; margin: 1.5rem auto; padding-inline: 1rem; }
+
+    /* --- Hero heights (min-h-screen / arbitrary min-h-[..] are
+       purge-fragile utilities; pin them in CSS) ----------------- */
+    .tty-hero { position: relative; }
+    .tty-hero-screen { min-height: 100vh; }
+    .tty-hero-tall   { min-height: 75vh; }
+    .tty-hero-half   { min-height: 50vh; }
+    .tty-hero-auto   { min-height: 24rem; }
+    .tty-hero-media  { min-height: 20rem; }
+
     /* --- Reduced motion: kill all motion ---------------------- */
 
     @media (prefers-reduced-motion: reduce) {
diff --git a/templates/overrides/terminal/contact-card.ninjatpl b/templates/overrides/terminal/contact-card.ninjatpl
index 3cc7fa5..16f13dc 100644
--- a/templates/overrides/terminal/contact-card.ninjatpl
+++ b/templates/overrides/terminal/contact-card.ninjatpl
@@ -1,9 +1,9 @@
 {# contact-card terminal override: neon channel panels. All field reads + control flow preserved. #}
-<section class="py-16 md:py-24 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
+<section class="py-8 md:py-12 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
   <div class="mx-auto max-w-4xl px-4">
     {% if heading %}<h2 class="terminal-heading text-3xl font-semibold tracking-tight md:text-4xl" data-text="{{ heading }}">{{ heading }}</h2>{% endif %}
     {% if description %}<p class="mt-3 max-w-2xl text-lg text-muted-foreground">{{ description }}</p>{% endif %}
-    <div class="mt-10 grid grid-cols-1 gap-4 {% if columns == 3 %}sm:grid-cols-2 lg:grid-cols-3{% elif columns == 1 %}{% else %}sm:grid-cols-2{% endif %}">
+    <div class="mt-8 {% if columns == 3 %}tty-grid-3{% elif columns == 1 %}tty-grid{% else %}tty-grid-2{% endif %}">
       {% for channel in channels %}
       <div class="tty-corners flex items-start gap-4 rounded-md border border-primary/40 bg-card p-5 text-card-foreground tty-frame">
         {% if channel.icon %}<span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary"><svg class="h-5 w-5" aria-hidden="true"><use href="/icons/{{ channel.icon|split:":"|first }}.svg#{{ channel.icon|split:":"|last }}"></use></svg></span>{% endif %}
diff --git a/templates/overrides/terminal/contact-form.ninjatpl b/templates/overrides/terminal/contact-form.ninjatpl
index de44b05..5a2e0f7 100644
--- a/templates/overrides/terminal/contact-form.ninjatpl
+++ b/templates/overrides/terminal/contact-form.ninjatpl
@@ -1,6 +1,6 @@
 {# contact-form terminal override: terminal console chrome. The {% form %} block, honeypot, field loop, form.submitted/errors reads and _block_id/bid submit wiring are preserved byte-for-byte — only presentational classes change. #}
 {% with bid=_block_id|default:context.blockId %}
-<section id="contact-form-{{ bid }}" class="py-16 md:py-24 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
+<section id="contact-form-{{ bid }}" class="py-8 md:py-12 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
   <div class="mx-auto max-w-2xl px-4">
     {% if form.submitted %}
     <div class="tty-corners rounded-md border border-primary/50 bg-card p-8 text-center text-card-foreground tty-frame">
@@ -12,9 +12,9 @@
     {% if description %}<p class="mt-3 text-lg text-muted-foreground">{{ description }}</p>{% endif %}
     {% if form.errors._form %}<div class="mt-6 rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive">{{ form.errors._form }}</div>{% endif %}
     {% with formAction="/api/blocks/"|add:bid|add:"/submit" formTarget="#contact-form-"|add:bid %}
-    {% form action=formAction hx_target=formTarget hx_swap="outerHTML" class="mt-8 grid grid-cols-1 gap-5 sm:grid-cols-2" %}
+    {% form action=formAction hx_target=formTarget hx_swap="outerHTML" class="mt-8 tty-form-grid" %}
       {% for field in fields %}
-      <div class="{% if field.width == "half" %}sm:col-span-1{% else %}sm:col-span-2{% endif %}">
+      <div class="{% if field.width == "half" %}tty-col-half{% else %}tty-col-full{% endif %}">
         {% if field.label %}<label for="cf-{{ bid }}-{{ field.name }}" class="terminal-mono mb-1.5 block text-sm font-medium uppercase tracking-wide text-accent">{{ field.label }}{% if field.required %} <span class="text-destructive">*</span>{% endif %}</label>{% endif %}
         {% if field.type == "textarea" %}
         <textarea id="cf-{{ bid }}-{{ field.name }}" name="{{ field.name }}" rows="5"{% if field.required %} required{% endif %}{% if field.placeholder %} placeholder="{{ field.placeholder }}"{% endif %} class="w-full rounded-md border border-primary/40 bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"></textarea>
@@ -29,7 +29,7 @@
       </div>
       {% endfor %}
       <div class="hidden" aria-hidden="true"><label>Leave this field empty<input type="text" name="website" tabindex="-1" autocomplete="off"></label></div>
-      <div class="sm:col-span-2">
+      <div class="tty-col-full">
         <button type="submit" class="terminal-mono inline-flex items-center justify-center rounded-md bg-primary px-6 py-2.5 text-sm font-medium uppercase tracking-wider text-primary-foreground transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">{{ submitLabel|default:"Send message" }}</button>
       </div>
     {% endform %}
diff --git a/templates/overrides/terminal/cta.ninjatpl b/templates/overrides/terminal/cta.ninjatpl
index db7643b..8f1bbd2 100644
--- a/templates/overrides/terminal/cta.ninjatpl
+++ b/templates/overrides/terminal/cta.ninjatpl
@@ -1,5 +1,5 @@
 {# cta terminal override: scanline overlay, heading, CTAs. All field reads preserved. #}
-<section class="relative overflow-hidden py-16 md:py-24 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
+<section class="relative overflow-hidden py-12 md:py-20 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
   <div aria-hidden="true" class="tty-scanlines pointer-events-none absolute inset-0"></div>
   <div class="relative z-10 mx-auto max-w-6xl px-4">
     <div class="tty-corners {% if background == "band" %}rounded-md bg-primary px-6 py-14 text-center text-primary-foreground md:px-12{% elif background == "card" %}rounded-md border border-primary/50 bg-card px-6 py-14 text-center text-card-foreground tty-frame md:px-12{% else %}flex flex-col items-center gap-8 rounded-md border border-primary/30 bg-muted px-6 py-12 text-foreground md:flex-row md:justify-between md:px-12 md:text-left{% endif %}">
diff --git a/templates/overrides/terminal/feature-grid.ninjatpl b/templates/overrides/terminal/feature-grid.ninjatpl
index 638981e..2a1a60f 100644
--- a/templates/overrides/terminal/feature-grid.ninjatpl
+++ b/templates/overrides/terminal/feature-grid.ninjatpl
@@ -1,11 +1,11 @@
 {# feature_grid terminal override: scanline hero overlay, mono eyebrow, heading, neon HUD cards. All field reads + control flow preserved. #}
-<section class="relative overflow-hidden py-16 md:py-24 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
+<section class="relative overflow-hidden py-12 md:py-20 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
   <div aria-hidden="true" class="tty-scanlines pointer-events-none absolute inset-0"></div>
   <div class="relative z-10 mx-auto max-w-6xl px-4">
     {% if eyebrow %}<p class="terminal-mono text-center text-xs font-semibold uppercase tracking-widest text-accent">{{ eyebrow }}</p>{% endif %}
     {% if heading %}<h2 class="terminal-heading mt-2 text-center text-3xl font-semibold tracking-tight md:text-4xl" data-text="{{ heading }}">{{ heading }}</h2>{% endif %}
     {% if intro %}<p class="mx-auto mt-4 max-w-2xl text-center text-lg text-muted-foreground">{{ intro }}</p>{% endif %}
-    <div class="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 {% if columns == 2 %}lg:grid-cols-2{% elif columns == 4 %}lg:grid-cols-4{% else %}lg:grid-cols-3{% endif %}">
+    <div class="mt-10 tty-grid-{% if columns == 2 %}2{% elif columns == 4 %}4{% else %}3{% endif %}">
       {% for item in items %}
       <div class="{% if layout == "card" %}tty-corners rounded-md border border-primary/40 bg-card p-6 text-card-foreground tty-frame transition-transform hover:-translate-y-0.5{% elif layout == "centered" %}text-center{% endif %}">
         {% if item.icon %}<div class="mb-4 inline-flex h-11 w-11 items-center justify-center rounded-md bg-primary/10 text-primary{% if layout == "centered" %} mx-auto{% endif %}"><svg class="h-6 w-6" aria-hidden="true"><use href="/icons/{{ item.icon|split:":"|first }}.svg#{{ item.icon|split:":"|last }}"></use></svg></div>{% endif %}
diff --git a/templates/overrides/terminal/hero.ninjatpl b/templates/overrides/terminal/hero.ninjatpl
index 7135fb1..66f81f9 100644
--- a/templates/overrides/terminal/hero.ninjatpl
+++ b/templates/overrides/terminal/hero.ninjatpl
@@ -26,13 +26,13 @@
 {% endmacro %}
 {% if variant == "split" %}
 <section class="hero grid grid-cols-1 lg:grid-cols-2 overflow-hidden bg-background text-foreground{% if class %} {{ class }}{% endif %}">
-<div class="relative min-h-[320px] bg-muted {% if mediaPosition == "left" %}order-1 lg:order-1{% else %}order-1 lg:order-2{% endif %}">{% if hasImage %}{% img backgroundImage alt=headlineText class="absolute inset-0 h-full w-full object-cover" layout="hero" %}{% else %}<div class="tty-rain-wrap"><div class="tty-rain-fallback"></div><canvas class="tty-rain-canvas" aria-hidden="true"></canvas></div>{% endif %}<div aria-hidden="true" class="tty-scanlines pointer-events-none absolute inset-0"></div></div>
+<div class="relative tty-hero-media bg-muted {% if mediaPosition == "left" %}order-1 lg:order-1{% else %}order-1 lg:order-2{% endif %}">{% if hasImage %}{% img backgroundImage alt=headlineText class="absolute inset-0 h-full w-full object-cover" layout="hero" %}{% else %}<div class="tty-rain-wrap"><div class="tty-rain-fallback"></div><canvas class="tty-rain-canvas" aria-hidden="true"></canvas></div>{% endif %}<div aria-hidden="true" class="tty-scanlines pointer-events-none absolute inset-0"></div></div>
 <div class="flex flex-col justify-center px-6 py-16 lg:px-12 {% if mediaPosition == "left" %}order-2 lg:order-2{% else %}order-2 lg:order-1{% endif %}"><div class="max-w-lg text-left">{{ herocontent("left") }}</div></div>
 </section>
 {% else %}
 {% set align = "center" %}
 {% if variant == "left-aligned" %}{% set align = "left" %}{% endif %}
-<section class="hero relative flex flex-col overflow-hidden bg-background text-foreground {% if minHeight == "screen" %}min-h-screen{% elif minHeight == "50vh" %}min-h-[50vh]{% elif minHeight == "auto" %}min-h-[400px]{% else %}min-h-[75vh]{% endif %} {% if verticalAlign == "top" %}justify-start pt-20{% elif verticalAlign == "bottom" %}justify-end pb-20{% else %}justify-center{% endif %}{% if class %} {{ class }}{% endif %}">
+<section class="hero tty-hero flex flex-col overflow-hidden bg-background text-foreground {% if minHeight == "screen" %}tty-hero-screen{% elif minHeight == "50vh" %}tty-hero-half{% elif minHeight == "auto" %}tty-hero-auto{% else %}tty-hero-tall{% endif %} {% if verticalAlign == "top" %}justify-start pt-20{% elif verticalAlign == "bottom" %}justify-end pb-20{% else %}justify-center{% endif %}{% if class %} {{ class }}{% endif %}">
 {% if hasImage %}<div class="absolute inset-0 z-0">{% img backgroundImage alt=headlineText class="h-full w-full object-cover" layout="hero" %}{% if showOverlay %}<div class="absolute inset-0 {% if overlayColor == "light" %}bg-background/60{% elif overlayColor == "primary" %}bg-primary/50{% elif overlayOpacity <= 30 %}bg-black/30{% elif overlayOpacity <= 50 %}bg-black/50{% elif overlayOpacity <= 70 %}bg-black/70{% else %}bg-black/80{% endif %}"></div>{% endif %}</div>{% else %}<div class="tty-rain-wrap z-0"><div class="tty-rain-fallback"></div><canvas class="tty-rain-canvas" aria-hidden="true"></canvas></div>{% endif %}
 <div aria-hidden="true" class="tty-scanlines pointer-events-none absolute inset-0 z-0"></div>
 <div class="relative z-10 mx-auto w-full max-w-4xl px-4 sm:px-6 lg:px-8 {% if variant == "left-aligned" %}text-left{% else %}text-center{% endif %}">{{ herocontent(align) }}</div>
diff --git a/templates/overrides/terminal/pricing.ninjatpl b/templates/overrides/terminal/pricing.ninjatpl
index 108923b..0b6eb6b 100644
--- a/templates/overrides/terminal/pricing.ninjatpl
+++ b/templates/overrides/terminal/pricing.ninjatpl
@@ -1,10 +1,10 @@
 {# pricing terminal override: scanline overlay, heading, HUD neon tier panels (magenta highlight / cyan standard), CTAs. Field reads + control flow preserved. #}
-<section class="relative overflow-hidden py-16 md:py-24 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
+<section class="relative overflow-hidden py-12 md:py-20 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
   <div aria-hidden="true" class="tty-scanlines pointer-events-none absolute inset-0"></div>
   <div class="relative z-10 mx-auto max-w-6xl px-4">
     {% if heading %}<h2 class="terminal-heading text-center text-3xl font-semibold tracking-tight md:text-4xl" data-text="{{ heading }}">{{ heading }}</h2>{% endif %}
     {% if intro %}<p class="mx-auto mt-4 max-w-2xl text-center text-lg text-muted-foreground">{{ intro }}</p>{% endif %}
-    <div class="mt-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+    <div class="mt-10 tty-grid-3">
       {% for tier in tiers %}
       <div class="tty-corners relative flex flex-col rounded-md border p-6 {% if tier.highlighted %}border-primary bg-card text-card-foreground tty-frame ring-1 ring-primary{% else %}border-primary/40 bg-card text-card-foreground tty-frame{% endif %}">
         {% if tier.badge %}<span class="terminal-mono absolute -top-3 left-1/2 -translate-x-1/2 rounded-none bg-primary px-3 py-1 text-xs font-semibold uppercase tracking-widest text-primary-foreground">{{ tier.badge }}</span>{% endif %}
diff --git a/templates/overrides/terminal/stats.ninjatpl b/templates/overrides/terminal/stats.ninjatpl
index a7050e1..6591b88 100644
--- a/templates/overrides/terminal/stats.ninjatpl
+++ b/templates/overrides/terminal/stats.ninjatpl
@@ -1,10 +1,10 @@
 {# stats terminal override: scanline overlay, heading, HUD stat tiles, mono labels. data-stats + countUp script/attrs preserved byte-for-byte. #}
-<section class="relative overflow-hidden py-16 md:py-24 bg-background text-foreground{% if class %} {{ class }}{% endif %}"{% if countUp %} data-stats{% endif %}>
+<section class="relative overflow-hidden py-12 md:py-20 bg-background text-foreground{% if class %} {{ class }}{% endif %}"{% if countUp %} data-stats{% endif %}>
   <div aria-hidden="true" class="tty-scanlines pointer-events-none absolute inset-0"></div>
   <div class="relative z-10 mx-auto max-w-6xl px-4">
     {% if heading %}<h2 class="terminal-heading text-center text-3xl font-semibold tracking-tight md:text-4xl" data-text="{{ heading }}">{{ heading }}</h2>{% endif %}
     {% if intro %}<p class="mx-auto mt-4 max-w-2xl text-center text-lg text-muted-foreground">{{ intro }}</p>{% endif %}
-    <dl class="mt-12 grid grid-cols-2 gap-8 {% if columns == 2 %}md:grid-cols-2{% elif columns == 3 %}md:grid-cols-3{% else %}md:grid-cols-4{% endif %}">
+    <dl class="mt-10 tty-grid-stats{% if columns == 2 %}2{% elif columns == 3 %}3{% else %}4{% endif %}">
       {% for item in items %}
       <div class="tty-corners text-center">
         <dd class="terminal-heading text-4xl font-bold tracking-tight md:text-5xl" style="font-family:var(--font-heading)">{% if item.prefix %}{{ item.prefix }}{% endif %}<span{% if countUp %} data-countup-value="{{ item.value }}"{% endif %}>{{ item.value }}</span>{% if item.suffix %}{{ item.suffix }}{% endif %}</dd>