docs: update website remote mobile story

1 files changed, 144 insertions, 0 deletions

diff --git a/website/css/style.css b/website/css/style.css
index 54061ec9..bf7216aa 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -1,3 +1,14 @@
+@font-face {
+    font-family: "JetBrains Mono";
+    font-style: normal;
+    font-weight: 400 700;
+    font-display: block;
+    src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
+        U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+        U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 *,
 *::before,
 *::after {
@@ -63,6 +74,13 @@ body {
     overflow-x: clip;
 }
 
+code,
+pre,
+kbd,
+samp {
+    font-family: inherit;
+}
+
 a {
     color: var(--text);
     text-decoration: none;
@@ -386,6 +404,10 @@ a:hover {
     font-weight: 500;
 }
 
+.prose-block p + p {
+    margin-top: 1rem;
+}
+
 /* ── Detach flow ── */
 .detach-flow {
     background: var(--mantle);
@@ -416,6 +438,113 @@ a:hover {
     color: var(--text-faint);
 }
 
+/* ── Access modes ── */
+.access-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 1.5rem;
+}
+
+.access-card {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    background: var(--mantle);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 1.25rem;
+}
+
+.access-kicker {
+    margin-bottom: 0.75rem;
+    font-size: 0.65rem;
+    font-weight: 600;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-faint);
+}
+
+.access-card h3 {
+    margin-bottom: 0.65rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--white);
+}
+
+.access-card p {
+    margin-bottom: 1rem;
+    font-size: 0.8rem;
+    line-height: 1.7;
+    color: var(--text-dim);
+}
+
+.mini-flow {
+    display: grid;
+    align-content: start;
+    gap: 0.35rem;
+    min-height: 3.6rem;
+    margin-top: auto;
+    padding-top: 0.85rem;
+    border-top: 1px solid var(--border);
+    font-size: 0.74rem;
+    line-height: 1.6;
+    overflow-wrap: anywhere;
+}
+
+.mini-flow .prompt {
+    color: var(--green);
+}
+.mini-flow .cmd {
+    color: var(--white);
+}
+.mini-flow .key {
+    color: var(--blue);
+}
+.mini-flow .comment,
+.mini-flow .dim {
+    color: var(--text-faint);
+}
+
+/* ── Mobile proof ── */
+.mobile-proof {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 260px));
+    justify-content: center;
+    gap: 1.25rem;
+    margin-top: 1.75rem;
+}
+
+.phone-shot {
+    min-width: 0;
+}
+
+.phone-shot-frame {
+    padding: 0.75rem;
+    border: 1px solid var(--border);
+    border-radius: 28px;
+    background:
+        radial-gradient(circle at 50% 0%, rgba(137, 180, 250, 0.08), transparent 38%),
+        var(--mantle);
+    box-shadow: inset 0 0 0 1px rgba(205, 214, 244, 0.025);
+}
+
+.phone-shot img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--border-bright);
+    border-radius: 20px;
+    background: var(--base);
+}
+
+.phone-shot figcaption {
+    margin-top: 0.65rem;
+    font-size: 0.7rem;
+    color: var(--text-faint);
+    text-align: center;
+}
+
 /* ── Awareness ── */
 .awareness-split {
     display: grid;
@@ -688,6 +817,21 @@ a:hover {
     .awareness-panel-img {
         width: min(100%, 220px);
     }
+    .access-grid {
+        grid-template-columns: 1fr;
+    }
+    .mobile-proof {
+        grid-template-columns: minmax(0, 260px);
+        justify-content: center;
+        gap: 1rem;
+    }
+    .phone-shot-frame {
+        padding: 0.45rem;
+        border-radius: 20px;
+    }
+    .phone-shot img {
+        border-radius: 15px;
+    }
     .api-grid {
         grid-template-columns: 1fr;
     }