site: "what it has" is a rail you move along, not a wall you skim

Eleven cards in a grid is a list people stop reading somewhere around the
fourth one. A row you move through is one you go along, and the section is a
survey rather than a comparison -- nothing in it needs to be read beside
anything else, which is the test for whether a grid was carrying information
or just filling space.

So it is a `.nv-scroller`: snapping, hidden scrollbar, arrows that appear only
at the end that has something behind it, and an edge fade that says "more this
way" without a scrollbar having to. All of that is the component's.

**This site's part is one declaration.** `--nv-scroller-item: 21rem`, because
18rem is a width for a card carrying a line and these carry a paragraph. I had
also written `align-self: stretch` to make the heights match, then checked:
they already do, because a flex row stretches by default. The rule came back
out -- restating something the system already guarantees is exactly the drift
the split between Niveus and `app.css` exists to prevent.

The honest cost: a reader who does not scroll sees three cards rather than
eleven, and the section's own claim ("every card marked runs is in the tree")
is about all of them. The fade and the arrows are what pay for that, and they
are the reason this is a scroller rather than a row with a scrollbar.

Verified in a browser: 11 items, equal 256px heights with no rule of ours,
`data-nv-at-start` set and `data-nv-at-end` clear on load, and the arrows page
the rail and swap over as it reaches each end.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

docs/Website/app.css

@@ -527,3 +527,16 @@
 .doc li + li {
   margin-block-start: var(--nv-space-2);
 }
+
+/* --- The feature rail --------------------------------------------------------- */
+/*
+   One declaration, because the component already does the rest: the equal
+   heights are the flex default, the snapping, the hidden scrollbar and the
+   fade that marks which end has more behind it are all .nv-scroller's. The
+   only thing it cannot know is how wide a card of *this* content wants to be,
+   and 18rem is a line where these carry a paragraph.
+*/
+
+.features {
+  --nv-scroller-item: 21rem;
+}

docs/Website/index.html

@@ -246,7 +246,13 @@
     </p>
   </div>
 
-  <div class="nv-card-grid">
+  <!-- A rail rather than a grid. Eleven cards stacked into a wall is a list
+       you skim and stop reading; a row you move through is one you go along.
+       The section is a survey, not a comparison -- nothing here needs to be
+       read beside anything else, which is the test for whether a grid was
+       carrying information or just filling space. -->
+  <div class="nv-scroller-frame" data-nv-scroller>
+    <div class="nv-scroller features">
     <article class="nv-card">
       <div class="nv-card__header">
         <h3 class="nv-card__title"><img class="cardmark" src="Assets/uberblock.svg" alt="">SchFS</h3>
@@ -386,6 +392,20 @@
       </div>
     </article>
     </div>
+
+    <button class="nv-button nv-button--icon nv-button--float" data-nv-scroll="prev" aria-label="Previous">
+      <svg class="nv-button__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M14 6l-6 6 6 6" stroke="currentColor" stroke-width="2"
+              stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </button>
+    <button class="nv-button nv-button--icon nv-button--float" data-nv-scroll="next" aria-label="Next">
+      <svg class="nv-button__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M10 6l6 6-6 6" stroke="currentColor" stroke-width="2"
+              stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </button>
+  </div>
 </section>
 
 <!-- ====================================================================== -->