Apply the edits below verbatim to web/src/App.tsx and web/src/styles.css, change nothing else in web/, then REBUILD AND PUBLISH: npm --prefix web run build as README.md says, replace dist/index.html and dist/assets/, remove unused hashed assets, update README.md and VALIDATION.md. Without a rebuilt dist/ the live site does not change. Do not write or deploy any contract.

WHAT. Top bar and footer aligned with the boxes; body 14px; on phones a 24px tagline and a cleaner brand line; the Squeekchain block as a third stat in The wheel; Sample cards titles centered over their cards; even odds columns; muted How it works; compact, evenly spaced Questions; small-print footer on phones.

Each line to replace occurs exactly once.

WEB/SRC/APP.TSX

(1) replace

        <span className="brand-line">WHEEL MILES · RUN CARDS · SEPOLIA</span>

with

        <span className="brand-line">WHEEL MILES · <span className="nowrap">RUN CARDS · SEPOLIA</span></span>

(2) replace

        <p className="tagline">Hold $MILES. Join the run.<br /><span className="blue">Get a card when it ends.</span></p>

with

        <p className="tagline">Hold $MILES. Join the run. <span className="blue">Get a card when it ends.</span></p>

(3) replace

          <dl className="stats stats-2">

            <Stat label="Speed" value={live ? `${live.kmh.toFixed(1)} km/h` : "…"} />

            <Stat label="Settled round" value={chain ? fmtInt(chain.settledRound) : "…"} />

          </dl>

          <p className="small muted">{chain ? <>Squeekchain block {fmtInt(chain.blockHeight)}</> : chainErr ? "Settled round unavailable." : "Reading Sepolia…"}</p>

with

          <dl className="stats stats-3">

            <Stat label="Speed" value={live ? `${live.kmh.toFixed(1)} km/h` : "…"} />

            <Stat label="Settled round" value={chain ? fmtInt(chain.settledRound) : "…"} />

            <Stat label="Chain block" value={chain ? fmtInt(chain.blockHeight) : "…"} />

          </dl>

WEB/SRC/STYLES.CSS

(1) replace

--fs-body: 15px; /* body */

with

--fs-body: 14px; /* body */

(2) replace

img { max-width: 100%; }

with

img { max-width: 100%; }

.nowrap { white-space: nowrap; }

(3) replace

.top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s3); grid-template-columns: none; }

with

.top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s4); grid-template-columns: none; }

(4) replace

@media (max-width: 559px) { .tagline { font-size: 28px; } }

with

@media (max-width: 559px) { .tagline { font-size: 24px; } }

.tagline .blue { display: block; text-wrap: balance; }

(5) replace

@media (min-width: 640px) { .stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

with

@media (min-width: 640px) { .stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

(6) replace

.row-title { font-size: var(--fs-small); font-weight: 400; line-height: 1.55; }

with

.row-title { font-size: var(--fs-small); font-weight: 400; line-height: 1.55; text-align: center; }

(7) replace

@media (min-width: 640px) { .sample-row .card-grid { grid-template-columns: repeat(4, minmax(0, 140px)); } }

with

@media (min-width: 640px) { .sample-row .card-grid { grid-template-columns: repeat(4, minmax(0, 140px)); } .sample-row { max-width: calc(4 * 140px + 3 * var(--s3)); } }

(8) replace

@media (max-width: 639px) { .sample-row .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .sample .rarity { font-size: var(--fs-label); } }

with

@media (max-width: 639px) { .sample-row .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .sample .rarity { font-size: var(--fs-label); } .row-title { font-size: var(--fs-ui); } }

(9) replace

.odds td { font: 700 var(--fs-body) / 1.3 var(--font-num); }

with

.odds td { font: 700 var(--fs-body) / 1.3 var(--font-num); }

.odds thead th:not(:first-child), .odds td { width: 13%; }

(10) replace

.odds thead th:not(:first-child), .odds td { width: 1%; white-space: nowrap; text-align: right; }

with

.odds thead th:not(:first-child), .odds td { width: 1%; white-space: nowrap; text-align: center; }

(11) replace

.odds td { font-size: 13px; }

with

.odds td { font-size: 13px; }

#odds > .small { font-size: var(--fs-label); line-height: 1.5; }

(12) replace

.steps { margin: 0; padding-left: 1.4em; display: grid; gap: var(--s3); }

with

.steps { margin: 0; padding-left: 1.4em; display: grid; gap: var(--s3); color: var(--muted); }

(13) replace

details { border-top: 1px solid var(--line); padding: var(--s2) 0; }

with

@media (max-width: 559px) { .steps { font-size: 13px; line-height: 1.5; gap: var(--s2); } }

#faq { row-gap: 0; }

#faq .box-head { margin-bottom: var(--s2); }

details { border-top: 1px solid var(--line); padding: 6px 0; }

(14) replace

summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }

with

details:last-of-type { padding-bottom: 0; }

summary { cursor: pointer; font-weight: 700; font-size: 13px; min-height: 28px; display: flex; align-items: center; }

(15) replace

details p { color: var(--muted); font-size: var(--fs-small); margin-top: var(--s1); }

with

details p { color: var(--muted); font-size: 13px; margin: 0 0 var(--s1); }

(16) replace

.foot { display: grid; gap: var(--s2); margin-top: var(--s5); padding-inline: var(--s1); }

with

.foot { display: grid; gap: var(--s2); margin-top: var(--s5); padding-inline: calc(var(--s4) + 1px); }

(17) replace

.links a { display: inline-block; padding-block: var(--s1); }

with

.links a { display: inline-block; padding-block: var(--s1); }

@media (max-width: 559px) { .foot { gap: var(--s1); } .links { font-size: var(--fs-ui); gap: 0 var(--s4); } .foot .small { font-size: var(--fs-label); } }

CHECK the rebuilt export. 375px: logo, Connect, boxes and footer share the same edges; The wheel shows Speed, Settled round, Chain block in one row; Sample cards titles centered over their cards; odds one row per run, each percentage centered under its header; no sideways scroll. 1280px: equal top boxes, equal odds columns. dist/index.html loads a new index-*.js.