diff --git a/agentic-development/overview.mdx b/agentic-development/overview.mdx
index 58b1877..68e6d6c 100644
--- a/agentic-development/overview.mdx
+++ b/agentic-development/overview.mdx
@@ -11,7 +11,7 @@ AI-assisted development in Tilebox is built around giving agents the same operat
 Tilebox supports agents through a CLI-based setup. The CLI gives agents a deterministic terminal interface with structured output, machine-readable command discovery, and file-based inputs. Agent skills teach agents how to compose CLI commands into common Tilebox tasks, while the MCP server is available for AI tools where terminal access is limited, such as web-based chat agents.
 
 <Columns cols={2}>
-  <Card title="Onboard your agent" icon="rocket" href="/agentic-development/onboard-your-agent">
+  <Card title="Onboard your agent" icon="rocket" href="/onboard-your-agent">
     Configure an agent with the Tilebox CLI, Tilebox skills, and documentation context.
   </Card>
   <Card title="AI interfaces" icon="route" href="/agentic-development/ai-interfaces">
@@ -33,4 +33,4 @@ Tilebox supports agents through a CLI-based setup. The CLI gives agents a determ
 
 ## Recommended setup
 
-Use [Onboard your agent](/agentic-development/onboard-your-agent) if you want an AI coding agent to help with Tilebox work in a repository. It covers the default setup with CLI installation, CLI authentication, Tilebox skills, and documentation context. Use the MCP setup when your agent runs in a web or chat environment where commands and terminals are not easy to use.
+Use [Onboard your agent](/onboard-your-agent) if you want an AI coding agent to help with Tilebox work in a repository. It covers the default setup with CLI installation, CLI authentication, Tilebox skills, and documentation context. Use the MCP setup when your agent runs in a web or chat environment where commands and terminals are not easy to use.
diff --git a/agents.mdx b/agents.mdx
index fd1cf30..f794d33 100644
--- a/agents.mdx
+++ b/agents.mdx
@@ -344,10 +344,10 @@ Tilebox docs:
 https://docs.tilebox.com
 ```
 
-Agent onboarding:
+Agent setup:
 
 ```text
