fix: Fixed site mobile width

site/app/globals.css

@@ -217,10 +217,13 @@ code {
     grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
 }
 
+/* minmax(0, …) rather than a bare 1fr: a plain fr track is min-content floored,
+   so one unshrinkable child (a form control, a long mono string) widens the
+   column past the rail and scrolls the whole page sideways. */
 @media (max-width: 840px) {
     .split,
     .split--even {
-        grid-template-columns: 1fr;
+        grid-template-columns: minmax(0, 1fr);
     }
 }
 
@@ -293,8 +296,7 @@ code {
 }
 
 @media (max-width: 900px) {
-    .nav__links,
-    .nav__cta {
+    .nav__links {
         display: none;
     }
 
@@ -314,7 +316,10 @@ code {
     padding-block: 0.5rem 1rem;
 }
 
-.drawer a {
+/* :not(.btn) matters. Two class selectors outrank .btn--solid's one, so without
+   it the drawer's call to action takes --ink-2 on the accent fill and the row
+   rules meant for the links. */
+.drawer a:not(.btn) {
     text-decoration: none;
     color: var(--ink-2);
     padding: 0.6rem 0;
@@ -852,6 +857,21 @@ code {
     font-size: 0.93rem;
 }
 
+/* The key column costs a fixed 8ch or more, which on a phone leaves the prose
+   in a strip barely wide enough to read. Below this width the key becomes a
+   label above its own paragraph instead. */
+@media (max-width: 560px) {
+    .spec {
+        grid-template-columns: 1fr;
+        gap: 0.3rem;
+    }
+
+    .spec__k {
+        padding-top: 0;
+        min-width: 0;
+    }
+}
+
 /* ---------- pricing ---------- */
 
 .plans {
@@ -945,6 +965,28 @@ code {
     margin-top: 2.4rem;
 }
 
+/* The comparison table is wider than a phone by design, and a table that scrolls
+   with no scrollbar drawn looks like a table with two columns. Say so. */
+.scroll__hint {
+    display: none;
+    font-family: var(--mono);
+    font-size: var(--s--1);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--ink-3);
+    margin-top: 2.4rem;
+}
+
+@media (max-width: 700px) {
+    .scroll__hint {
+        display: block;
+    }
+
+    .scroll__hint + .scroll {
+        margin-top: 0.7rem;
+    }
+}
+
 table.cmp {
     width: 100%;
     border-collapse: collapse;
@@ -1015,6 +1057,10 @@ table.cmp {
     font-size: 0.79rem;
 }
 
+/* min-width: 0 is load-bearing on mobile. A bare <input> carries an intrinsic
+   width of roughly 20 characters, and width: 100% does not lower it, so the
+   control sets the min-content width of every ancestor and drags the page wider
+   than the viewport. */
 .field input,
 .field select,
 .field textarea {
@@ -1026,6 +1072,7 @@ table.cmp {
     border-radius: 3px;
     padding: 0.6rem 0.72rem;
     width: 100%;
+    min-width: 0;
 }
 
 .field textarea {