diff --git a/mkdocs/assets/stylesheets/cloudscape-docs.css b/mkdocs/assets/stylesheets/cloudscape-docs.css
index 3f4105ad1a..1513f3f434 100644
--- a/mkdocs/assets/stylesheets/cloudscape-docs.css
+++ b/mkdocs/assets/stylesheets/cloudscape-docs.css
@@ -141,6 +141,13 @@
     }
 }
 
+/* Both button groups share the header center; clear landing.css's legacy top padding. */
+.md-header__inner .cs-products-menu,
+.md-header__inner .md-header__buttons {
+    align-self: center;
+    padding-block: 0;
+}
+
 .md-header__buttons .md-button {
     margin-top: 0;
     margin-bottom: 0;
@@ -171,6 +178,7 @@
 
 /* Header action buttons → /old pills. Prefixed with the primary color attr to
    out-specify landing.css's button rules. */
+.cs-products-menu__trigger,
 [data-md-color-primary=white] .md-header__buttons .md-button--primary,
 [data-md-color-primary=white] .md-header__buttons .md-button--primary:hover {
     box-sizing: border-box;
@@ -239,6 +247,9 @@
 
 /* Products menu matches website/src/styles.css. */
 .cs-products-menu {
+    --products-arrow-gap: 10px;
+    --cs-hover: rgba(22, 25, 31, 0.03);
+    --products-focus-color: #006ce0;
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -246,28 +257,54 @@
     font-size: 16px;
     line-height: 1.15;
 }
+[data-md-color-scheme="slate"] .cs-products-menu {
+    --cs-hover: rgba(242, 243, 243, 0.05);
+    --products-focus-color: #42b4ff;
+}
 .cs-products-menu__trigger {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    min-height: 42px;
-    padding: 10px 0;
-    border: 0;
-    border-radius: 21px;
+    position: relative;
+    gap: var(--products-arrow-gap);
+    padding-inline: 18px var(--products-arrow-gap);
+    border: 1px solid var(--cs-border);
     background: transparent;
     color: var(--cs-text);
-    font: inherit;
-    font-weight: 700;
+    font-family: inherit;
+    letter-spacing: 0.005em;
     cursor: pointer;
 }
-.cs-products-menu__trigger:hover {
-    text-decoration: underline;
-    text-underline-offset: 0.2em;
+.cs-products-menu__trigger:hover,
+.cs-products-menu__trigger:active {
+    background: var(--cs-hover);
+}
+.cs-products-menu__trigger:focus {
+    outline: none;
 }
+/* Match the secondary Cloudscape button's keyboard-focus ring. */
 .cs-products-menu__trigger:focus-visible {
-    background: var(--cs-panel);
+    outline: 2px dotted transparent;
+    outline-offset: 3px;
+}
+.cs-products-menu__trigger:focus-visible::before {
+    content: '';
+    position: absolute;
+    inset-inline-start: -4px;
+    inset-block-start: -4px;
+    inline-size: calc(100% + 8px);
+    block-size: calc(100% + 8px);
+    border-radius: 4px;
+    box-shadow: 0 0 0 2px var(--products-focus-color);
+    pointer-events: none;
+}
+.cs-products-menu__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 12px;
+    height: 12px;
+    flex: 0 0 auto;
 }
 .cs-products-menu__caret {
+    display: block;
     width: 12px;
     height: 12px;
     transition: transform 0.15s ease;
@@ -276,6 +313,7 @@
     transform: rotate(180deg);
 }
 .cs-products-menu__popup {
+    box-sizing: border-box;
     display: none;
     position: absolute;
     top: calc(100% + 6px);
@@ -283,11 +321,16 @@
     z-index: 1000;
     width: 360px;
     background: var(--cs-panel);
+    border: 1px solid var(--cs-border);
     border-radius: 8px;
+    overflow: hidden;
 }
 .cs-products-menu--open .cs-products-menu__popup {
     display: block;
 }
+.cs-products-menu__popup .gs-rail {
+    border-radius: 7px;
+}
 .cs-products-menu__popup .gs-opt + .gs-rail__group {
     margin-top: 0;
 }
@@ -334,6 +377,10 @@
     background: var(--cs-bg);
     box-shadow: inset 0 0 0 0.5px var(--cs-text);
 }
+.cs-products-menu__popup .gs-opt:hover,
+.cs-products-menu__popup .gs-opt:focus-visible {
+    box-shadow: none;
+}
 .gs-opt--feat {
     padding: 13px 14px;
     gap: 14px;
diff --git a/mkdocs/overrides/header-2.html b/mkdocs/overrides/header-2.html
index 5b3183284a..341e28f10c 100644
--- a/mkdocs/overrides/header-2.html
+++ b/mkdocs/overrides/header-2.html
@@ -76,14 +76,16 @@
 
     {# Keep menu descriptions in sync with SiteNavigation.tsx. GetStartedSection.tsx uses a longer dstack description. #}
     <div class="cs-products-menu">
-      <button type="button" class="cs-products-menu__trigger" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="cs-products-menu__trigger" id="cs-products-trigger" aria-haspopup="menu" aria-expanded="false" aria-controls="cs-products-popup">
         Products
-        <svg class="cs-products-menu__caret" viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6.5 8 10.5 12 6.5"/></svg>
+        <span class="cs-products-menu__icon">
+          <svg class="cs-products-menu__caret" viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6.5 8 10.5 12 6.5"/></svg>
+        </span>
       </button>
-      <div class="cs-products-menu__popup" role="menu">
+      <div class="cs-products-menu__popup" id="cs-products-popup" role="menu" aria-labelledby="cs-products-trigger">
         <div class="gs-rail">
           <div class="gs-rail__group">Self-hosted</div>
-          <a class="gs-opt gs-opt--feat" role="menuitem" href="/docs/installation">
+          <a class="gs-opt gs-opt--feat" role="menuitem" tabindex="-1" href="/docs/installation">
             <span class="gs-opt__ic" aria-hidden="true">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>
             </span>
@@ -92,7 +94,7 @@
               <span class="gs-opt__desc">A unified orchestration interface across GPU clouds, Kubernetes, VMs, and bare-metal.</span>
             </span>
           </a>
-          <a class="gs-opt gs-opt--row external-skip" role="menuitem" href="/products/factory" target="_blank" rel="noreferrer">
+          <a class="gs-opt gs-opt--row external-skip" role="menuitem" tabindex="-1" href="/products/factory" target="_blank" rel="noreferrer">
             <span class="gs-opt__ic" aria-hidden="true">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></svg>
             </span>
@@ -102,7 +104,7 @@
             </span>
           </a>
           <div class="gs-rail__group">Hosted by us</div>
-          <a class="gs-opt gs-opt--row" role="menuitem" href="/products/sky" target="_blank" rel="noreferrer">
+          <a class="gs-opt gs-opt--row" role="menuitem" tabindex="-1" href="/products/sky" target="_blank" rel="noreferrer">
             <span class="gs-opt__ic" aria-hidden="true">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg>
             </span>
@@ -152,32 +154,62 @@
         var productsMenu = document.querySelector('.cs-products-menu');
         var productsTrigger = productsMenu && productsMenu.querySelector('.cs-products-menu__trigger');
         if (productsTrigger) {
-          var closeTimer;
+          var productsItems = Array.from(productsMenu.querySelectorAll('[role="menuitem"]'));
           var setProductsOpen = function (open) {
-            clearTimeout(closeTimer);
             productsMenu.classList.toggle('cs-products-menu--open', open);
             productsTrigger.setAttribute('aria-expanded', String(open));
           };
-          productsMenu.addEventListener('mouseenter', function () { setProductsOpen(true); });
-          productsMenu.addEventListener('mouseleave', function () {
-            closeTimer = setTimeout(function () {
-              if (!productsMenu.querySelector(':focus-visible')) setProductsOpen(false);
-            }, 150);
+          var focusProduct = function (index) {
+            productsItems.forEach(function (item, itemIndex) {
+              item.tabIndex = itemIndex === index ? 0 : -1;
+            });
+            productsItems[index].focus();
+          };
+          productsTrigger.addEventListener('click', function () {
+            var open = productsTrigger.getAttribute('aria-expanded') !== 'true';
+            setProductsOpen(open);
+            if (open) focusProduct(0);
+            else productsTrigger.focus();
+          });
+          productsMenu.addEventListener('keydown', function (e) {
+            var open = productsTrigger.getAttribute('aria-expanded') === 'true';
+            if (e.target === productsTrigger && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+              e.preventDefault();
+              setProductsOpen(true);
+              focusProduct(e.key === 'ArrowUp' ? productsItems.length - 1 : 0);
+              return;
+            }
+            if (!open) return;
+            if (e.key === 'Escape') {
+              e.preventDefault();
+              e.stopPropagation();
+              setProductsOpen(false);
+              productsTrigger.focus();
+              return;
+            }
+            var index = productsItems.indexOf(document.activeElement);
+            var nextIndex;
+            if (e.key === 'ArrowDown') nextIndex = (index + 1) % productsItems.length;
+            else if (e.key === 'ArrowUp') nextIndex = index < 0 ? productsItems.length - 1 : (index + productsItems.length - 1) % productsItems.length;
+            else if (e.key === 'Home') nextIndex = 0;
+            else if (e.key === 'End') nextIndex = productsItems.length - 1;
+            else return;
+            e.preventDefault();
+            focusProduct(nextIndex);
+          });
+          productsItems.forEach(function (item) {
+            item.addEventListener('click', function () {
+              setProductsOpen(false);
+              productsTrigger.focus();
+            });
           });
-          productsMenu.addEventListener('focusin', function () { setProductsOpen(true); });
           productsMenu.addEventListener('focusout', function (e) {
             if (!productsMenu.contains(e.relatedTarget)) setProductsOpen(false);
           });
-          productsTrigger.addEventListener('click', function () { setProductsOpen(true); });
-          document.addEventListener('click', function (e) {
+          document.addEventListener('pointerdown', function (e) {
             if (!productsMenu.contains(e.target)) setProductsOpen(false);
           });
-          document.addEventListener('keydown', function (e) {
-            if (e.key === 'Escape') {
-              if (productsMenu.contains(document.activeElement)) productsTrigger.focus();
-              setProductsOpen(false);
-            }
-          });
+          window.addEventListener('blur', function () { setProductsOpen(false); });
         }
       })();
     </script>
diff --git a/mkdocs/overrides/partials/tx-footer.html b/mkdocs/overrides/partials/tx-footer.html
index 10ba98e335..c80b1317b4 100644
--- a/mkdocs/overrides/partials/tx-footer.html
+++ b/mkdocs/overrides/partials/tx-footer.html
@@ -38,7 +38,7 @@
         <div class="tx-footer__section">
           <div class="tx-footer__section-title">Company</div>
           <a href="/blog" class="tx-footer__section-link">Blog</a>
-          <a href="https://calendly.com/dstackai/discovery-call" target="_blank" class="tx-footer__section-link external">Talk to us</a>
+          <a href="https://calendly.com/dstackai/discovery-call" target="_blank" class="tx-footer__section-link external">Book a demo</a>
           <a href="/terms" class="tx-footer__section-link">Terms of service</a>
           <a href="/privacy" class="tx-footer__section-link">Privacy policy</a>
         </div>
diff --git a/website/src/cloudscape-overrides.css b/website/src/cloudscape-overrides.css
index 7a66906e2d..5d803d5ef9 100644
--- a/website/src/cloudscape-overrides.css
+++ b/website/src/cloudscape-overrides.css
@@ -145,8 +145,19 @@ body {
   padding: 0 !important;
 }
 
-/* 11) Thin (0.5px) dividers between stacked FAQ items. The block's outer corners
-       are clipped to 12px by .faq-list; these are the internal separators. */
+/* 11) The FAQ wrapper owns the outer frame. Remove each stacked container's frame
+       and shadow, then draw only the separators between questions. */
+.faq-list > .faq-item {
+  border: 0 !important;
+  border-radius: 0 !important;
+}
+.faq-list > .faq-item::before,
+.faq-list > .faq-item::after {
+  display: none !important;
+}
+.faq-list > .faq-item + .faq-item {
+  border-block-start: 0.5px solid var(--cs-border) !important;
+}
 .faq-list * {
   --border-divider-section-width-uwo8my: 0.5px;
 }
diff --git a/website/src/components/Capabilities.tsx b/website/src/components/Capabilities.tsx
index 280ee1d74c..5133c2d4cf 100644
--- a/website/src/components/Capabilities.tsx
+++ b/website/src/components/Capabilities.tsx
@@ -2,18 +2,29 @@ import { ReactNode } from 'react';
 import { asset } from '../asset';
 
 // Icon, title, and description rows shared by the landing and product pages.
-export function CapList({ items }: { items: { icon: ReactNode; title: string; sub: string }[] }) {
+export function CapList({ items }: { items: { icon: ReactNode; title: string; sub: string; href?: string }[] }) {
   return (
     <ul className="gs-caps">
-      {items.map(cap => (
-        <li key={cap.title} className="gs-cap">
-          <span className="gs-cap__ic">{cap.icon}</span>
-          <span className="gs-cap__b">
-            <span className="gs-cap__t">{cap.title}</span>
-            <span className="gs-cap__s">{cap.sub}</span>
-          </span>
-        </li>
-      ))}
+      {items.map(cap => {
+        const content = (
+          <>
+            <span className="gs-cap__ic">{cap.icon}</span>
+            <span className="gs-cap__b">
+              <span className="gs-cap__t">{cap.title}</span>
+              <span className="gs-cap__s">{cap.sub}</span>
+            </span>
+          </>
+        );
+        return (
+          <li key={cap.title}>
+            {cap.href ? (
+              <a className="gs-cap" href={cap.href}>{content}</a>
+            ) : (
+              <div className="gs-cap">{content}</div>
+            )}
+          </li>
+        );
+      })}
     </ul>
   );
 }
diff --git a/website/src/components/ComputeSourcesTabs.tsx b/website/src/components/ComputeSourcesTabs.tsx
index 41b1fd7b11..cd87b2c4a3 100644
--- a/website/src/components/ComputeSourcesTabs.tsx
+++ b/website/src/components/ComputeSourcesTabs.tsx
@@ -1,16 +1,36 @@
 import { CapList, CloudGlyph, KubernetesGlyph, ServerGlyph, SlurmGlyph } from './Capabilities';
 import { ContentTabs } from './ContentTabs';
+import { ViewDocsButton } from './ViewDocsButton';
+import { docsUrl } from '../routes';
 
 const cloudGroups = [
-  ['AWS', 'GCP', 'Azure', 'OCI', 'DigitalOcean', 'Vultr'],
-  ['Nebius', 'Crusoe', 'Lambda', 'Verda', 'Runpod'],
-  ['AMD Dev Cloud', 'Hot Aisle', 'Vast.ai', 'JarvisLabs'],
+  [
+    { name: 'AWS', anchor: 'aws' },
+    { name: 'GCP', anchor: 'gcp' },
+    { name: 'Azure', anchor: 'azure' },
+    { name: 'OCI', anchor: 'oci' },
+    { name: 'DigitalOcean', anchor: 'digital-ocean' },
+    { name: 'Vultr', anchor: 'vultr' },
+  ],
+  [
+    { name: 'Nebius', anchor: 'nebius' },
+    { name: 'Crusoe', anchor: 'crusoe' },
+    { name: 'Lambda', anchor: 'lambda' },
+    { name: 'Verda', anchor: 'verda' },
+    { name: 'Runpod', anchor: 'runpod' },
+  ],
+  [
+    { name: 'AMD Dev Cloud', anchor: 'amd-developer-cloud' },
+    { name: 'Hot Aisle', anchor: 'hot-aisle' },
+    { name: 'Vast.ai', anchor: 'vastai' },
+    { name: 'JarvisLabs', anchor: 'jarvislabs' },
+  ],
 ];
 
 const onPremItems = [
-  { icon: <ServerGlyph />, title: 'SSH fleets', sub: 'Connect VMs or bare-metal clusters over SSH' },
-  { icon: <KubernetesGlyph />, title: 'Kubernetes', sub: 'Connect your existing Kubernetes clusters' },
-  { icon: <SlurmGlyph />, title: 'Slurm (experimental)', sub: 'Connect your existing Slurm clusters' },
+  { icon: <ServerGlyph />, title: 'SSH fleets', sub: 'Connect VMs or bare-metal clusters over SSH', href: docsUrl('concepts/fleets/#ssh-fleets') },
+  { icon: <KubernetesGlyph />, title: 'Kubernetes', sub: 'Connect your existing Kubernetes clusters', href: docsUrl('concepts/backends/#kubernetes') },
+  { icon: <SlurmGlyph />, title: 'Slurm', sub: 'Connect your existing Slurm clusters (experimental)', href: docsUrl('concepts/backends/#slurm') },
 ];
 
 export function OnPremCapabilities() {
@@ -26,11 +46,13 @@ export function ComputeSourcesTabs({ cloudsFirst = false }: {
     content: (
       <div className="gs-cloudcols">
         {cloudGroups.map(group => (
-          <ul key={group[0]}>
+          <ul key={group[0].name}>
             {group.map(cloud => (
-              <li key={cloud} className="gs-cloud">
-                <span className="gs-li__ic"><CloudGlyph /></span>
-                <span>{cloud}</span>
+              <li key={cloud.name}>
+                <a className="gs-cloud" href={docsUrl(`concepts/backends/#${cloud.anchor}`)}>
+                  <span className="gs-li__ic"><CloudGlyph /></span>
+                  <span>{cloud.name}</span>
+                </a>
               </li>
             ))}
           </ul>
@@ -38,9 +60,12 @@ export function ComputeSourcesTabs({ cloudsFirst = false }: {
       </div>
     ),
     footer: (
-      <span className="gs-foot__note">
-        Configure credentials for your clouds to automate provisioning
-      </span>
+      <>
+        <span className="gs-foot__note">
+          Configure credentials for your clouds to automate provisioning
+        </span>
+        <ViewDocsButton href={docsUrl('concepts/backends/')} />
+      </>
     ),
   };
   const onPremTab = {
@@ -48,9 +73,12 @@ export function ComputeSourcesTabs({ cloudsFirst = false }: {
     label: 'On-prem',
     content: <OnPremCapabilities />,
     footer: (
-      <span className="gs-foot__note">
-        Use your existing Kubernetes or Slurm clusters, VMs, or bare-metal
-      </span>
+      <>
+        <span className="gs-foot__note">
+          Use your existing Kubernetes or Slurm clusters, VMs, or bare-metal
+        </span>
+        <ViewDocsButton href={docsUrl('concepts/backends/')} />
+      </>
     ),
   };
 
diff --git a/website/src/components/ConceptIcons.tsx b/website/src/components/ConceptIcons.tsx
new file mode 100644
index 0000000000..02f87d28ed
--- /dev/null
+++ b/website/src/components/ConceptIcons.tsx
@@ -0,0 +1,124 @@
+/*!
+ * Lucide icons
+ *
+ * ISC License
+ *
+ * Copyright (c) 2026 Lucide Icons and Contributors
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+ * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+ * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ */
+
+// network
+export const FleetGlyph = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <rect x="16" y="16" width="6" height="6" rx="1" />
+    <rect x="2" y="16" width="6" height="6" rx="1" />
+    <rect x="9" y="2" width="6" height="6" rx="1" />
+    <path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3" />
+    <path d="M12 12V8" />
+  </svg>
+);
+
+// workflow
+export const TaskGlyph = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <rect width="8" height="8" x="3" y="3" rx="2" />
+    <path d="M7 11v4a2 2 0 0 0 2 2h4" />
+    <rect width="8" height="8" x="13" y="13" rx="2" />
+  </svg>
+);
+
+// brain-circuit
+export const ServiceGlyph = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
+    <path d="M9 13a4.5 4.5 0 0 0 3-4" />
+    <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
+    <path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
+    <path d="M6 18a4 4 0 0 1-1.967-.516" />
+    <path d="M12 13h4" />
+    <path d="M12 18h6a2 2 0 0 1 2 2v1" />
+    <path d="M12 8h8" />
+    <path d="M16 8V5a2 2 0 0 1 2-2" />
+    <circle cx="16" cy="13" r=".5" />
+    <circle cx="18" cy="3" r=".5" />
+    <circle cx="20" cy="21" r=".5" />
+    <circle cx="20" cy="8" r=".5" />
+  </svg>
+);
+
+// globe
+export const GatewayGlyph = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+    <path d="M2 12h20" />
+  </svg>
+);
+
+// wand-sparkles
+export const PresetGlyph = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72" />
+    <path d="m14 7 3 3" />
+    <path d="M5 6v4" />
+    <path d="M19 14v4" />
+    <path d="M10 2v2" />
+    <path d="M7 8H3" />
+    <path d="M21 16h-4" />
+    <path d="M11 3H9" />
+  </svg>
+);
+
+// group
+export const ProjectGlyph = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M3 7V5c0-1.1.9-2 2-2h2" />
+    <path d="M17 3h2c1.1 0 2 .9 2 2v2" />
+    <path d="M21 17v2c0 1.1-.9 2-2 2h-2" />
+    <path d="M7 21H5c-1.1 0-2-.9-2-2v-2" />
+    <rect width="7" height="5" x="7" y="7" rx="1" />
+    <rect width="7" height="5" x="10" y="12" rx="1" />
+  </svg>
+);
+
+// wallet
+export const BillingGlyph = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1" />
+    <path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" />
+  </svg>
+);
+
+// key-round
+export const ExportGlyph = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" />
+    <circle cx="16.5" cy="7.5" r=".5" fill="currentColor" />
+  </svg>
+);
+
+// activity
+export const MetricsGlyph = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" />
+  </svg>
+);
+
+// gauge
+export const MeteringGlyph = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="m12 14 4-4" />
+    <path d="M3.34 19a10 10 0 1 1 17.32 0" />
+  </svg>
+);
diff --git a/website/src/components/SiteFooter.tsx b/website/src/components/SiteFooter.tsx
index d66a4dcd50..ea0792b2de 100644
--- a/website/src/components/SiteFooter.tsx
+++ b/website/src/components/SiteFooter.tsx
@@ -66,7 +66,7 @@ const footerColumns: FooterColumn[] = [
     heading: 'Company',
     links: [
       { label: 'Blog', href: BLOG_URL },
-      { label: 'Get a demo', href: 'https://calendly.com/dstackai/discovery-call', external: true },
+      { label: 'Book a demo', href: 'https://calendly.com/dstackai/discovery-call', external: true },
       { label: 'Terms of service', href: TERMS_URL },
       { label: 'Privacy policy', href: PRIVACY_URL },
     ],
diff --git a/website/src/components/SiteNavigation.tsx b/website/src/components/SiteNavigation.tsx
index ceefad16ad..2649cf5d50 100644
--- a/website/src/components/SiteNavigation.tsx
+++ b/website/src/components/SiteNavigation.tsx
@@ -1,6 +1,6 @@
-import { Fragment, ReactNode, useRef, useState } from 'react';
+import { Fragment, ReactNode, useEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import Button from '@cloudscape-design/components/button';
+import Button, { ButtonProps } from '@cloudscape-design/components/button';
 import SideNavigation, { SideNavigationProps } from '@cloudscape-design/components/side-navigation';
 import SpaceBetween from '@cloudscape-design/components/space-between';
 import { menuButtonStyle } from '../cloudscape-theme';
@@ -48,7 +48,7 @@ type ProductLink = {
 };
 
 // The products. products[0] (open-source) is featured at the top of the "Products" menu; the rest
-// follow as rows. Reused by the standalone top-nav hover menu and the mobile nav's "Products"
+// follow as rows. Reused by the standalone top-nav menu and the mobile nav's "Products"
 // section.
 // Keep menu descriptions in sync with mkdocs/overrides/header-2.html.
 // GetStartedSection.tsx uses a longer dstack description.
@@ -83,45 +83,95 @@ function isProductLink(target: EventTarget | null) {
   return products.some(product => product.href === href);
 }
 
-function ProductsHoverMenu({ selectedProductId }: { selectedProductId?: string }) {
+function ProductsMenu({ selectedProductId }: { selectedProductId?: string }) {
   const [open, setOpen] = useState(false);
-  const closeTimer = useRef<number | undefined>(undefined);
-  const openMenu = () => {
-    window.clearTimeout(closeTimer.current);
-    setOpen(true);
-  };
-  const scheduleClose = (menu: HTMLDivElement) => {
-    window.clearTimeout(closeTimer.current);
-    closeTimer.current = window.setTimeout(() => {
-      if (!menu.querySelector(':focus-visible')) setOpen(false);
-    }, 150);
-  };
+  const menuRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<ButtonProps.Ref>(null);
+  const focusLastItem = useRef(false);
+
+  useEffect(() => {
+    if (!open) return;
+    const items = menuRef.current?.querySelectorAll<HTMLAnchorElement>('[role="menuitem"]');
+    items?.[focusLastItem.current ? items.length - 1 : 0]?.focus();
+    focusLastItem.current = false;
+    const closeOnOutsideClick = (event: PointerEvent) => {
+      if (!menuRef.current?.contains(event.target as Node)) setOpen(false);
+    };
+    const closeOnWindowBlur = () => setOpen(false);
+    document.addEventListener('pointerdown', closeOnOutsideClick);
+    window.addEventListener('blur', closeOnWindowBlur);
+    return () => {
+      document.removeEventListener('pointerdown', closeOnOutsideClick);
+      window.removeEventListener('blur', closeOnWindowBlur);
+    };
+  }, [open]);
 
   return (
     <div
-      className="site-hover-menu"
-      onMouseEnter={openMenu}
-      onMouseLeave={event => scheduleClose(event.currentTarget)}
-      onFocus={openMenu}
+      ref={menuRef}
+      className="site-products-dropdown"
+      data-open={open}
       onBlur={event => {
         if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
           setOpen(false);
         }
       }}
+      onKeyDown={event => {
+        if (!open) {
+          if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            focusLastItem.current = event.key === 'ArrowUp';
+            setOpen(true);
+          }
+          return;
+        }
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          event.stopPropagation();
+          setOpen(false);
+          triggerRef.current?.focus();
+          return;
+        }
+        const items = Array.from(
+          event.currentTarget.querySelectorAll<HTMLAnchorElement>('[role="menuitem"]'),
+        );
+        const index = items.indexOf(document.activeElement as HTMLAnchorElement);
+        let nextIndex: number;
+        switch (event.key) {
+          case 'ArrowDown': nextIndex = (index + 1) % items.length; break;
+          case 'ArrowUp': nextIndex = index <= 0 ? items.length - 1 : index - 1; break;
+          case 'Home': nextIndex = 0; break;
+          case 'End': nextIndex = items.length - 1; break;
+          default: return;
+        }
+        event.preventDefault();
+        items[nextIndex]?.focus();
+      }}
     >
-      <button type="button" className="site-menu-button site-hover-menu__trigger" aria-haspopup="true" aria-expanded={open}>
-        Products
-        <svg className="site-hover-menu__caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-          <path d="M4 6.5 8 10.5 12 6.5" />
-        </svg>
-      </button>
+      <Button
+        ref={triggerRef}
+        variant="normal"
+        style={{ root: { ...menuButtonStyle.root, paddingInline: '18px var(--products-arrow-gap)' } }}
+        ariaHaspopup="menu"
+        ariaExpanded={open}
+        ariaControls="site-products-menu"
+        onClick={() => setOpen(open => !open)}
+      >
+        <span className="site-products-dropdown__label">
+          Products
+          <svg className="site-products-dropdown__caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={2.4} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
+            <path d="M4 6.5 8 10.5 12 6.5" />
+          </svg>
+        </span>
+      </Button>
       {open && (
         <div className="site-products-menu">
-          <div className="gs-rail" role="menu">
+          <div className="gs-rail" id="site-products-menu" role="menu" aria-label="Products">
             <div className="gs-rail__group">Self-hosted</div>
             <a
               className={`gs-opt gs-opt--feat${selectedProductId === products[0].id ? ' gs-opt--on' : ''}`}
               role="menuitem"
+              tabIndex={-1}
               href={products[0].href}
               aria-current={selectedProductId === products[0].id ? 'page' : undefined}
               target={products[0].external ? '_blank' : undefined}
@@ -138,6 +188,7 @@ function ProductsHoverMenu({ selectedProductId }: { selectedProductId?: string }
                 {product.badge !== products[index].badge && <div className="gs-rail__group">{product.badge}</div>}
                 <a
                   role="menuitem"
+                  tabIndex={-1}
                   className={`gs-opt gs-opt--row${selectedProductId === product.id ? ' gs-opt--on' : ''}`}
                   href={product.href}
                   aria-current={selectedProductId === product.id ? 'page' : undefined}
@@ -176,7 +227,7 @@ export function SiteNavigation({
   const isFactoryPage = pathname.replace(/\/$/, '') === ROUTES.FACTORY;
   const selectedProductId = isSkyPage ? 'sky-product' : isFactoryPage ? 'factory' : undefined;
   const menuAction = isFactoryPage
-    ? { text: 'Talk to us', href: 'https://calendly.com/dstackai/discovery-call' }
+    ? { text: 'Book a demo', href: 'https://calendly.com/dstackai/discovery-call' }
     : isSkyPage
       ? { text: 'Sign in', href: 'https://sky.dstack.ai/' }
       : { text: 'GitHub', href: dstackGithubUrl };
@@ -213,8 +264,8 @@ export function SiteNavigation({
         </button>
         <nav className="site-menu" aria-label="Global">
           <SpaceBetween direction="horizontal" size="l" alignItems="center">
-            {/* Standalone "Products" hover menu — a flat list of the three products. Sits before "Docs". */}
-            <ProductsHoverMenu selectedProductId={selectedProductId} />
+            {/* Standalone "Products" menu — a flat list of the three products. Sits before "Docs". */}
+            <ProductsMenu selectedProductId={selectedProductId} />
             {audienceNavItems.map(item => (
               <a key={item.label} className="site-menu-link" href={item.href}>
                 {item.label}
diff --git a/website/src/components/ViewDocsButton.tsx b/website/src/components/ViewDocsButton.tsx
new file mode 100644
index 0000000000..9cceef7508
--- /dev/null
+++ b/website/src/components/ViewDocsButton.tsx
@@ -0,0 +1,39 @@
+import Button, { ButtonProps } from '@cloudscape-design/components/button';
+import { mainButtonStyle } from '../cloudscape-theme';
+
+const compactButtonStyle: ButtonProps.Style = {
+  root: { ...mainButtonStyle.root, paddingInline: '14px var(--cta-padding-end)' },
+};
+
+export function ViewDocsButton({ href, style = compactButtonStyle, fullWidth }: {
+  href: string;
+  style?: ButtonProps['style'];
+  fullWidth?: boolean;
+}) {
+  return (
+    <span className="cta-with-arrow">
+      <Button
+        href={href}
+        fullWidth={fullWidth}
+        style={style}
+      >
+        <span className="cta-with-arrow__label">
+          View docs
+          <svg
+            className="cta-with-arrow__icon"
+            viewBox="0 0 12 12"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={1.5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path d="M2 6h8M6 2l4 4-4 4" />
+          </svg>
+        </span>
+      </Button>
+    </span>
+  );
+}
diff --git a/website/src/pages/Factory/FactoryGetStartedTabs.tsx b/website/src/pages/Factory/FactoryGetStartedTabs.tsx
index d28b4cb957..8c9b7e6430 100644
--- a/website/src/pages/Factory/FactoryGetStartedTabs.tsx
+++ b/website/src/pages/Factory/FactoryGetStartedTabs.tsx
@@ -5,6 +5,7 @@ import {
   billingCapability,
   eventsCapability,
   exportsCapability,
+  meteringCapability,
   registryCapability,
 } from './capabilities';
 
@@ -17,19 +18,19 @@ export function FactoryGetStartedTabs({ footer }: { footer?: ReactNode }) {
         {
           id: 'resource-sharing',
           label: 'Multi-tenancy',
-          content: <CapList items={[exportsCapability, billingCapability]} />,
+          content: <CapList items={[exportsCapability, meteringCapability, billingCapability]} />,
           footer,
         },
         {
-          id: 'observability',
-          label: 'Observability',
-          content: <CapList items={[eventsCapability]} />,
+          id: 'optimized-inference',
+          label: 'Inference',
+          content: <CapList items={[registryCapability]} />,
           footer,
         },
         {
-          id: 'optimized-inference',
-          label: 'Serverless inference',
-          content: <CapList items={[registryCapability]} />,
+          id: 'observability',
+          label: 'Observability',
+          content: <CapList items={[eventsCapability]} />,
           footer,
         },
       ]}
diff --git a/website/src/pages/Factory/FactoryPage.tsx b/website/src/pages/Factory/FactoryPage.tsx
index 6d011d4434..9bf28e6cb4 100644
--- a/website/src/pages/Factory/FactoryPage.tsx
+++ b/website/src/pages/Factory/FactoryPage.tsx
@@ -126,6 +126,8 @@ export function FactoryPage() {
               ))}
             </section>
 
+            <TrustedBySection />
+
             <FaqSection
               imageFirst
               action={
@@ -137,7 +139,7 @@ export function FactoryPage() {
                   iconAlign="right"
                   style={mainButtonStyle}
                 >
-                  Talk to us
+                  Book a demo
                 </Button>
               }
               items={[
@@ -157,8 +159,6 @@ export function FactoryPage() {
               Talk to us about your infrastructure, models, and requirements for running an AI
               token factory.
             </FaqSection>
-
-            <TrustedBySection />
           </article>
         </div>
       </div>
diff --git a/website/src/pages/Factory/InferenceTabs.tsx b/website/src/pages/Factory/InferenceTabs.tsx
index 860b347255..e2114fd24f 100644
--- a/website/src/pages/Factory/InferenceTabs.tsx
+++ b/website/src/pages/Factory/InferenceTabs.tsx
@@ -5,7 +5,7 @@ import { presetsCapability, registryCapability } from './capabilities';
 export function InferenceTabs() {
   return (
     <ContentTabs
-      ariaLabel="Serverless inference"
+      ariaLabel="Inference optimization"
       className="gs-box--compute-sources"
       tabs={[
         {
diff --git a/website/src/pages/Factory/OrchestrationTabs.tsx b/website/src/pages/Factory/OrchestrationTabs.tsx
index 1cd46aeeb1..f5714bcb7f 100644
--- a/website/src/pages/Factory/OrchestrationTabs.tsx
+++ b/website/src/pages/Factory/OrchestrationTabs.tsx
@@ -1,31 +1,20 @@
-import { CapList, ServerGlyph } from '../../components/Capabilities';
+import { CapList } from '../../components/Capabilities';
+import { GatewayGlyph, ServiceGlyph, TaskGlyph } from '../../components/ConceptIcons';
 import { ContentTabs } from '../../components/ContentTabs';
 
 const orchestrationItems = [
   {
-    icon: (
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-        <rect x="2" y="4" width="20" height="16" rx="2" />
-        <path d="m6 8 4 4-4 4M14 16h4" />
-      </svg>
-    ),
+    icon: <TaskGlyph />,
     title: 'Tasks',
     sub: 'Training and other kinds of batch jobs',
   },
   {
-    icon: <ServerGlyph />,
+    icon: <ServiceGlyph />,
     title: 'Services',
     sub: 'Cache-aware and disaggregated inference',
   },
   {
-    icon: (
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-        <rect x="9" y="2" width="6" height="6" rx="1" />
-        <rect x="2" y="16" width="6" height="6" rx="1" />
-        <rect x="16" y="16" width="6" height="6" rx="1" />
-        <path d="M12 8v4M5 16v-4h14v4" />
-      </svg>
-    ),
+    icon: <GatewayGlyph />,
     title: 'Gateways',
     sub: 'HTTPS, domains, rate limits, and auto-scaling',
   },
diff --git a/website/src/pages/Factory/TenantTabs.tsx b/website/src/pages/Factory/TenantTabs.tsx
index 09d421d05c..a62e51680f 100644
--- a/website/src/pages/Factory/TenantTabs.tsx
+++ b/website/src/pages/Factory/TenantTabs.tsx
@@ -5,12 +5,12 @@ import { billingCapability, exportsCapability, projectsCapability } from './capa
 export function TenantTabs() {
   return (
     <ContentTabs
-      ariaLabel="Multi-tenancy and billing"
+      ariaLabel="Metering and billing"
       className="gs-box--compute-sources"
       tabs={[
         {
           id: 'usage-and-billing',
-          label: 'Usage and billing',
+          label: 'Metering and billing',
           content: <CapList items={[projectsCapability, exportsCapability, billingCapability]} />,
         },
       ]}
diff --git a/website/src/pages/Factory/capabilities.tsx b/website/src/pages/Factory/capabilities.tsx
index 871f2ea464..e61ce4a724 100644
--- a/website/src/pages/Factory/capabilities.tsx
+++ b/website/src/pages/Factory/capabilities.tsx
@@ -1,4 +1,5 @@
-import { BoxGlyph, LayersGlyph } from '../../components/Capabilities';
+import { LayersGlyph } from '../../components/Capabilities';
+import { BillingGlyph, ExportGlyph, MeteringGlyph, MetricsGlyph, PresetGlyph, ProjectGlyph } from '../../components/ConceptIcons';
 
 export const eventsCapability = {
   icon: (
@@ -12,52 +13,37 @@ export const eventsCapability = {
 };
 
 export const metricsCapability = {
-  icon: (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-      <path d="M3 3v18h18M7 14l4-4 4 3 6-8" />
-    </svg>
-  ),
+  icon: <MetricsGlyph />,
   title: 'Metrics',
   sub: 'Monitor utilization, accelerator health, and network health',
 };
 
 export const projectsCapability = {
-  icon: (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
-      <circle cx="9" cy="7" r="4" />
-    </svg>
-  ),
+  icon: <ProjectGlyph />,
   title: 'Projects',
   sub: 'Tenant isolation and resource access control',
 };
 
 export const exportsCapability = {
-  icon: (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-      <circle cx="18" cy="5" r="3" />
-      <circle cx="6" cy="12" r="3" />
-      <circle cx="18" cy="19" r="3" />
-      <path d="m8.59 10.49 6.82-3.98m-6.82 6.98 6.82 3.98" />
-    </svg>
-  ),
+  icon: <ExportGlyph />,
   title: 'Exports',
   sub: 'Share selected fleets and gateways across projects',
 };
 
+export const meteringCapability = {
+  icon: <MeteringGlyph />,
+  title: 'Metering',
+  sub: 'Track compute, storage, and token usage per tenant',
+};
+
 export const billingCapability = {
-  icon: (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-      <rect x="2" y="4" width="20" height="16" rx="2" />
-      <path d="M2 10h20M6 15h4" />
-    </svg>
-  ),
+  icon: <BillingGlyph />,
   title: 'Billing',
-  sub: 'Compute and token metering and billing automation',
+  sub: 'Automate customer charges, balances, and payments',
 };
 
 export const presetsCapability = {
-  icon: <BoxGlyph />,
+  icon: <PresetGlyph />,
   title: 'Presets',
   sub: 'Agent-based optimization and kernel generation',
 };
diff --git a/website/src/pages/Home/ExploreSection.tsx b/website/src/pages/Home/ExploreSection.tsx
index 0bc57fb4a4..93ebde3758 100644
--- a/website/src/pages/Home/ExploreSection.tsx
+++ b/website/src/pages/Home/ExploreSection.tsx
@@ -1,19 +1,22 @@
 import { ReactNode } from 'react';
-import Link from '@cloudscape-design/components/link';
 import { AlternatingDocBlock } from '../../components/AlternatingDocBlock';
 import { ArchitectureDiagram } from '../../components/ArchitectureDiagram';
+import { CapList } from '../../components/Capabilities';
 import { ComputeSourcesTabs } from '../../components/ComputeSourcesTabs';
+import { FleetGlyph, GatewayGlyph, PresetGlyph, ProjectGlyph, ServiceGlyph, TaskGlyph } from '../../components/ConceptIcons';
+import { ContentTabs } from '../../components/ContentTabs';
+import { ViewDocsButton } from '../../components/ViewDocsButton';
 import { highlightTerms } from '../../components/highlightTerms';
-import { docsUrl } from '../../routes';
+import { DOCS_URL, docsUrl } from '../../routes';
 
 // Core orchestration primitives shown in the "AI-native orchestration" block.
 const keyConcepts = [
-  { name: 'Fleets', href: docsUrl('concepts/fleets'), description: 'Cluster provisioning and monitoring' },
-  { name: 'Tasks', href: docsUrl('concepts/tasks'), description: 'Training and other kind of jobs scheduling' },
-  { name: 'Services', href: docsUrl('concepts/services'), description: 'Cache-aware and PD-disaggregated inference' },
-  { name: 'Gateways', href: docsUrl('concepts/gateways'), description: 'HTTPS, auto-scaling, domains, and rate limits' },
-  { name: 'Presets', href: docsUrl('concepts/presets'), description: 'Agent-based optimization toolkit' },
-  { name: 'Projects', href: docsUrl('concepts/projects'), description: 'Tenant isolation and usage metering' },
+  { icon: <FleetGlyph />, title: 'Fleets', href: docsUrl('concepts/fleets'), sub: 'Cluster provisioning and monitoring' },
+  { icon: <TaskGlyph />, title: 'Tasks', href: docsUrl('concepts/tasks'), sub: 'Training and other kind of jobs scheduling' },
+  { icon: <ServiceGlyph />, title: 'Services', href: docsUrl('concepts/services'), sub: 'Cache-aware and PD-disaggregated inference' },
+  { icon: <GatewayGlyph />, title: 'Gateways', href: docsUrl('concepts/gateways'), sub: 'HTTPS, auto-scaling, domains, and rate limits' },
+  { icon: <PresetGlyph />, title: 'Presets', href: docsUrl('concepts/presets'), sub: 'Agent-based optimization toolkit' },
+  { icon: <ProjectGlyph />, title: 'Projects', href: docsUrl('concepts/projects'), sub: 'Tenant isolation and usage metering' },
 ];
 
 // The main marketing content: a sequence of alternating documentation blocks.
@@ -45,7 +48,7 @@ function BringComputeBlock() {
     >
       Have bare-metal servers or VMs with SSH access? Point dstack to those hosts and provide SSH
       credentials to create an SSH fleet. Have an existing Kubernetes or Slurm cluster? Connect it
-      through the Kubernetes backend or the <Link href={docsUrl('concepts/backends/#slurm')}>{highlightTerms('experimental Slurm backend')}</Link>.
+      through the Kubernetes backend or the experimental Slurm backend.
       dstack provides a unified workload interface while Kubernetes or Slurm handles scheduling
       within the cluster.
       <br />
@@ -64,18 +67,23 @@ export function KeyConceptsBlock({ children, imageFirst = false }: {
   return (
     <AlternatingDocBlock
       visual={
-        <div className="concept-grid-wrap">
-          <div className="concept-grid">
-            {keyConcepts.map(concept => (
-              // Whole card is the link so it reads as clickable. Kept as a real <a>
-              // (open-in-new-tab / SEO) rather than Cloudscape's onClick-only ActionCard.
-              <a className="media-card concept-card" href={concept.href} key={concept.name}>
-                <h3>{concept.name}</h3>
-                <p>{highlightTerms(concept.description)}</p>
-              </a>
-            ))}
-          </div>
-        </div>
+        <ContentTabs
+          ariaLabel="AI-native orchestration"
+          className="gs-box--compute-sources"
+          tabs={[{
+            id: 'concepts',
+            label: 'Concepts',
+            content: <CapList items={keyConcepts} />,
+            footer: (
+              <>
+                <span className="gs-foot__note">
+                  A unified interface for managing compute, training, and inference
+                </span>
+                <ViewDocsButton href={DOCS_URL} />
+              </>
+            ),
+          }]}
+        />
       }
       title="AI-native orchestration"
       imageFirst={imageFirst}
diff --git a/website/src/pages/Home/FaqSection.tsx b/website/src/pages/Home/FaqSection.tsx
index c9aa7c7310..0c46b2a24d 100644
--- a/website/src/pages/Home/FaqSection.tsx
+++ b/website/src/pages/Home/FaqSection.tsx
@@ -2,7 +2,6 @@ import { ReactNode, useState } from 'react';
 import Button from '@cloudscape-design/components/button';
 import ExpandableSection from '@cloudscape-design/components/expandable-section';
 import Link from '@cloudscape-design/components/link';
-import SpaceBetween from '@cloudscape-design/components/space-between';
 import { mainButtonStyle } from '../../cloudscape-theme';
 import { AlternatingDocBlock } from '../../components/AlternatingDocBlock';
 import { highlightTerms } from '../../components/highlightTerms';
@@ -64,7 +63,9 @@ export function FaqSection({ items = faqItems, showContact = true, imageFirst =
   action?: ReactNode;
   children?: ReactNode;
 }) {
-  const [openQuestion, setOpenQuestion] = useState<string | null>(null);
+  const [openQuestion, setOpenQuestion] = useState<string | null>(
+    () => items.length === 1 ? items[0].q : null,
+  );
 
   return (
     <section className="docs-section" id="faq">
@@ -75,6 +76,7 @@ export function FaqSection({ items = faqItems, showContact = true, imageFirst =
             {items.map(item => (
               <ExpandableSection
                 key={item.q}
+                className="faq-item"
                 variant="stacked"
                 headerText={item.q}
                 expanded={openQuestion === item.q}
@@ -89,16 +91,16 @@ export function FaqSection({ items = faqItems, showContact = true, imageFirst =
         }
         title="FAQ"
         action={action ?? (
-          <SpaceBetween direction="horizontal" size="xs">
-            <Button variant="primary" href="https://discord.gg/u8SmfwPpMd" target="_blank" iconAlign="right" iconName="external" style={mainButtonStyle}>
+          <div className="cta-pair">
+            <Button variant="primary" fullWidth href="https://discord.gg/u8SmfwPpMd" target="_blank" iconAlign="right" iconName="external" style={mainButtonStyle}>
               Discord
             </Button>
             {showContact && (
-              <Button href="https://calendly.com/dstackai/discovery-call" target="_blank" iconAlign="right" iconName="external" style={mainButtonStyle}>
+              <Button fullWidth href="https://calendly.com/dstackai/discovery-call" target="_blank" iconAlign="right" iconName="external" style={mainButtonStyle}>
                 Talk to us
               </Button>
             )}
-          </SpaceBetween>
+          </div>
         )}
       >
         {children ?? <>Have questions, or need help? Reach out to us on Discord{showContact && ' or directly'}.</>}
diff --git a/website/src/pages/Home/GetStartedSection.tsx b/website/src/pages/Home/GetStartedSection.tsx
index 31ee42f1e9..37339ae56c 100644
--- a/website/src/pages/Home/GetStartedSection.tsx
+++ b/website/src/pages/Home/GetStartedSection.tsx
@@ -2,13 +2,13 @@ import { Fragment, useId, useState } from 'react';
 import CodeView from '@cloudscape-design/code-view/code-view';
 import shHighlight from '@cloudscape-design/code-view/highlight/sh';
 import Button from '@cloudscape-design/components/button';
-import { asset } from '../../asset';
 import { mainButtonStyle } from '../../cloudscape-theme';
 import { BoxGlyph, CloudGlyph, LayersGlyph } from '../../components/Capabilities';
 import { ContentTabs } from '../../components/ContentTabs';
+import { ViewDocsButton } from '../../components/ViewDocsButton';
 import { highlightTerms } from '../../components/highlightTerms';
 import { installMethods, maxInstallLines, padYamlToLines } from '../../data/snippets';
-import { DOCS_URL, ROUTES, docsUrl } from '../../routes';
+import { DOCS_URL, docsUrl } from '../../routes';
 import { FactoryGetStartedTabs } from '../Factory/FactoryGetStartedTabs';
 import { MarketplaceTabs } from '../Sky/MarketplaceTabs';
 
@@ -104,7 +104,7 @@ function ProductFooter({ product }: { product: ProductId }) {
         </span>
         <div className="gs-foot__actions">
           <Button variant="primary" href={docsUrl('installation')} style={mainButtonStyle}>Install open-source</Button>
-          <Button href={DOCS_URL} style={mainButtonStyle}>View docs</Button>
+          <ViewDocsButton href={DOCS_URL} />
         </div>
       </>
     );
@@ -131,7 +131,6 @@ function ProductFooter({ product }: { product: ProductId }) {
         >
           {isSky ? 'Sign up' : 'Book a demo'}
         </Button>
-        <Button href={asset(isSky ? ROUTES.SKY : ROUTES.FACTORY)} style={mainButtonStyle}>Learn more</Button>
       </div>
     </>
   );
diff --git a/website/src/pages/Home/HomePage.tsx b/website/src/pages/Home/HomePage.tsx
index 7bc27e100b..5543aa70cb 100644
--- a/website/src/pages/Home/HomePage.tsx
+++ b/website/src/pages/Home/HomePage.tsx
@@ -2,6 +2,7 @@ import Button from '@cloudscape-design/components/button';
 import { useLayoutContext } from '../../App';
 import { heroButtonStyle } from '../../cloudscape-theme';
 import { HeroSquircle } from '../../components/HeroSquircle';
+import { ViewDocsButton } from '../../components/ViewDocsButton';
 import { highlightTerms } from '../../components/highlightTerms';
 import { DOCS_URL } from '../../routes';
 import { ExploreSection } from './ExploreSection';
@@ -32,28 +33,20 @@ export function HomePage() {
               'Kubernetes, VMs, or bare-metal clusters.',
             )}
           </p>
-          <div className="home-hero__actions">
-            <span className="cta-with-arrow">
-              <Button
-                variant="primary"
-                href="#resources"
-                onClick={event => {
-                  event.preventDefault();
-                  document.getElementById('resources')?.scrollIntoView({ behavior: 'smooth' });
-                }}
-                style={heroButtonStyle}
-              >
-                Get started
-                {/* Same thin arrow as the banner link (shaft + head), sliding right on hover. */}
-                <svg className="cta-arrow" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                  <path d="M4 12h15" />
-                  <path d="m12.5 5.5 6.5 6.5-6.5 6.5" />
-                </svg>
-              </Button>
-            </span>
-            <Button href={DOCS_URL} style={heroButtonStyle}>
-              View docs
+          <div className="home-hero__actions cta-pair">
+            <Button
+              variant="primary"
+              fullWidth
+              href="#resources"
+              onClick={event => {
+                event.preventDefault();
+                document.getElementById('resources')?.scrollIntoView({ behavior: 'smooth' });
+              }}
+              style={heroButtonStyle}
+            >
+              Get started
             </Button>
+            <ViewDocsButton href={DOCS_URL} style={heroButtonStyle} fullWidth />
           </div>
         </div>
       </section>
diff --git a/website/src/pages/Sky/SkyPage.tsx b/website/src/pages/Sky/SkyPage.tsx
index 0248322df1..51585b1eff 100644
--- a/website/src/pages/Sky/SkyPage.tsx
+++ b/website/src/pages/Sky/SkyPage.tsx
@@ -1,6 +1,6 @@
 import Button from '@cloudscape-design/components/button';
 import { useLayoutContext } from '../../App';
-import { heroButtonStyle } from '../../cloudscape-theme';
+import { heroButtonStyle, mainButtonStyle } from '../../cloudscape-theme';
 import { AlternatingDocBlock } from '../../components/AlternatingDocBlock';
 import { ComputeSourcesTabs } from '../../components/ComputeSourcesTabs';
 import { highlightTerms } from '../../components/highlightTerms';
@@ -86,21 +86,49 @@ export function SkyPage() {
               </KeyConceptsBlock>
             </section>
 
-            <FaqSection showContact={false} items={[
-              {
-                q: 'How is dstack Sky different from dstack?',
-                a: [
-                  'With dstack Sky, we host and maintain the server for you. ' +
-                    'With open-source dstack, you host the server yourself.',
-                  'dstack Sky includes all open-source features and adds a built-in gateway with an HTTPS domain, advanced observability, and usage metering.',
-                  'dstack Sky also provides a GPU marketplace with unified billing. ' +
-                    'Both support your own cloud accounts and on-prem compute. ' +
-                    'The CLI and YAML configurations are the same.',
-                ],
-              },
-            ]} />
-
             <TrustedBySection />
+
+            <FaqSection
+              showContact={false}
+              action={
+                <div className="cta-pair">
+                  <Button
+                    variant="primary"
+                    fullWidth
+                    href="https://sky.dstack.ai/"
+                    target="_blank"
+                    iconName="external"
+                    iconAlign="right"
+                    style={mainButtonStyle}
+                  >
+                    Sign up
+                  </Button>
+                  <Button
+                    fullWidth
+                    href="https://discord.gg/u8SmfwPpMd"
+                    target="_blank"
+                    iconName="external"
+                    iconAlign="right"
+                    style={mainButtonStyle}
+                  >
+                    Discord
+                  </Button>
+                </div>
+              }
+              items={[
+                {
+                  q: 'How is dstack Sky different from dstack?',
+                  a: [
+                    'With dstack Sky, we host and maintain the server for you. ' +
+                      'With open-source dstack, you host the server yourself.',
+                    'dstack Sky includes all open-source features and adds a built-in gateway with an HTTPS domain, advanced observability, and usage metering.',
+                    'dstack Sky also provides a GPU marketplace with unified billing. ' +
+                      'Both support your own cloud accounts and on-prem compute. ' +
+                      'The CLI and YAML configurations are the same.',
+                  ],
+                },
+              ]}
+            />
           </article>
         </div>
       </div>
diff --git a/website/src/styles.css b/website/src/styles.css
index 282b26eb3c..f82cf21f18 100644
--- a/website/src/styles.css
+++ b/website/src/styles.css
@@ -163,20 +163,25 @@ p {
   transform: translateX(3px);
 }
 
-/* "Get started" CTA arrow — the banner's thin arrow + hover slide, reused on the primary CTAs
-   (top-nav and hero). Cloudscape's Button takes no className, so a wrapper span carries the
-   hover: hovering the button hovers the wrapper, which slides the arrow. */
+/* Compact buttons give the arrow a little extra room at the button edge.
+   Hero buttons supply their own symmetric padding around the whole label. */
 .cta-with-arrow {
+  --cta-padding-end: 10px;
   display: inline-flex;
+  flex: 0 0 auto;
 }
-.cta-arrow {
+.cta-with-arrow__label {
   display: inline-flex;
-  vertical-align: middle;
-  margin-inline-start: 6px;
-  transition: transform 0.2s ease;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  vertical-align: top;
 }
-.cta-with-arrow:hover .cta-arrow {
-  transform: translateX(3px);
+.cta-with-arrow__icon {
+  display: block;
+  flex: 0 0 12px;
+  width: 12px;
+  height: 12px;
 }
 
 /* Banner + nav stick to the top together. Sticking the wrapper (rather than each child)
@@ -227,8 +232,7 @@ p {
   padding: 14px 24px;
 }
 
-.site-logo,
-.site-menu-button {
+.site-logo {
   border: 0;
   background: transparent;
   color: var(--cs-text);
@@ -270,7 +274,6 @@ p {
   display: none;
 }
 
-.site-menu-button,
 .site-menu-link {
   display: inline-flex;
   align-items: center;
@@ -286,47 +289,46 @@ p {
   text-decoration: none;
 }
 
-.site-menu-button:hover,
 .site-menu-link:hover {
   text-decoration: underline;
   text-underline-offset: 0.2em;
 }
 
-/* Keyboard focus only on the top-menu buttons. These are our own elements (not Cloudscape
+/* Keyboard focus only on the top-menu links. These are our own elements (not Cloudscape
    components), so use plain values rather than Cloudscape's internal token variables. */
-.site-menu-button:focus-visible,
 .site-menu-link:focus-visible {
   background: var(--cs-panel);
   color: var(--cs-text);
 }
 
-.site-menu-button.active {
-  border: 2px solid #879596;
-}
-
-/* "Products" top-nav hover menu. The trigger (.site-hover-menu__trigger) inherits the plain
-   text-link look from .site-menu-button; the popup opens on hover and is anchored to the
-   trigger. Continuity across the trigger→popup gap is handled by a close delay in JS
-   (hover-intent), so no visual bridge is needed here. */
-.site-hover-menu {
+/* The Products secondary button anchors the click-to-open popup. */
+.site-products-dropdown {
+  --products-arrow-gap: 10px;
   position: relative;
   display: inline-flex;
   align-items: center;
 }
 
+/* The text-to-caret gap and trailing button padding use the same value. */
+.site-products-dropdown__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--products-arrow-gap);
+  vertical-align: top;
+}
 /* Dropdown caret on the Products trigger — rotates 180° while the menu is open. */
-.site-hover-menu__caret {
+.site-products-dropdown__caret {
+  display: block;
   width: 12px;
   height: 12px;
   opacity: 1; /* full text colour — the caret reads as black like the menu label */
   transition: transform 0.15s ease;
 }
-.site-hover-menu__trigger[aria-expanded='true'] .site-hover-menu__caret {
+.site-products-dropdown[data-open='true'] .site-products-dropdown__caret {
   transform: rotate(180deg);
 }
 
-/* "Products" popup: renders the exact same grouped switcher rail as the Get-started section
-   (.gs-rail — see that block below for the visuals). This wrapper only anchors and sizes it. */
+/* The Products popup frames the shared grouped rail with one outer border. */
 .site-products-menu {
   position: absolute;
   top: calc(100% + 6px);
@@ -336,7 +338,12 @@ p {
   /* A floating popup can't show a see-through hole between the groups (arbitrary page content
      sits behind it) — back the rail with the unselected-row color so the gap reads as ground. */
   background: var(--cs-panel);
+  border: 1px solid var(--cs-border);
   border-radius: 8px;
+  overflow: hidden;
+}
+.site-products-menu .gs-rail {
+  border-radius: 7px;
 }
 /* And no hole at all in the popup: the groups sit flush, like one continuous menu. */
 .site-products-menu .gs-opt + .gs-rail__group {
@@ -386,7 +393,7 @@ p {
   font-weight: 600;
 }
 
-/* Hero CTAs sit side by side, each sized to its own label (not forced to equal width). */
+/* Paired actions share equal columns; single actions keep their natural width. */
 .home-hero__actions {
   margin-top: 28px;
   display: inline-flex;
@@ -394,6 +401,14 @@ p {
   gap: 8px;
 }
 
+.cta-pair {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  gap: 8px;
+  max-width: 100%;
+}
+
 .home-hero__art {
   position: absolute;
   inset: 0;
@@ -483,9 +498,8 @@ p {
   border-bottom: 0;
 }
 
-/* 1px outer frame on the FAQ block with rounded (12px) corners. ExpandableSection
-   has no radius token, so we border + clip the wrapper; overflow:hidden trims the items' square
-   corners to the radius. Internal dividers between questions stay 0.5px (see cloudscape-overrides). */
+/* One outer frame for the FAQ; individual questions only draw internal dividers
+   (see cloudscape-overrides). Clip their backgrounds to the shared rounded corners. */
 .faq-list {
   border: 1px solid var(--cs-border);
   border-radius: 12px;
@@ -605,16 +619,6 @@ p {
   font-size: 17px;
 }
 
-/* Concept-card descriptions: muted, 14px (a step down from the standard small text) since they
-   sit in a dense card grid. Higher specificity than `.doc-alternating p` so it wins (the cards
-   sit inside an alternating block). */
-.concept-grid .media-card p {
-  padding: 0;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--cs-muted);
-}
-
 /* "Vendor-agnostic, open-source" architecture diagram (components/ArchitectureDiagram.tsx),
    rebuilt from a static SVG into HTML/CSS and sized 1:1 with it. Every dimension is in cqw
    (% of the diagram's own width, resolved against the .arch-diagram-wrap container) so the
@@ -665,10 +669,11 @@ p {
 .arch-row--compute .arch-cell {
   justify-content: center;
   gap: 0.55cqw;
-  min-height: calc(8cqw + 6px);
+  min-height: calc(8cqw - 6px);
   padding-inline: 1.5cqw;
-  border: 1px dotted currentColor;
-  border-radius: 12px;
+  border: 1px solid currentColor;
+  border-radius: 9px;
+  background: var(--cs-bg);
 }
 
 .arch-row--compute .arch-cell--cloud {
@@ -774,7 +779,7 @@ p {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 5.54cqw; /* 50u */
+  min-height: 6cqw;
   padding: 0 0.8cqw;
   border-radius: 12px;
   text-align: center;
@@ -873,7 +878,7 @@ p {
   .arch-row--inputs > .arch-cell { grid-column: 1 / -1; }
   .arch-row--compute { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px var(--arch-label-padding); }
   .arch-row--compute > :first-child { grid-column: 1 / -1; }
-  .arch-row--compute .arch-cell { min-height: 54px; padding: 11px 8px; border-radius: 8px; }
+  .arch-row--compute .arch-cell { min-height: 54px; padding: 11px 8px; }
   .arch-cell { min-height: 52px; padding: 10px var(--arch-label-padding); gap: 12px; border-width: 1px; border-radius: 8px; }
   .arch-cell__label { font-size: 16px; white-space: normal; }
   .arch-cell--platform { min-height: 52px; gap: 6px; padding: 8px 4px; }
@@ -948,46 +953,6 @@ p {
   font-size: var(--font-small);
 }
 
-/* Core-concept cards: three columns inside the AlternatingDocBlock visual slot. */
-.concept-grid-wrap {
-  container-type: inline-size;
-  width: 100%;
-}
-
-.concept-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  grid-auto-rows: 1fr; /* equal-height cards across both rows */
-  column-gap: 1.72cqw; /* match .arch-row */
-  row-gap: 2.66cqw; /* match .arch-diagram */
-}
-
-/* Each concept card is a whole-card link to the docs with a simple 1px outline. */
-.concept-grid .media-card {
-  display: block;
-  color: var(--cs-text);
-  text-decoration: none !important;
-  background: transparent;
-  border: 1px solid currentColor;
-  border-radius: 12px;
-  padding: 16px 18px 18px;
-  transition: background-color 0.15s ease;
-}
-
-.concept-grid .media-card:hover {
-  background: var(--cs-hover);
-}
-
-.concept-grid .media-card h3 {
-  display: flex;
-  align-items: center;
-  margin: 0 0 6px;
-  padding: 0;
-  font-size: 17px;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-
 /* Quote author name reuses the card-heading size. */
 .testimonial-name {
   font-size: var(--font-card-heading) !important;
@@ -1108,7 +1073,12 @@ p {
 .gs-rail a.gs-opt:focus-visible {
   border-radius: 8px;
   background: var(--cs-bg);
-  box-shadow: inset 0 0 0 0.5px var(--cs-text);
+  box-shadow: inset 0 0 0 1px var(--cs-text);
+}
+.site-products-menu .gs-rail:not(:has(a.gs-opt:hover, a.gs-opt:focus-visible)) .gs-opt.gs-opt--on,
+.site-products-menu .gs-rail a.gs-opt:hover,
+.site-products-menu .gs-rail a.gs-opt:focus-visible {
+  box-shadow: none;
 }
 .gs-rail button.gs-opt:focus-visible {
   outline: 2px solid var(--cs-text);
@@ -1252,7 +1222,8 @@ p {
 .sky-gpu-prices {
   flex: 0 0 auto;
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
   font-size: 13px;
 }
 .sky-gpu-prices th,
@@ -1278,6 +1249,19 @@ p {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   white-space: nowrap;
 }
+.sky-gpu-prices tbody th,
+.sky-gpu-prices tbody td {
+  transition: background-color 0.15s ease;
+}
+.sky-gpu-prices tbody tr:hover > * {
+  background: var(--cs-panel);
+}
+.sky-gpu-prices tbody tr > :first-child {
+  border-radius: 8px 0 0 8px;
+}
+.sky-gpu-prices tbody tr > :last-child {
+  border-radius: 0 8px 8px 0;
+}
 @media (max-width: 480px) {
   .gs-box--offers .gs-skybody {
     padding-inline: 16px;
@@ -1331,10 +1315,12 @@ p {
 }
 
 @media (max-width: 480px) {
-  .gs-box--compute .gs-boxfoot {
+  .gs-box--compute .gs-boxfoot,
+  .gs-box--compute-sources .gs-boxfoot {
     flex-wrap: wrap;
   }
-  .gs-box--compute .gs-foot__note {
+  .gs-box--compute .gs-foot__note,
+  .gs-box--compute-sources .gs-foot__note {
     flex-basis: 100%;
   }
 }
@@ -1494,6 +1480,41 @@ p {
   align-items: flex-start;
   gap: 11px;
 }
+.gs-cap,
+.gs-cloud {
+  position: relative;
+  isolation: isolate;
+  border-radius: 8px;
+}
+.docs-article a.gs-cap,
+.docs-article a.gs-cloud {
+  color: var(--cs-text);
+  text-decoration: none !important;
+}
+/* Extend the hover fill without changing list spacing or text alignment. */
+.gs-cap::before,
+.gs-cloud::before {
+  content: '';
+  position: absolute;
+  inset: -8px -12px;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--cs-panel);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+.gs-cap:hover::before,
+.gs-cloud:hover::before,
+.gs-cap:focus-visible::before,
+.gs-cloud:focus-visible::before {
+  opacity: 1;
+}
+.docs-article a.gs-cap:focus-visible,
+.docs-article a.gs-cloud:focus-visible {
+  outline: 2px solid var(--cs-text);
+  outline-offset: 4px;
+}
 .gs-cap__ic {
   flex: 0 0 auto;
   margin-top: 1px;
@@ -1557,7 +1578,7 @@ p {
   .gs-caps { grid-template-columns: 1fr; }
   /* Keep footer notes and buttons on one row. */
   .gs-boxfoot { align-items: center; gap: 10px; }
-  .gs-boxfoot [class*='awsui_button'] { padding-inline: 14px !important; }
+  .gs-boxfoot [class*='awsui_button'] { padding-inline: 14px var(--cta-padding-end, 14px) !important; }
 }
 
 .site-footer {
@@ -1848,7 +1869,6 @@ p {
 
   .doc-card-grid,
   .product-grid,
-  .concept-grid,
   .testimonial-grid {
     grid-template-columns: 1fr;
   }
@@ -1976,8 +1996,11 @@ p {
   .home-hero__actions--single {
     grid-template-columns: max-content;
   }
-  /* Each button fills its half-column; center the label and trim the desktop 34px side
+  /* Each button fills its half-column; center the label and trim the desktop side
      padding so both fit. !important: Cloudscape sets text-align:start via a boosted rule. */
+  .cta-pair > a {
+    padding-inline: 16px !important;
+  }
   .home-hero__actions [class*='awsui_button'] {
     width: 100%;
     padding-inline: 16px !important;
diff --git a/website/vite.config.ts b/website/vite.config.ts
index ff84e085ac..ca0e5f13b3 100644
--- a/website/vite.config.ts
+++ b/website/vite.config.ts
@@ -12,6 +12,7 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
   base: process.env.BASE_PATH || '/',
   plugins: [react()],
+  esbuild: { legalComments: 'inline' },
   build: {
     assetsDir: 'website-assets',
     rollupOptions: {