Intro: split hero rail/figure + new site-map band

- .tab-lede--split: sticky left rail (title + lede + figure caption)
with the Pareto SVG promoted to a sibling figure on the right, so the
message stays in view while the chart reads as adjacent evidence.
- Pareto chart: tighter viewBox cropped to visible content, L-shape axis
lines replace the full frame, 275× speedup shaft split around a
centred on-axis label, italic units subtitle dropped.
- Replace .intro-guide-list with .intro-sitemap: full-width banded nav
of four numbered cards (Intro / DNA Lab / Carbon Recipe / Sandbox)
feeding the existing #primer/#dna-lab/#recipe/#sandbox routing.

Co-authored-by: Cursor <cursoragent@cursor.com>

assets/styles/section-intro.css

@@ -25,50 +25,337 @@
   --promoter-soft: rgba(184, 134, 44, 0.18);
 }
 
-/* --- Tab-navigation list (Demo / Model / Sandbox). Styled to mirror the
-       .banner-links pattern at the top of the page: mono / uppercase /
-       underline anchor with a small arrow on the right, green hover. The
-       <li> body uses normal prose styling so the link reads as a label
-       in front of an explanation. */
-.intro-guide-list {
-  list-style: disc;
-  padding-left: 22px;
-  margin: 32px 0 56px;
-  max-width: 720px;
-}
-.intro-guide-list li {
-  font-size: 14px;
-  line-height: 1.7;
-  color: var(--ink-soft);
-  margin-bottom: 6px;
+/* --- Hero · split layout -----------------------------------------------
+   Two-column variant of .tab-lede used by the Intro tab only. Editorial
+   composition: a centered text block on the left (eyebrow + big title +
+   short paragraph) parked next to the Pareto figure on the right. The
+   rail is vertically centered against the chart (align-items: center)
+   so neither side reads as anchored to the top edge — the two halves
+   share visual weight rather than fighting over it. The green left
+   rail accent inherited from .tab-lede__rail is dropped here: the title
+   already carries the editorial heft on its own.
+   Below 960px we collapse to one column; the chart needs the full
+   viewport width on narrow screens to stay readable. */
+.tab-lede--split {
+  display: grid;
+  /* 45 / 55 split between text rail and chart figure. The chart gets the
+     larger share so the Pareto plot keeps its decade ticks readable
+     without crushing the right-edge model labels. */
+  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
+  column-gap: 56px;
+  align-items: center;
+  /* Hero claims at least half of the viewport so the announcement +
+     headline chart reads as a proper landing block, not a header that
+     visitors scroll past on the first pixel. The columns share this
+     height via align-items: center, so neither side anchors to the top
+     edge of the band. */
+  min-height: 50vh;
+}
+.tab-lede--split .tab-lede__rail {
+  /* Drop the sticky behaviour and the green left rail accent — the rail
+     centers itself vertically in its column (via the grid's
+     align-items: center on the parent) but the prose stays left-aligned
+     so the long title doesn't read as a centred slogan. */
+  position: static;
+  border-left: none;
+  padding: 0;
+  margin: 0 auto;
+  max-width: 520px;
+  text-align: left;
+}
+.tab-lede__title {
+  /* Editorial headline in JetBrains Mono — matches the technical-mono
+     register used elsewhere on the page (CARBON wordmark subtitle, the
+     §-section labels, the chart axis ticks). Mono is wider per glyph
+     than Inter so we drop one size step (36 → 32) to keep the line
+     length comparable. Weight 500 lands between the page body (400)
+     and the wordmark (700), giving the deck enough heft to read as
+     the headline of the tab without overpowering the chart on the right. */
+  margin: 0 0 22px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 32px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  line-height: 1.15;
+  color: var(--ink);
 }
-.intro-guide-list li:last-child { margin-bottom: 0; }
-.intro-guide-list a {
-  font-family: "JetBrains Mono", monospace;
+.tab-lede--split .tab-lede__rail p {
+  margin: 0;
+  max-width: 460px;
+  font-size: 16px;
+  line-height: 1.55;
+}
+/* Figure caption that lives in the left-column rail rather than
+   under the chart on the right. Same size + colour as the original
+   under-chart figcaption (13px, #5b5b56) so it reads as a secondary,
+   descriptive note about the chart, a clear step down from the
+   16px announcement paragraph above it. No top divider — the size
+   and saturation drop alone are enough to separate it from the
+   paragraph above.
+   Selector includes p.tab-lede__figcaption to outrank the more general
+   .tab-lede--split .tab-lede__rail p rule above (which would otherwise
+   force this caption back up to 16px). */
+.tab-lede--split .tab-lede__rail p.tab-lede__figcaption {
+  margin-top: 18px;
+  max-width: 460px;
+  font-size: 13px;
+  line-height: 1.55;
+  color: #5b5b56;
+}
+.tab-lede--split .tab-lede__figure {
+  margin: 0;
+  max-width: none;
+  /* Keep the chart from ballooning past its readable size on very wide
+     viewports. The container.wide cap is 1200px, the rail eats ~520px
+     of that, leaving ~580px for the chart — well under 760px so the cap
+     is mostly a safety net. */
+  width: 100%;
+}
+.tab-lede--split .tab-lede__figure--pareto {
+  /* Drop the inherited .tab-lede__figure--pareto cap; the column already
+     sets the chart width. The chart's own viewBox handles aspect. */
+  max-width: none;
+  /* White card framing to match the .demo modules used everywhere else
+     on the page (see controls.css → .demo). Same background/border/padding
+     so the hero chart reads as part of the same family of figures rather
+     than a stray transparent SVG sitting on the paper background. */
+  background: #fff;
+  border: 1px solid #ddd;
+  padding: 24px;
+}
+@media (max-width: 960px) {
+  .tab-lede--split {
+    grid-template-columns: 1fr;
+    row-gap: 36px;
+    /* Stacked layout is naturally tall — drop the half-viewport floor
+       so the hero doesn't add extra dead space on top. */
+    min-height: auto;
+  }
+  .tab-lede--split .tab-lede__rail {
+    max-width: 720px;
+  }
+  .tab-lede--split .tab-lede__figure--pareto {
+    /* Tighter card padding on narrow viewports so the chart keeps its
+       readable inner width. */
+    padding: 16px;
+  }
+  .tab-lede__title { font-size: 30px; }
+}
+@media (max-width: 720px) {
+  /* The Pareto SVG sizes its text in viewBox user units (viewBox is
+     0 0 1000 600). When the chart renders at viewport width on a phone
+     (~360px), viewBox units map to ~0.36 screen pixels each, so 15-unit
+     ticks would render at ~5px — illegible. Bump every text element up
+     in viewBox units so the on-screen size lands ~10-13px on mobile,
+     comparable to the desktop rendering. */
+  .pareto-axis text { font-size: 24px; }
+  .pareto-axis-title { font-size: 28px; }
+  .pareto-label { font-size: 20px; }
+  .pareto-point--highlight .pareto-label { font-size: 24px; }
+  .pareto-indicator-text { font-size: 16px; }
+  .pareto-speedup-label { font-size: 44px; }
+}
+@media (max-width: 600px) {
+  .tab-lede__title { font-size: 24px; }
+  .tab-lede--split .tab-lede__rail p { font-size: 15px; }
+}
+@media (max-width: 480px) {
+  /* Very-narrow phones: bump chart labels one more notch + tighten the
+     hero rail's max-width so the prose doesn't kiss the viewport edge. */
+  .pareto-axis text { font-size: 28px; }
+  .pareto-label { font-size: 24px; }
+  .pareto-point--highlight .pareto-label { font-size: 28px; }
+  .pareto-speedup-label { font-size: 52px; }
+}
+
+/* --- Site map · full-width independent band ----------------------------
+   Hand-off block between the release hero and the bio primer. Sits
+   edge-to-edge in its own paper tone (slightly recessed vs the page) so
+   the visitor reads it as a deliberate "where to go next" signpost
+   rather than another prose paragraph. Four numbered cards (01..04)
+   sit on a 4-column grid, each with a mono uppercase title, an arrow
+   (↓ for the in-page primer anchor, → for the cross-tab links), and a
+   one-line gloss. Hover lifts the card colour to the green accent and
+   nudges the arrow.
+   Anchors still feed tabs.js's hashchange listener, identical to the
+   previous .intro-guide-list anchors — only the styling and structure
+   change. */
+.intro-sitemap {
+  margin: 64px 0 16px;
+  padding: 56px 32px 60px;
+  border-top: 1px solid var(--rule);
+  border-bottom: 1px solid var(--rule);
+}
+.intro-sitemap__inner {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+/* Three-tier centered heading: small green mono eyebrow "Site map" above
+   a large Inter title "What's inside" above a one-line gloss. Reads as
+   an editorial signpost (FT/distill.pub style) rather than a flat label.
+   The stack is centered to mirror the symmetric four-card grid below. */
+.intro-sitemap__heading {
+  text-align: center;
+  margin-bottom: 52px;
+}
+.intro-sitemap__eyebrow {
+  display: inline-block;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
   font-size: 11px;
   font-weight: 500;
-  letter-spacing: 0.12em;
+  letter-spacing: 0.22em;
   text-transform: uppercase;
+  color: var(--green);
+  margin-bottom: 16px;
+}
+.intro-sitemap__title {
+  margin: 0;
+  font-family: "Inter", "Helvetica Neue", sans-serif;
+  font-size: 40px;
+  font-weight: 400;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
   color: var(--ink);
+}
+.intro-sitemap__subtitle {
+  margin: 14px auto 0;
+  max-width: 520px;
+  font-family: "Inter", "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 1.55;
+  color: var(--ink-soft);
+}
+@media (max-width: 720px) {
+  .intro-sitemap__heading { margin-bottom: 36px; }
+  .intro-sitemap__title { font-size: 30px; }
+}
+.intro-sitemap__steps {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0;
+}
+.intro-sitemap__step { display: flex; }
+.intro-sitemap__link {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 8px 28px 8px 0;
+  margin-right: 28px;
+  border-right: 1px solid var(--rule);
   text-decoration: none;
-  border-bottom: 1px solid rgba(31, 31, 29, 0.25);
-  padding-bottom: 1px;
-  margin-right: 8px;
-  white-space: nowrap;
-  transition: color 0.15s, border-color 0.15s;
+  color: inherit;
+  transition: color 0.18s ease;
 }
-.intro-guide-list a:hover,
-.intro-guide-list a:focus-visible {
+.intro-sitemap__step:last-child .intro-sitemap__link {
+  border-right: none;
+  margin-right: 0;
+  padding-right: 0;
+}
+.intro-sitemap__num {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  color: var(--ink-faint);
+  margin-bottom: 28px;
+  transition: color 0.18s ease;
+}
+.intro-sitemap__label {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 18px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  line-height: 1.1;
+  color: var(--ink);
+  transition: color 0.18s ease;
+}
+.intro-sitemap__title { white-space: nowrap; }
+.intro-sitemap__arrow {
+  font-size: 18px;
+  font-weight: 400;
   color: var(--green);
-  border-bottom-color: var(--green);
-  outline: none;
+  transition: transform 0.18s ease, color 0.18s ease;
+  flex-shrink: 0;
 }
-.intro-guide-list a .arrow {
-  margin-left: 4px;
-  display: inline-block;
-  font-size: 10px;
-  letter-spacing: 0;
-  transform: translateY(-1px);
+.intro-sitemap__desc {
+  margin: 0;
+  font-family: "Inter", "Helvetica Neue", sans-serif;
+  font-size: 13px;
+  font-weight: 300;
+  line-height: 1.55;
+  color: var(--ink-soft);
+}
+.intro-sitemap__link:hover,
+.intro-sitemap__link:focus-visible { outline: none; }
+.intro-sitemap__link:hover .intro-sitemap__num,
+.intro-sitemap__link:focus-visible .intro-sitemap__num,
+.intro-sitemap__link:hover .intro-sitemap__label,
+.intro-sitemap__link:focus-visible .intro-sitemap__label,
+.intro-sitemap__link:hover .intro-sitemap__arrow,
+.intro-sitemap__link:focus-visible .intro-sitemap__arrow {
+  color: var(--green);
+}
+/* Move the arrow on the directional axis: → slides right, ↓ slides down.
+   Each step's nth-child sets which one applies — the first card has the
+   ↓ (in-page primer), the rest are cross-tab → links. */
+.intro-sitemap__step:first-child .intro-sitemap__link:hover .intro-sitemap__arrow,
+.intro-sitemap__step:first-child .intro-sitemap__link:focus-visible .intro-sitemap__arrow {
+  transform: translateY(3px);
+}
+.intro-sitemap__step:not(:first-child) .intro-sitemap__link:hover .intro-sitemap__arrow,
+.intro-sitemap__step:not(:first-child) .intro-sitemap__link:focus-visible .intro-sitemap__arrow {
+  transform: translateX(4px);
+}
+@media (max-width: 960px) {
+  .intro-sitemap { padding: 40px 24px 44px; }
+  .intro-sitemap__steps {
+    grid-template-columns: repeat(2, 1fr);
+    row-gap: 28px;
+  }
+  .intro-sitemap__link {
+    padding: 0 20px 0 0;
+    margin-right: 20px;
+  }
+  /* Right column items lose the right border (they're the row-end). */
+  .intro-sitemap__step:nth-child(2n) .intro-sitemap__link {
+    border-right: none;
+    margin-right: 0;
+    padding-right: 0;
+  }
+  .intro-sitemap__num { margin-bottom: 18px; }
+}
+@media (max-width: 600px) {
+  .intro-sitemap__steps {
+    grid-template-columns: 1fr;
+    row-gap: 0;
+  }
+  .intro-sitemap__link {
+    padding: 22px 0;
+    margin-right: 0;
+    border-right: none;
+    border-bottom: 1px solid var(--rule);
+  }
+  .intro-sitemap__step:nth-child(2n) .intro-sitemap__link {
+    /* override the 2-col mobile rule above */
+    border-right: none;
+  }
+  .intro-sitemap__step:last-child .intro-sitemap__link {
+    border-bottom: none;
+    padding-bottom: 4px;
+  }
+  .intro-sitemap__step:first-child .intro-sitemap__link {
+    padding-top: 4px;
+  }
+  .intro-sitemap__num { margin-bottom: 12px; }
 }
 
 /* --- Primer header: visually delimits where the optional background
@@ -76,9 +363,10 @@
        section-title so it sits at the same typographic weight as the
        headings inside each sub-row. */
 .intro-primer-heading {
+  /* No top border / padding here: the .intro-sitemap band above already
+     provides a hairline bottom border + breathing room as the visual
+     separator between the site map and the primer below. */
   margin: 24px 0 28px;
-  padding-top: 32px;
-  border-top: 1px solid #eee;
 }
 .intro-primer-heading .section-num { margin-bottom: 8px; }
 .intro-primer-heading h2 {
@@ -527,23 +815,43 @@
   max-width: 760px;
 }
 .pareto-chart {
+  /* The white card frame is now provided by the parent
+     .tab-lede__figure--pareto (matching the .demo modules used on the
+     rest of the page), so the SVG itself stays transparent — the inner
+     plot fill (.pareto-bg) and frame stroke (.pareto-frame) below are
+     left as no-ops to avoid double-drawing a second nested box inside
+     the figure card. */
   display: block;
   width: 100%;
   height: auto;
-  background: #ffffff;
-  border: 1px solid #cfcdbf;
-}
-.pareto-bg {
-  fill: #ffffff;
 }
+.pareto-bg { fill: none; }
+.pareto-frame { display: none; }
 
-/* Hairline frame at the same weight as the rest of the demo's
-   section borders — the chart reads as another paper card rather
-   than a heavy matplotlib export. */
-.pareto-frame {
-  fill: none;
+/* Axis lines · the L-shape (left + bottom) that replaces the dropped
+   rectangular frame. Same hairline weight as the old frame so the chart
+   keeps its editorial-paper register. */
+.pareto-axis-lines line {
   stroke: #cfcdbf;
   stroke-width: 1;
+  stroke-linecap: square;
+}
+
+/* Figcaption tag · small mono-uppercase eyebrow that prefixes the
+   descriptive sentence below the chart. Signals "this caption refers
+   to the figure above" without bloating the prose itself, and ties
+   the caption back to the technical-mono register used by the chart's
+   axis ticks and the page's section labels. */
+.pareto-figcaption-tag {
+  display: inline;
+  margin-right: 10px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--green);
+  white-space: nowrap;
 }
 
 /* Tick marks at the same hairline weight. Tick labels in JetBrains
@@ -556,7 +864,7 @@
 }
 .pareto-axis text {
   font-family: "JetBrains Mono", ui-monospace, monospace;
-  font-size: 13px;
+  font-size: 15px;
   fill: var(--ink-soft);
   font-feature-settings: "tnum";
 }
@@ -573,7 +881,7 @@
    "Throughput" carries the units in the muted ink-soft tone. */
 .pareto-axis-title {
   font-family: "Inter", "Helvetica Neue", sans-serif;
-  font-size: 18px;
+  font-size: 21px;
   font-weight: 600;
   fill: var(--ink);
   text-anchor: middle;
@@ -622,15 +930,20 @@
   fill: var(--ink);
 }
 .pareto-speedup-label {
-  font-family: "Inter", "Helvetica Neue", sans-serif;
-  font-size: 26px;
+  /* Mono + bold, sized so the "275×" reads as the chart's editorial
+     headline. The label sits on-axis (y matches the arrow shaft) and
+     the shaft is split in two segments around it (see demo.html), so
+     no paint-order halo is needed: the number occupies the gap
+     between the two arrow halves rather than overlaying a continuous
+     line. dominant-baseline: middle vertically centres the glyphs
+     on the same y-coord as the shaft endpoints. */
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 32px;
   font-weight: 700;
   fill: var(--ink);
   text-anchor: middle;
-  paint-order: stroke;
-  stroke: #ffffff;
-  stroke-width: 6px;
-  stroke-linejoin: round;
+  dominant-baseline: middle;
+  letter-spacing: -0.02em;
 }
 
 /* Data labels: plain text, no pill box. The paint-order stroke acts

demo.html

@@ -269,16 +269,32 @@
      section--two-col / .demo for visual parity with §1-§7. -->
 <div class="tab-panel active section--intro" id="panel-intro" data-tab="intro">
 
-  <div class="tab-lede">
+  <!-- Hero: two-column split. Left rail (eyebrow + announcement) is sticky
+       so the message stays in view while the visitor scrolls past the
+       Pareto figure on the right. The figure was previously stacked
+       beneath the text inside .tab-lede__rail; the split layout pulls
+       it out as a sibling so the two read as anchor + evidence. -->
+  <div class="tab-lede tab-lede--split">
     <div class="tab-lede__rail">
-      <span class="tab-lede__eyebrow">Release</span>
+      <h2 class="tab-lede__title">The fastest open-source foundation model for DNA.</h2>
       <p>
-        Today we're releasing <strong>Carbon</strong>, the fastest open-source foundation model
-        for DNA. Three model sizes (<em>500M</em>, <em>3B</em>, and <em>8B</em> parameters),
-        shipping with the full training code, the data pipeline, and the model weights.
-        Everything is open source on the Hugging Face Hub.
+        Today we're releasing <strong>Carbon</strong> — three model sizes
+        (<em>500M</em>, <em>3B</em>, and <em>8B</em> parameters), shipping with the full
+        training code, the data pipeline, and the model weights.
+        All open-source on the Hugging Face Hub.
       </p>
-      <!-- Pareto chart, drawn natively as inline SVG so the figure scales
+      <!-- Figure caption pulled out of the right-column .tab-lede__figure
+           so the descriptive sentence sits under the announcement prose
+           instead of dangling below the chart. The visual flow is
+           lede → context paragraph → figure caption, all in the same
+           column; the chart on the right reads as the visual evidence
+           the prose is referring to. -->
+      <p class="tab-lede__figcaption">
+        <span class="pareto-figcaption-tag">Fig · Benchmark</span>
+        Throughput (base pairs per second, log scale) vs win rate across open DNA foundation models. Carbon 3B matches Evo2 7B's win rate at roughly 275× the throughput.
+      </p>
+    </div>
+    <!-- Pareto chart, drawn natively as inline SVG so the figure scales
            sharply, picks up the page's typography, and can be tuned in
            CSS without a matplotlib re-export. Source data lives in
            pareto/pareto_data.csv; geometry mirrors the matplotlib
@@ -293,9 +309,20 @@
            Carbon points scale up + use a heavier label per the source
            script's HIGHLIGHT_LOGO_SCALE so the eye lands on them. -->
       <figure class="tab-lede__figure tab-lede__figure--pareto">
+        <!-- viewBox tightly cropped around the actual visible content
+             (rotated "Win rate (%)" Y title, "100" Y tick label, rightmost
+             data label "GENERator-v2 1.2B", and "Throughput" X title
+             descender). No internal margin is left inside the SVG itself —
+             the visual breathing around the chart is provided entirely by
+             the parent .tab-lede__figure--pareto's 24px card padding (see
+             section-intro.css), otherwise we'd be stacking SVG margins
+             onto CSS padding and the chart would read as floating inside
+             an oversized frame. The data coordinates further down still
+             use the original 1000×600 reference grid; only the visible
+             window is shifted/shrunk. -->
         <svg
           class="pareto-chart"
-          viewBox="0 0 1000 600"
+          viewBox="20 50 910 530"
           xmlns="http://www.w3.org/2000/svg"
           role="img"
           aria-labelledby="pareto-title pareto-desc"
@@ -306,6 +333,15 @@
           <!-- Plot interior. -->
           <rect class="pareto-bg" x="100" y="30" width="870" height="470"/>
 
+          <!-- Axis lines · L-shape (left + bottom) bordering the data
+               area. The full rectangular frame is dropped so the chart
+               sits transparent on the page; just the two lines that
+               anchor the ticks remain, the editorial chart minimum. -->
+          <g class="pareto-axis-lines">
+            <line x1="100" y1="30" x2="100" y2="500"/>
+            <line x1="100" y1="500" x2="970" y2="500"/>
+          </g>
+
           <!-- Y axis: linear win-rate %, ticks at 0/20/40/60/80/100. The
                plot range runs −12..108 (matches matplotlib padding) so
                the data points have headroom above 100 and below 0 for
@@ -369,14 +405,18 @@
             <text class="pareto-indicator-text" x="35" y="20">faster</text>
           </g>
 
-          <!-- 275× speedup arrow: starts just right of the Evo2 7B label
-               pill and lands just left of the Carbon 3B logo. y placed
-               between the two points (Evo2 7B at 64.3%, Carbon 3B at
-               59.5%) so it reads as level with both. -->
+          <!-- 275× speedup callout: a single horizontal arrow from
+               just-right-of Evo2 7B to just-left-of Carbon 3B, split in
+               two segments around a centred "275×" label that sits
+               on-axis. The label cuts the shaft instead of floating
+               above it, so the number reads as part of the arrow
+               itself. y=215 lands between Evo2 7B (64.3%) and Carbon
+               3B (59.5%) so the arrow reads level with both endpoints. -->
           <g class="pareto-speedup">
-            <line x1="290" y1="215" x2="822" y2="215"/>
+            <line x1="290" y1="215" x2="508" y2="215"/>
+            <line x1="618" y1="215" x2="822" y2="215"/>
             <polygon points="836,215 820,206 820,224"/>
-            <text class="pareto-speedup-label" x="556" y="200">275×</text>
+            <text class="pareto-speedup-label" x="563" y="218">275×</text>
           </g>
 
           <!-- Data points. Coordinates baked in from pareto_data.csv:
@@ -427,37 +467,82 @@
             <text class="pareto-label" x="871.0" y="255">Carbon 3B</text>
           </g>
 
-          <!-- Axis titles. Y title rotated -90 along the left margin, X
-               title + italic "Base pairs per second" subtitle below. -->
+          <!-- Axis titles. Y title rotated -90 along the left margin,
+               X title centred under the X axis. The italic "Base pairs
+               per second" subtitle that used to sit under "Throughput"
+               was removed: the units carry less weight than the
+               headline measure, and the chart reads cleaner without it. -->
           <text class="pareto-axis-title" transform="translate(34 265) rotate(-90)">Win rate (%)</text>
-          <text class="pareto-axis-title" x="535" y="558">Throughput</text>
-          <text class="pareto-axis-subtitle" x="535" y="582">Base pairs per second</text>
+          <text class="pareto-axis-title" x="535" y="572">Throughput</text>
         </svg>
-        <figcaption>Throughput (base pairs per second, log scale) vs win rate across open DNA foundation models. Carbon 3B matches Evo2 7B's win rate at roughly 275× the throughput.</figcaption>
       </figure>
-    </div>
   </div>
 
-  <div class="container wide">
+  <!-- Site map · full-width independent band that signposts the four
+       destinations of the page (Intro primer / DNA Lab / Carbon Recipe /
+       Sandbox). Pulled out of .container.wide so the band can extend
+       edge-to-edge with its own paper tone, reading as the deliberate
+       hand-off between the release lede above and the bio primer below.
+       Each step is a numbered card with a mono uppercase label and a
+       short gloss; the anchors still feed tabs.js's hashchange listener
+       (#primer scroll-anchors here, #dna-lab/#recipe/#sandbox switch tab). -->
+  <nav class="intro-sitemap" aria-label="Site map">
+    <div class="intro-sitemap__inner">
+      <header class="intro-sitemap__heading">
+        <span class="intro-sitemap__eyebrow">Site map</span>
+        <h2 class="intro-sitemap__title">What's inside</h2>
+        <p class="intro-sitemap__subtitle">Four ways to explore Carbon, from background to hands-on.</p>
+      </header>
+      <ol class="intro-sitemap__steps">
+        <li class="intro-sitemap__step">
+          <a class="intro-sitemap__link" href="#primer">
+            <span class="intro-sitemap__num">01</span>
+            <span class="intro-sitemap__label">
+              <span class="intro-sitemap__title">Intro</span>
+              <span class="intro-sitemap__arrow" aria-hidden="true">↓</span>
+            </span>
+            <span class="intro-sitemap__desc">A short primer on the basics of genetics — the alphabet Carbon reads.</span>
+          </a>
+        </li>
+        <li class="intro-sitemap__step">
+          <a class="intro-sitemap__link" href="#dna-lab">
+            <span class="intro-sitemap__num">02</span>
+            <span class="intro-sitemap__label">
+              <span class="intro-sitemap__title">DNA Lab</span>
+              <span class="intro-sitemap__arrow" aria-hidden="true">→</span>
+            </span>
+            <span class="intro-sitemap__desc">Live interactions with the 3B checkpoint: explore what the model can do.</span>
+          </a>
+        </li>
+        <li class="intro-sitemap__step">
+          <a class="intro-sitemap__link" href="#recipe">
+            <span class="intro-sitemap__num">03</span>
+            <span class="intro-sitemap__label">
+              <span class="intro-sitemap__title">Carbon Recipe</span>
+              <span class="intro-sitemap__arrow" aria-hidden="true">→</span>
+            </span>
+            <span class="intro-sitemap__desc">How Carbon was trained: tokenizer, loss, dataset, and results.</span>
+          </a>
+        </li>
+        <li class="intro-sitemap__step">
+          <a class="intro-sitemap__link" href="#sandbox">
+            <span class="intro-sitemap__num">04</span>
+            <span class="intro-sitemap__label">
+              <span class="intro-sitemap__title">Sandbox</span>
+              <span class="intro-sitemap__arrow" aria-hidden="true">→</span>
+            </span>
+            <span class="intro-sitemap__desc">Run Carbon on your own DNA sequences, end-to-end.</span>
+          </a>
+        </li>
+      </ol>
+    </div>
+  </nav>
 
-    <!-- Tab-navigation list. Anchor hrefs feed into tabs.js's hashchange
-         listener, which calls setTab on the matched tab name, same path
-         the banner buttons take. Mono / uppercase styling mirrors the
-         banner-links pattern up in the hero. -->
-    <ul class="intro-guide-list">
-      <li><a href="#primer">Intro<span class="arrow" aria-hidden="true">↓</span></a>
-        continue reading to learn the basics of genetics.</li>
-      <li><a href="#dna-lab">DNA Lab<span class="arrow" aria-hidden="true">→</span></a>
-        explore what the model can do, with live interactions against the 3B checkpoint.</li>
-      <li><a href="#recipe">Carbon Recipe<span class="arrow" aria-hidden="true">→</span></a>
-        learn how Carbon was trained: tokenizer, loss, dataset, results.</li>
-      <li><a href="#sandbox">Sandbox<span class="arrow" aria-hidden="true">→</span></a>
-        run Carbon on your own DNA sequences.</li>
-    </ul>
+  <div class="container wide">
 
     <!-- Optional bio primer below. Subsections are §1-§5 within this tab.
-         id="primer" so the "Intro → continue reading…" link in the guide
-         list above can scroll-anchor here via tabs.js's SECTION_TO_TAB
+         id="primer" so the "Intro → continue reading…" link in the
+         site map above can scroll-anchor here via tabs.js's SECTION_TO_TAB
          routing. -->
     <div class="intro-primer-heading" id="primer">
       <div class="section-num">Background</div>