diff --git a/website/src/content/docs/index.mdx b/website/src/content/docs/index.mdx
index 2bcbf9d..12e0263 100644
--- a/website/src/content/docs/index.mdx
+++ b/website/src/content/docs/index.mdx
@@ -31,22 +31,32 @@ SQL.
Start in **simple mode** — a friendly, keyword-based command language —
and switch to **advanced mode** for standard SQL whenever you are ready.
+
+ Modes →
Run a simple-mode command in advanced mode and the playground shows you
the equivalent SQL, so the bridge from concepts to SQL is always visible.
+
+ Seeing the SQL →
Every change can be undone, your work is saved as you go, and you can
rebuild the whole database from plain, readable files.
+
+ Undo and history →
Ask the playground to explain any query and it renders the database's
plan as an annotated tree — so indexes and scans stop being a mystery.
+
+ Query plans →
The input field completes commands with Tab, highlights
syntax, flags mistakes before you run them, and hints what comes next.
+
+ The assistive editor →
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
index 5811720..f2a4368 100644
--- a/website/src/styles/global.css
+++ b/website/src/styles/global.css
@@ -34,6 +34,39 @@
}
}
+/* Keep short inline code from breaking mid-token. Browsers insert a break
+ opportunity after a hyphen, which splits flags like `--all-rows` across
+ lines in a narrow column. `nowrap` keeps the token intact; the inline
+ element still wraps as a whole unit to the next line if it doesn't fit, so
+ this only prevents *internal* breaks. Block code (Expressive Code, inside
+
) is excluded and wraps/scrolls as before. */
+.sl-markdown-content :not(pre) > code {
+ white-space: nowrap;
+}
+
+/* Landing feature cards: a small "more" link pinned to each card's bottom-
+ right, pointing at the relevant docs. Scoped via :has() so only cards that
+ carry the link get the flex/grow treatment (other Cards are untouched).
+ CardGrid stretches cards to equal height, so the links line up across a row. */
+.card .body:has(.card-more) {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+}
+.card-more {
+ margin-top: auto;
+ align-self: flex-end;
+ padding-top: 0.75rem;
+ font-size: var(--sl-text-sm);
+ font-weight: 600;
+ white-space: nowrap;
+ color: var(--sl-color-text-accent);
+ text-decoration: none;
+}
+.card-more:hover {
+ text-decoration: underline;
+}
+
/* Command prompt for simple-mode (`rdbms`) code blocks: a decorative "> "
before each command line so consecutive commands read as distinct entered
lines (advanced-mode `sql` blocks are left unprefixed). It is CSS ::before