-https://docs.tilebox.com/agentic-development/onboard-your-agent
+https://docs.tilebox.com/onboard-your-agent
 ```
 
 Tilebox MCP:
diff --git a/assets/landing/agent-mode-dark.png b/assets/landing/agent-mode-dark.png
new file mode 100644
index 0000000..88c9f34
Binary files /dev/null and b/assets/landing/agent-mode-dark.png differ
diff --git a/assets/landing/agent-mode-light.png b/assets/landing/agent-mode-light.png
new file mode 100644
index 0000000..647d8f5
Binary files /dev/null and b/assets/landing/agent-mode-light.png differ
diff --git a/assets/landing/developer-mode-dark.png b/assets/landing/developer-mode-dark.png
new file mode 100644
index 0000000..50b61eb
Binary files /dev/null and b/assets/landing/developer-mode-dark.png differ
diff --git a/assets/landing/developer-mode-light.png b/assets/landing/developer-mode-light.png
new file mode 100644
index 0000000..beb5f25
Binary files /dev/null and b/assets/landing/developer-mode-light.png differ
diff --git a/changelog.mdx b/changelog.mdx
index be23e99..1ea1169 100644
--- a/changelog.mdx
+++ b/changelog.mdx
@@ -2,6 +2,7 @@
 title: Product Updates
 description: A chronological record of new features, improvements, and other notable changes shipped across the Tilebox platform. Updated regularly with each new release.
 icon: rss
+mode: center
 ---
 
 <Update label="May 2026">
diff --git a/docs.json b/docs.json
index ede3642..a7ab77e 100644
--- a/docs.json
+++ b/docs.json
@@ -24,8 +24,8 @@
           {
             "group": "Get Started",
             "pages": [
-              "introduction",
               "quickstart",
+              "onboard-your-agent",
               "console",
               "authentication"
             ]
@@ -34,7 +34,6 @@
             "group": "Agentic Development",
             "pages": [
               "agentic-development/overview",
-              "agentic-development/onboard-your-agent",
               "agentic-development/ai-interfaces",
               "agentic-development/tilebox-cli",
               "agentic-development/tilebox-mcp",
diff --git a/index.mdx b/index.mdx
new file mode 100644
index 0000000..db6bc68
--- /dev/null
+++ b/index.mdx
@@ -0,0 +1,314 @@
+---
+title: Tilebox
+sidebarTitle: Introduction
+description: "One API for humans and agents to discover data, run workflows, and debug results across environments."
+icon: house
+mode: custom
+'og:title': "Tilebox Docs"
+---
+
+export const HomeSearch = () => {
+  const openSearch = () => {
+    const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+    const event = new KeyboardEvent("keydown", {
+        key: "k",
+        code: "KeyK",
+        metaKey: isMac,
+        ctrlKey: !isMac,
+        bubbles: true,
+    });
+    document.dispatchEvent(event);
+    window.dispatchEvent(event);
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={openSearch}
+      className="mt-8 w-full rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 px-4 py-3 text-left shadow-sm hover:border-gray-300 dark:hover:border-gray-700 focus:outline-none focus:ring-2 focus:ring-primary"
+      aria-label="Search Tilebox documentation"
+    >
+      <span className="flex items-center justify-between gap-3">
+        <span className="flex items-center gap-3 text-gray-500 dark:text-gray-400">
+          <Icon icon="magnifying-glass" />
+          <span>What do you want to build?</span>
+        </span>
+        <kbd className="hidden sm:inline-flex px-1.5 py-0.5 text-xs text-gray-500 dark:text-gray-400">
+          ⌘K
+        </kbd>
+      </span>
+    </button>
+  );
+};
+
+<div className="tilebox-home-marker hidden" aria-hidden="true" />
+
+<div className="tilebox-landing-hero px-6 py-16 lg:pt-24">
+  <div className="max-w-6xl mx-auto grid lg:grid-cols-12 gap-12 items-start">
+    <div className="lg:col-span-5">
+      <p className="text-sm font-semibold text-primary dark:text-primary-light uppercase tracking-wide">
+        Tilebox documentation
+      </p>
+      <h1 className="mt-4 text-4xl lg:text-6xl font-semibold tracking-tight text-gray-950 dark:text-white">
+        Start building with Tilebox
+      </h1>
+      <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-400">
+        Query Earth Data. Build, run, debug, and scale geospatial workflows across environments. One API for humans and agents.
+      </p>
+
+      <HomeSearch />
+
+      <div className="mt-4 flex flex-wrap gap-2">
+        <a className="inline-flex items-center gap-2 rounded-lg border border-gray-200 dark:border-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 hover:text-gray-950 dark:hover:text-white" href="/quickstart">
+          <Icon icon="play" />
+          Quickstart
+        </a>
+        <a className="inline-flex items-center gap-2 rounded-lg border border-gray-200 dark:border-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 hover:text-gray-950 dark:hover:text-white" href="/authentication">
+          <Icon icon="key" />
+          Get API Key
+        </a>
+        <a className="inline-flex items-center gap-2 rounded-lg border border-gray-200 dark:border-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 hover:text-gray-950 dark:hover:text-white" href="/guides/datasets/ingest">
+          <Icon icon="database" />
+          Ingest data
+        </a>
+      </div>
+    </div>
+
+    <div className="lg:col-span-7">
+      <CodeGroup>
+      ```text Agent
+      > User
+      Onboard yourself to Tilebox: https://docs.tilebox.com/onboard-your-agent
+      
+      Then use Tilebox to find which data center sites changed most from space.
+      
+      Build a reproducible workflow that:
+         - starting from a user-provided CSV of known data centers
+         - finds cloud-free Sentinel-2 imagery over a target lat/lon in a time window
+         - reads the relevant band products, crops scenes to a 3km area around the target
+         - computes the cloud fraction for the cropped area, filter out scenes > 1%
+         - compares before/after by scoring visible change based on suitable metrics
+         - then create a datacenter site ranking based on score
+      
+      Use the provided Tilebox skills to research datasets, storage access and outline the
+      workflow, then implement it. Deploy and run on our GCP cluster, in case of failures
+      inspect runner logs and iterate on the workflow.
+      ```
+
+      ```bash CLI
+      curl -fsSL https://cli.tilebox.com/install.sh | sh
+
+      tilebox dataset query
+        open_data.copernicus.sentinel2_msi
+        --last 7d
+        --spatial-extent 'POLYGON((-109.05 41,-109.05 37,-102.05 37,-102.05 41,-109.05 41))'
+        --limit 10
+      
+      tilebox job submit 
+        --name "Datacenter Monitoring"
+        --task "ComputeVisibleChange"
+        --input "{\"before\": \"2024-06-01\", \"after\": \"2026-06-01\"}"
+        --cluster gcp-Drv6L7Li4t7Yvk
+      ```
+
+      ```python Python lines
+      from tilebox.datasets import Client
+      from tilebox.workflows import Task, ExecutionContext
+      
+      class ComputeVisibleChange(Task):
+        before: str
+        after: str
+
+        def execute(self, context: ExecutionContext):
+          sentinel2 = Client().dataset(
+            "open_data.copernicus.sentinel2_msi"
+          )
+          scenes = sentinel2.collection("S2A_S2MSI1A").query(
+              temporal_extent=(before, after),
+          )
+          context.logger.info("Found scenes", n=len(scenes.granule_name))
+          context.submit_subtasks([
+            ProcessScene(str(name) for name in scenes.granule_name)
+          ])
+      ```
+
+      ```go Go lines
+      type ComputeVisibleChange struct {
+          Before time.Time
+          After  time.Time
+      }
+
+      func (t *ComputeVisibleChange) Execute(ctx context.Context) error {
+          client := datasets.NewClient()
+          dataset, _ := client.Datasets.Get(ctx, "open_data.copernicus.sentinel2_msi")
+          collection, _ := client.Collections.Get(ctx, dataset.ID, "S2A_S2MSI1C")
+
+          var scenes []*examplesv1.Sentinel2Msi
+          _ = client.Datapoints.QueryInto(ctx, dataset.ID, &scenes,
+              datasets.WithCollections(collection),
+              datasets.WithTemporalExtent(query.NewTimeInterval(t.Before, t.After)),
+          )
+
+          slog.InfoContext(ctx, "Found scenes", slog.Int("n", len(scenes)))
+          for _, scene := range scenes {
+              _, _ = workflows.SubmitSubtask(ctx, &ProcessScene{
+                  Name: scene.GetGranuleName(),
+              })
+          }
+          return nil
+      }
+      ```
+      </CodeGroup>
+    </div>
+  </div>
+</div>
+
+<div className="px-6 pb-16">
+  <div className="max-w-6xl mx-auto">
+    <p className="text-sm font-semibold text-primary dark:text-primary-light uppercase tracking-wide">
+      Get started
+    </p>
+    <h2 className="mt-3 text-3xl font-semibold tracking-tight text-gray-950 dark:text-white">
+      Choose how you build
+    </h2>
+    <p className="mt-4 text-lg leading-8 text-gray-600 dark:text-gray-400 max-w-2xl">
+      Use Tilebox directly as a developer, or give an agent the same tools and documentation context so it can work with Tilebox for you.
+    </p>
+
+    <div className="mt-10 grid lg:grid-cols-2 gap-6">
+      <div className="border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 overflow-hidden">
+        <div className="tilebox-mode-card-preview flex items-center justify-center border-b border-gray-200 dark:border-gray-800">
+          <img src="/assets/landing/agent-mode-light.png" alt="Agent connected to Earth data and workflow observability tools" className="tilebox-mode-card-image dark:hidden" />
+          <img src="/assets/landing/agent-mode-dark.png" alt="Agent connected to Earth data and workflow observability tools" className="tilebox-mode-card-image hidden dark:block" />
+        </div>
+        <div className="p-8">
+          <h3 className="text-2xl font-semibold tracking-tight text-gray-950 dark:text-white">
+            Use an agent
+          </h3>
+          <p className="mt-3 text-gray-600 dark:text-gray-400 leading-7">
+            Configure a coding agent with the Tilebox CLI, agent skills, and optional MCP access. Agents can inspect datasets, write workflow code, submit jobs, and debug runs with Tilebox context.
+          </p>
+          <div className="mt-8 space-y-4">
+            <a className="flex items-center gap-3 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-950 dark:hover:text-white" href="/onboard-your-agent">
+              <Icon icon="play" />
+              Onboard your agent
+            </a>
+            <a className="flex items-center gap-3 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-950 dark:hover:text-white" href="/guides/workflows/agentic-workflow-iteration">
+              <Icon icon="book" />
+              Create and deploy workflows
+            </a>
+            <a className="flex items-center gap-3 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-950 dark:hover:text-white" href="/agentic-development/tilebox-mcp">
+              <Icon icon="plug" />
+              Connect with MCP
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div className="border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 overflow-hidden">
+        <div className="tilebox-mode-card-preview flex items-center justify-center border-b border-gray-200 dark:border-gray-800">
+          <img src="/assets/landing/developer-mode-light.png" alt="Developer terminal connected to code debugging and dataset tools" className="tilebox-mode-card-image dark:hidden" />
+          <img src="/assets/landing/developer-mode-dark.png" alt="Developer terminal connected to code debugging and dataset tools" className="tilebox-mode-card-image hidden dark:block" />
+        </div>
+        <div className="p-8">
+          <h3 className="text-2xl font-semibold tracking-tight text-gray-950 dark:text-white">
+            Build as a developer
+          </h3>
+          <p className="mt-3 text-gray-600 dark:text-gray-400 leading-7">
+            Use the Console, Python SDK, Go SDK, and CLI to query data, ingest your own catalogs, create workflow tasks, and run them across your infrastructure.
+          </p>
+          <div className="mt-8 space-y-4">
+            <a className="flex items-center gap-3 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-950 dark:hover:text-white" href="/quickstart">
+              <Icon icon="play" />
+              Quickstart
+            </a>
+            <a className="flex items-center gap-3 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-950 dark:hover:text-white" href="/sdks/introduction">
+              <Icon icon="code" />
+              Choose an SDK
+            </a>
+            <a className="flex items-center gap-3 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-950 dark:hover:text-white" href="/api-reference/python/tilebox.datasets/Client">
+              <Icon icon="book" />
+              API reference
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div className="px-6 py-16 bg-gray-50 dark:bg-gray-950 border-y border-gray-200 dark:border-gray-800">
+  <div className="max-w-6xl mx-auto">
+    <p className="text-sm font-semibold text-primary dark:text-primary-light uppercase tracking-wide">
+      Learn
+    </p>
+    <h2 className="mt-3 text-2xl font-semibold tracking-tight text-gray-950 dark:text-white">
+      Explore the platform
+    </h2>
+    <p className="mt-3 text-gray-600 dark:text-gray-400 max-w-3xl">
+      Start from the outcome you need. Tilebox combines typed data access, workflow execution on your infrastructure, and shared observability for people and agents working on geospatial systems.
+    </p>
+
+    <div className="mt-8">
+      <Columns cols={3}>
+        <Tile href="/datasets/query/querying-data" title="Query satellite data" description="Search typed datasets by time, location, collection, or datapoint ID.">
+          <img src="/assets/console/datasets-explorer-light.png" alt="Tilebox dataset explorer" className="block dark:hidden" />
+          <img src="/assets/console/datasets-explorer-dark.png" alt="Tilebox dataset explorer" className="hidden dark:block" />
+        </Tile>
+        <Tile href="/workflows/observability/introduction" title="Inspect workflow runs" description="Use logs, traces, progress, and job state to debug workflows and verify results.">
+          <img src="/assets/workflows/observability/logs-light.png" alt="Workflow logs in Tilebox Console" className="block dark:hidden" />
+          <img src="/assets/workflows/observability/logs-dark.png" alt="Workflow logs in Tilebox Console" className="hidden dark:block" />
+        </Tile>
+        <Tile href="/workflows/concepts/runners" title="Deploy to your own compute" description="Connect runners to your own infrastructure and control where workflow tasks execute.">
+          <img src="/assets/workflows/runners/runner-architecture-light.png" alt="Tilebox runner architecture" className="block dark:hidden" />
+          <img src="/assets/workflows/runners/runner-architecture-dark.png" alt="Tilebox runner architecture" className="hidden dark:block" />
+        </Tile>
+      </Columns>
+    </div>
+
+    <div className="mt-8">
+      <Columns cols={3}>
+        <Card title="Run a workflow" icon="diagram-project" href="/workflows/introduction" horizontal />
+        <Card title="Connect storage" icon="folder-open" href="/storage/clients" horizontal />
+        <Card title="Ingest data" icon="database" href="/guides/datasets/ingest" horizontal />
+        <Card title="Sample notebooks" icon="book-open" href="/sdks/python/sample-notebooks" horizontal />
+        <Card title="Spatio-temporal datasets" icon="globe" href="/datasets/types/spatiotemporal" horizontal />
+        <Card title="Jobs" icon="diagram-project" href="/workflows/concepts/jobs" horizontal />
+      </Columns>
+    </div>
+  </div>
+</div>
+
+<div className="px-6 pb-20">
+  <div className="max-w-6xl mx-auto rounded-2xl p-8 bg-white dark:bg-gray-950">
+    <p className="text-sm font-semibold text-primary dark:text-primary-light uppercase tracking-wide">
+      Scale
+    </p>
+    <h2 className="mt-3 text-2xl font-semibold tracking-tight text-gray-950 dark:text-white">
+      From first query to running on your infrastructure
+    </h2>
+    <p className="mt-3 text-gray-600 dark:text-gray-400 max-w-3xl">
+      Start with open data or your own catalogs, turn processing steps into tasks, and run them where your data and infrastructure already live.
+    </p>
+
+    <div className="mt-8">
+      <Steps>
+        <Step title="Discover and query data">
+          Query open datasets or your own Tilebox datasets by time, area of interest, collection, or datapoint ID.
+        </Step>
+        <Step title="Build workflow tasks">
+          Turn processing steps into workflow tasks that can submit subtasks, report progress, use caches, and emit logs and traces.
+        </Step>
+        <Step title="Prototype locally">
+          Develop with local runners, iterate quickly, and prototype your geospatial workflows.
+        </Step>
+        <Step title="Deploy to your own compute">
+          Run workflows across cloud, on-premises, sovereign, air-gapped, or edge environments while Tilebox tracks jobs and distributes work for parallel execution.
+        </Step>
+        <Step title="Inspect and iterate">
+          Query job state, logs, spans, and progress from the Console, SDKs, CLI, or agent tools.
+        </Step>
+      </Steps>
+    </div>
+  </div>
+</div>
diff --git a/introduction.mdx b/introduction.mdx
deleted file mode 100644
index 13aed96..0000000
--- a/introduction.mdx
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: Tilebox
-sidebarTitle: Introduction
-description: "Tilebox helps teams turn physical world data into operational workflows."
-icon: house
-mode: wide
-'og:title': "Tilebox Docs"
----
-
-import { HeroCard } from '/snippets/components.mdx';
-
-Use Tilebox to access datasets, connect your own data, build processing pipelines, launch jobs, and inspect results. You can work through the console, command line, SDKs, APIs, or coding agents. Each access point uses the same authentication, data access, and job history.
-
-## Concepts
-
-Tilebox consists of two primary modules:
-
-<Columns cols={3}>
-  <HeroCard
-    title="Datasets"
-    description="A data access module with upstream integrations to space service providers, enabling instant data access for scientists through high-performance APIs and easy-to-use client SDKs."
-    href="/datasets/introduction"
-  >
-    <img src="/assets/tilebox-datasets-hero.svg" alt="Datasets" />
-  </HeroCard>
-  <HeroCard
-    title="Workflows"
-    description="A parallel processing engine that offers intuitive creation of dynamic tasks as code, supporting effortless parallel execution across various compute environments, including on-premise and auto-scaling public cloud clusters."
-    href="/workflows/introduction"
-  >
-    <img src="/assets/tilebox-workflows-hero.svg" alt="Workflows" />
-  </HeroCard>
-</Columns>
-
-## Getting Started
-
-To get started, check out some of the following resources:
-
-<Columns cols={3}>
-  <Card
-    title="Tilebox Console"
-    icon="terminal"
-    href="/console"
-    horizontal
-  />
-  <Card
-    title="Create an API Key"
-    icon="key"
-    href="/authentication"
-    horizontal
-  />
-  <Card
-    title="Quickstart"
-    icon="rocket"
-    href="/quickstart"
-    horizontal
-  />
-</Columns>
-
-## Guides
-
-You can also start by looking through these guides:
-
-<Columns cols={2}>
-  <Card
-    title="Timeseries Datasets"
-    icon="database"
-    href="/datasets/introduction"
-  >
-    Learn about time-series datasets and their structure.
-  </Card>
-  <Card
-    title="Querying Data"
-    icon="server"
-    href="/datasets/query/querying-data"
-  >
-    Discover how to query and load data from a dataset.
-  </Card>
-  <Card
-    title="Create Tasks"
-    icon="laptop-code"
-    href="/workflows/concepts/tasks"
-  >
-    Gain a deeper understanding of how to create tasks using the Tilebox Workflow Orchestrator.
-  </Card>
-  <Card
-    title="Setting up Runners"
-    icon="circle-nodes"
-    href="/workflows/concepts/runners">
-    Find out how to deploy runners to run workflows in a parallel, distributed manner.
-  </Card>
-</Columns>
diff --git a/agentic-development/onboard-your-agent.mdx b/onboard-your-agent.mdx
similarity index 100%
rename from agentic-development/onboard-your-agent.mdx
rename to onboard-your-agent.mdx
diff --git a/quickstart.mdx b/quickstart.mdx
index 56704f9..34fc18c 100644
--- a/quickstart.mdx
+++ b/quickstart.mdx
@@ -1,10 +1,10 @@
 ---
 title: Quickstart
 description: Start here to set up Tilebox and get started building.
-icon: rocket
+icon: play
 ---
 
-Tilebox works across the [Console](/console), [command line](/agentic-development/tilebox-cli), [SDKs](/sdks), and [coding agents](/agentic-development/onboard-your-agent). The first step is the same for each path: create an API key.
+Tilebox works across the [Console](/console), [command line](/agentic-development/tilebox-cli), [SDKs](/sdks), and [coding agents](/onboard-your-agent). The first step is the same for each path: create an API key.
 
 Follow the steps below to get started.
 
@@ -47,7 +47,7 @@ If you prefer to work locally, follow these steps to get started.
         Use Tilebox from your application code in Python or Go.
       </Card>
 
-      <Card title="Coding agents" icon="robot" href="/agentic-development/onboard-your-agent">
+      <Card title="Coding agents" icon="robot" href="/onboard-your-agent">
         Setup your coding agent, and give it access to Tilebox-specific skills and resources for catalogs, workflows, jobs and automations.
       </Card>
     </CardGroup>
diff --git a/style.css b/style.css
index b0045bd..9fcfb96 100644
--- a/style.css
+++ b/style.css
@@ -2,3 +2,58 @@
 * {
   border-radius: 0 !important;
 }
+
+.tilebox-landing-hero {
+  min-height: 740px;
+}
+
+.tilebox-mode-card-preview {
+  min-height: 160px;
+  background-image: radial-gradient(circle, rgba(120, 120, 120, 0.18) 1px, transparent 1px);
+  background-size: 16px 16px;
+}
+
+.tilebox-mode-card-image {
+  height: auto;
+  max-height: 160px;
+  max-width: 92%;
+  object-fit: contain;
+  width: 100%;
+}
+
+@media (max-width: 1023px) {
+  .tilebox-landing-hero {
+    min-height: auto;
+  }
+}
+
+
+/* Manually override the Documentation tab being highlighted on the landing/index page */
+html:has(.tilebox-home-marker) .nav-tabs .nav-tabs-item[data-active="true"] {
+  color: rgb(75 85 99) !important;
+  text-shadow: none !important;
+}
+
+html.dark:has(.tilebox-home-marker) .nav-tabs .nav-tabs-item[data-active="true"] {
+  color: rgb(156 163 175) !important;
+}
+
+html:has(.tilebox-home-marker) .nav-tabs .nav-tabs-item[data-active="true"] > div {
+  background: transparent !important;
+}
+
+html:has(.tilebox-home-marker) .nav-tabs .nav-tabs-item[data-active="true"]:hover {
+  color: rgb(31 41 55) !important;
+}
+
+html.dark:has(.tilebox-home-marker) .nav-tabs .nav-tabs-item[data-active="true"]:hover {
+  color: rgb(209 213 219) !important;
+}
+
+html:has(.tilebox-home-marker) .nav-tabs .nav-tabs-item[data-active="true"]:hover > div {
+  background: rgb(229 231 235) !important;
+}
+
+html.dark:has(.tilebox-home-marker) .nav-tabs .nav-tabs-item[data-active="true"]:hover > div {
+  background: rgb(55 65 81) !important;
+}