@tokenoftrust/storefront-runner 1.3.4-rc.4 → 1.4.0

package/apps/storefront/src/pages/auth/login.astro

@@ -11,6 +11,10 @@
  * reach the browser. Inline style carries the per-request CSP nonce.
  */
 import { normalizeEmailHint } from "@/lib/privacy/emailHint";
+// Self-hosted web fonts (audit finding 6) — same-origin @fontsource, replacing
+// the render-blocking fonts.googleapis.com stylesheet. Covers Plus Jakarta Sans,
+// Inter, and JetBrains Mono used by this page's inline styles.
+import "@/styles/fonts.css";
 
 export const prerender = false;
 
@@ -25,6 +29,19 @@ const next = (() => {
   return n.startsWith("/") && !n.startsWith("//") ? n : "/";
 })();
 
+// RFC 9470 step-up: tot core told /api/auth/verify (or /api/auth/magic-exchange,
+// which redirects to /auth/magic instead) that it needs a fresher credential
+// before it will complete sign-in. `reason` is distinct from `error` — see
+// `loginRedirect` in `@/lib/auth/route`.
+const reason = url.searchParams.get("reason");
+const requiredAcr = url.searchParams.get("requiredAcr") ?? "";
+const stepUpRequired = reason === "step-up-required";
+const successPending = reason === "success-pending";
+const ACR_LABELS: Record<string, string> = {
+  "tot:aal:sms": "a text message (SMS) code",
+};
+const stepUpFactorLabel = requiredAcr ? (ACR_LABELS[requiredAcr] ?? "an additional verification step") : "an additional verification step";
+
 const ERROR_MESSAGES: Record<string, string> = {
   bad_email: "That email doesn't look right — please try again.",
   unconfigured: "Sign-in isn't available right now. Please try again shortly.",
@@ -32,6 +49,7 @@ const ERROR_MESSAGES: Record<string, string> = {
   expired: "That code has expired — request a fresh one.",
   too_many_attempts: "Too many attempts. Request a new code to continue.",
   verify_failed: "We couldn't verify your sign-in. Please request a fresh code and try again.",
+  error: "We couldn't verify that. Please try again.",
 };
 const errorMessage = errorCode ? (ERROR_MESSAGES[errorCode] ?? "Something went wrong — try again.") : null;
 // A stale/failed code should drop back to the email step so a new code can be requested.
@@ -54,59 +72,166 @@ if (devMode) {
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex, nofollow" />
     <title>Sign in — Regulated Storefront by Token of Trust©</title>
+    {/* Web fonts are self-hosted via `@/styles/fonts.css` (imported above). */}
     <style nonce={cspNonce}>
-      :root { color-scheme: light dark; }
+      /* storefront.tokenoftrust.store visual system — the code-entry door wears the
+         same skin as the marketing storefront it belongs to (in lockstep with the
+         magic-link landing, auth/magic.astro): warm cream + deep navy, the signature
+         teal→blue gradient (--grad), Plus Jakarta / Inter / JetBrains. Token values
+         mirror /tenants/home/pages/storefront.css. Theme via the triple: :root
+         default light, @media dark (the site's dark-hero palette), and [data-theme]. */
+      :root {
+        --bg: #faf8f4; --surface: #ffffff;
+        --ink: #10294b; --ink-2: #1b2a40; --muted: #4d5a70; --faint: #8593a8;
+        --accent: #0d9391; --accent-ink: #0b6360; --accent-wash: #e4f4f2; --accent-line: #c1e7e2;
+        --border: #e6e2d9;
+        --warn: #bf3d2c; --warn-wash: #fbecea; --warn-line: #f0ccc6;
+        --grad: linear-gradient(115deg, #0d9391, #3b82c4);
+        --sh: 0 18px 50px rgba(16, 41, 75, .13);
+        --display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+        --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+        --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+        color-scheme: light;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg: #121118; --surface: #1b1a26;
+          --ink: #f3f5f9; --ink-2: #c7cede; --muted: #98a1b5; --faint: #6f7994;
+          --accent: #5fe0cf; --accent-ink: #7fe3d6; --accent-wash: #10302d; --accent-line: #1f524c;
+          --border: #2a2836;
+          --warn: #f2857f; --warn-wash: #2a1414; --warn-line: #5a2626;
+          --grad: linear-gradient(115deg, #0d9391, #3b82c4);
+          --sh: 0 18px 44px -18px rgba(0, 0, 0, .6);
+          color-scheme: dark;
+        }
+      }
+      :root[data-theme="dark"] {
+        --bg: #121118; --surface: #1b1a26;
+        --ink: #f3f5f9; --ink-2: #c7cede; --muted: #98a1b5; --faint: #6f7994;
+        --accent: #5fe0cf; --accent-ink: #7fe3d6; --accent-wash: #10302d; --accent-line: #1f524c;
+        --border: #2a2836;
+        --warn: #f2857f; --warn-wash: #2a1414; --warn-line: #5a2626;
+        --grad: linear-gradient(115deg, #0d9391, #3b82c4);
+        --sh: 0 18px 44px -18px rgba(0, 0, 0, .6);
+        color-scheme: dark;
+      }
+      :root[data-theme="light"] {
+        --bg: #faf8f4; --surface: #ffffff;
+        --ink: #10294b; --ink-2: #1b2a40; --muted: #4d5a70; --faint: #8593a8;
+        --accent: #0d9391; --accent-ink: #0b6360; --accent-wash: #e4f4f2; --accent-line: #c1e7e2;
+        --border: #e6e2d9;
+        --warn: #bf3d2c; --warn-wash: #fbecea; --warn-line: #f0ccc6;
+        --grad: linear-gradient(115deg, #0d9391, #3b82c4);
+        --sh: 0 18px 50px rgba(16, 41, 75, .13);
+        color-scheme: light;
+      }
+
       * { box-sizing: border-box; }
       body {
-        font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
         margin: 0; min-height: 100vh; display: grid; place-items: center;
-        padding: 2rem 1.25rem; background: #f5f4f0; color: #1c1c1c;
-      }
-      @media (prefers-color-scheme: dark) {
-        body { background: #14141a; color: #ececf1; }
+        padding: 2rem 1.25rem;
+        background:
+          radial-gradient(34rem 18rem at 92% -8%, var(--accent-wash) 0%, transparent 60%),
+          var(--bg);
+        background-repeat: no-repeat;
+        color: var(--ink-2); font-family: var(--body); font-size: 15px; line-height: 1.6;
+        letter-spacing: -.011em; -webkit-font-smoothing: antialiased;
       }
       .card {
-        width: 100%; max-width: 26rem; background: #fff; border: 1px solid #e6e4de;
-        border-radius: 14px; padding: 2rem 1.75rem; box-shadow: 0 6px 24px rgba(0,0,0,.06);
+        width: 100%; max-width: 26rem; background: var(--surface);
+        border: 1px solid var(--accent-line); border-radius: 20px;
+        padding: 2.1rem 1.9rem 1.9rem; position: relative; overflow: hidden;
+        box-shadow: var(--sh); animation: rise .5s cubic-bezier(.2, .9, .3, 1) both;
+      }
+      .card::before {
+        content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
+        background: var(--grad);
+      }
+      @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+
+      .mark {
+        width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
+        color: #fff; background: var(--grad);
+        box-shadow: 0 8px 20px -6px rgba(13, 147, 145, .6); position: relative; margin: 0 0 1.15rem;
+      }
+      .mark::after {
+        content: ""; position: absolute; inset: -5px; border-radius: 17px;
+        border: 1.5px solid var(--accent); opacity: 0; animation: halo 2.8s ease-in-out infinite;
+      }
+      @keyframes halo { 0%, 100% { opacity: 0; transform: scale(.96); } 50% { opacity: .5; transform: scale(1.04); } }
+      .mark svg { width: 24px; height: 24px; }
+
+      .eyebrow {
+        font-family: var(--mono); font-size: .66rem; font-weight: 600; text-transform: uppercase;
+        letter-spacing: .13em; color: var(--accent-ink); margin: 0 0 .55rem;
+      }
+      h1 {
+        font-family: var(--display); font-weight: 800; letter-spacing: -.025em; color: var(--ink);
+        font-size: 1.55rem; margin: 0 0 .5rem; text-wrap: balance;
+      }
+      .sub { color: var(--muted); font-size: .95rem; line-height: 1.55; margin: 0 0 1.4rem; }
+      label {
+        display: block; font-family: var(--mono); font-size: .66rem; font-weight: 600;
+        text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin: 0 0 .4rem;
       }
-      @media (prefers-color-scheme: dark) {
-        .card { background: #1e1e28; border-color: #33333f; box-shadow: none; }
-      }
-      .eyebrow { font: 600 .68rem/1 ui-monospace, monospace; letter-spacing: .12em;
-        text-transform: uppercase; color: #8a7f66; margin: 0 0 .75rem; }
-      h1 { font-size: 1.4rem; letter-spacing: -.01em; margin: 0 0 .4rem; }
-      .sub { color: #6a6a6a; margin: 0 0 1.5rem; font-size: .95rem; }
-      @media (prefers-color-scheme: dark) { .sub { color: #a2a2ad; } }
-      label { display: block; font-weight: 600; font-size: .82rem; margin: 0 0 .4rem; }
       input[type=email], input[type=text] {
-        width: 100%; padding: .7rem .8rem; font-size: 1rem; border-radius: 9px;
-        border: 1px solid #cfccc4; background: #fff; color: inherit;
+        width: 100%; border: 1px solid var(--border); border-radius: 11px;
+        padding: .8rem .85rem; color: var(--ink); background: var(--bg);
+        font: 600 .95rem/1.35 var(--body);
       }
-      @media (prefers-color-scheme: dark) {
-        input[type=email], input[type=text] { background: #14141a; border-color: #40404d; }
+      input[type=email]:focus-visible, input[type=text]:focus-visible {
+        outline: 2px solid var(--accent); outline-offset: 2px;
+      }
+      input[type=text].code {
+        letter-spacing: .4em; font: 600 1.25rem var(--mono); text-align: center;
       }
-      input[type=text].code { letter-spacing: .4em; font: 600 1.25rem ui-monospace, monospace; text-align: center; }
       button {
-        width: 100%; margin-top: 1rem; padding: .75rem 1rem; border: 0; border-radius: 9px;
-        background: #1a1a1a; color: #fff; font-weight: 600; font-size: .95rem; cursor: pointer;
-      }
-      @media (prefers-color-scheme: dark) { button { background: #ececf1; color: #14141a; } }
-      button:hover { opacity: .92; }
-      .err { background: #fdecec; border: 1px solid #f5c2c2; color: #9a1c1c;
-        border-radius: 9px; padding: .6rem .8rem; font-size: .88rem; margin: 0 0 1.15rem; }
-      @media (prefers-color-scheme: dark) { .err { background: #3a1f22; border-color: #6b2f34; color: #f6b9b9; } }
-      .dev { background: #eef4ff; border: 1px solid #c3d4f5; color: #234; border-radius: 9px;
-        padding: .6rem .8rem; font-size: .82rem; margin: 0 0 1.15rem; }
-      .dev code { font: 600 .8em ui-monospace, monospace; }
-      @media (prefers-color-scheme: dark) { .dev { background: #1b2740; border-color: #2f4468; color: #cfe0ff; } }
-      .note { font-size: .82rem; color: #8a8a8a; margin: 1.1rem 0 0; }
-      .who { font-weight: 600; }
-      a { color: inherit; }
-      .foot { margin-top: 1.5rem; font-size: .72rem; color: #9a9a9a; text-align: center; }
+        width: 100%; margin-top: 1rem; display: inline-flex; align-items: center;
+        justify-content: center; gap: .55rem; font-family: var(--display); font-weight: 700;
+        font-size: 1rem; color: #fff; background: var(--grad); border: 0; border-radius: 999px;
+        padding: .9rem 1.3rem; cursor: pointer; box-shadow: 0 10px 24px rgba(13, 147, 145, .32);
+        transition: transform .12s, box-shadow .12s, filter .12s;
+      }
+      button:hover { transform: translateY(-1px); filter: saturate(1.08); box-shadow: 0 14px 30px rgba(13, 147, 145, .4); }
+      button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+      button svg { width: 17px; height: 17px; }
+      /* Quiet secondary action (e.g. "resend SMS code") — a text-link-weight button
+         so it doesn't compete with the card's one primary gradient CTA. */
+      .btn-quiet {
+        width: auto; margin: 0; background: none; box-shadow: none; border: 0;
+        color: var(--accent-ink); font: 600 .85rem var(--display); padding: 0; cursor: pointer;
+      }
+      .btn-quiet:hover { transform: none; filter: none; text-decoration: underline; }
+      .err {
+        display: flex; gap: .55rem; align-items: flex-start; background: var(--warn-wash);
+        border: 1px solid var(--warn-line); color: var(--warn); border-radius: 11px;
+        padding: .75rem .9rem; font-size: .9rem; line-height: 1.5; margin: 0 0 1.15rem;
+      }
+      .dev {
+        background: var(--accent-wash); border: 1px solid var(--accent-line); color: var(--ink-2);
+        border-radius: 11px; padding: .65rem .85rem; font-size: .82rem; line-height: 1.5; margin: 0 0 1.15rem;
+      }
+      .dev code { font: 600 .8em var(--mono); color: var(--accent-ink); }
+      .note { font-size: .82rem; color: var(--faint); margin: 1.15rem 0 0; }
+      .note a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
+      .note a:hover { text-decoration: underline; }
+      .note a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
+      .who { font-weight: 600; color: var(--ink); }
+      .foot {
+        margin-top: 1.5rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .04em;
+        color: var(--faint); text-align: center;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .card, .mark::after { animation: none !important; }
+        button { transition: none; }
+      }
     </style>
   </head>
   <body>
     <main class="card">
+      <span class="mark" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none"><path d="M12 2.5 20 6v6c0 4.6-3.2 7.9-8 9.5-4.8-1.6-8-4.9-8-9.5V6l8-3.5Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="m8.5 12 2.4 2.4L15.8 9.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </span>
       <p class="eyebrow">Token of Trust© · Regulated Storefront</p>
       {devMode && (devAuthOn ? (
         <p class="dev"><strong>Local dev — console bypass</strong> (<code>DEV_AUTH=1</code>). No email is sent;
@@ -118,7 +243,32 @@ if (devMode) {
       ))}
       {errorMessage && <p class="err">{errorMessage}</p>}
 
-      {showCodeStep ? (
+      {stepUpRequired || successPending ? (
+        <>
+          <h1>{successPending ? "Almost there" : "Verify with SMS to continue"}</h1>
+          <p class="sub">
+            {successPending ? "Your identity is verified — sign-in just needs one more step. " : null}
+            We sent {stepUpFactorLabel} to the phone on file for <span class="who">{email}</span>. Enter it below to finish signing in.
+          </p>
+          <form method="post" action="/api/auth/step-up-verify" autocomplete="one-time-code">
+            <input type="hidden" name="identifier" value={email} />
+            <input type="hidden" name="next" value={next} />
+            <label for="stepup-code">SMS code</label>
+            <input class="code" id="stepup-code" name="code" type="text" inputmode="numeric"
+              pattern="[0-9]*" maxlength="6" autocomplete="one-time-code" required autofocus />
+            <button type="submit">
+              Verify &amp; continue
+              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </button>
+          </form>
+          <p class="note" style="margin-top:1.15rem;">Didn't get a code?</p>
+          <form method="post" action="/api/auth/step-up-send">
+            <input type="hidden" name="identifier" value={email} />
+            <button type="submit" class="btn-quiet">Resend SMS code</button>
+          </form>
+          <p class="note"><a href={`/auth/login${next !== "/" ? `?next=${encodeURIComponent(next)}` : ""}`}>Use a different email</a></p>
+        </>
+      ) : showCodeStep ? (
         <>
           <h1>Check your email</h1>
           <p class="sub">We sent a 6-digit code to <span class="who">{email}</span> if it has access to this preview. Enter it below.</p>
@@ -128,7 +278,10 @@ if (devMode) {
             <label for="code">Access code</label>
             <input class="code" id="code" name="code" type="text" inputmode="numeric"
               pattern="[0-9]*" maxlength="6" autocomplete="one-time-code" required autofocus />
-            <button type="submit">Verify &amp; view preview</button>
+            <button type="submit">
+              Verify &amp; view preview
+              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </button>
           </form>
           <p class="note"><a href={`/auth/login${next !== "/" ? `?next=${encodeURIComponent(next)}` : ""}`}>Use a different email</a> · <a href="https://mcp.tokenoftrust.com/early-access/storefront">Don't have access? Request early access →</a></p>
         </>
@@ -141,7 +294,10 @@ if (devMode) {
             <label for="email">Work email</label>
             <input id="email" name="email" type="email" value={email}
               autocomplete="email" placeholder="you@company.com" required autofocus />
-            <button type="submit">Email me a code</button>
+            <button type="submit">
+              Email me a code
+              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 6.5h16v11H4z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="m4.5 7 7.5 5.5L19.5 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </button>
           </form>
           <p class="note">Access is granted by role — no signup needed. Don't have access yet? <a href="https://mcp.tokenoftrust.com/early-access/storefront">Request early access →</a></p>
         </>

package/apps/storefront/src/pages/auth/magic.astro

@@ -10,6 +10,10 @@
  * in a hidden form field and leaves only via the POST.
  */
 import { normalizeEmailHint, redactEmailForHint } from "@/lib/privacy/emailHint";
+// Self-hosted web fonts (audit finding 6) — same-origin @fontsource, replacing
+// the render-blocking fonts.googleapis.com stylesheet. Covers Plus Jakarta Sans,
+// Inter, and JetBrains Mono used by this page's inline styles.
+import "@/styles/fonts.css";
 
 export const prerender = false;
 
@@ -44,6 +48,22 @@ const next = (() => {
   return n.startsWith("/") && !n.startsWith("//") ? n : "/dashboard";
 })();
 
+// RFC 9470 step-up: /api/auth/magic-exchange redirects here (not to /auth/login)
+// with `reason` distinct from `error` — see `magicRedirect` there. Unlike the
+// email-code path, this redirect never carries the real email (only the
+// redacted `email_hint`), so we can't render the SMS-completion card here
+// no-JS-safe with a hidden identifier — hand off to /auth/login, which has the
+// full email and the step-up card, once the human re-enters it.
+const reason = url.searchParams.get("reason");
+const requiredAcr = url.searchParams.get("requiredAcr") ?? "";
+const stepUpRequired = reason === "step-up-required";
+const successPending = reason === "success-pending";
+const ACR_LABELS: Record<string, string> = {
+  "tot:aal:sms": "a text message (SMS) code",
+};
+const stepUpFactorLabel = requiredAcr ? (ACR_LABELS[requiredAcr] ?? "an additional verification step") : "an additional verification step";
+const loginHref = `/auth/login${next !== "/dashboard" ? `?next=${encodeURIComponent(next)}` : ""}`;
+
 const ERROR_MESSAGES: Record<string, string> = {
   invalid: "This sign-in link isn't valid or has already been used.",
   expired: "This sign-in link has expired.",
@@ -77,23 +97,22 @@ const showResendForm = !!errorMessage && !!tenant && resendStatus !== "sent";
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex, nofollow" />
     <title>Confirm sign in — Regulated Storefront by Token of Trust©</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap"
-    />
+    {/* Web fonts are self-hosted via `@/styles/fonts.css` (imported above). */}
     <style nonce={cspNonce}>
-      /* Signed-in developer cockpit design system — the sign-in door matches the
-         room it opens into (apps/storefront/src/pages/cockpit.astro). Theme via the
-         token triple: :root default light, @media dark, and [data-theme] overrides. */
+      /* storefront.tokenoftrust.store visual system — the sign-in door wears the
+         same skin as the marketing storefront it belongs to: warm cream + deep
+         navy, the signature teal→blue gradient (--grad), Plus Jakarta / Inter /
+         JetBrains. Token values mirror /tenants/home/pages/storefront.css. Theme
+         via the triple: :root default light, @media dark (the site's dark-hero
+         palette), and [data-theme] overrides. */
       :root {
-        --bg: #f7f9fc; --surface: #ffffff;
-        --ink: #0a2540; --ink-2: #33415b; --muted: #55637a; --faint: #8593a8;
-        --accent: #0e9f8e; --accent-ink: #0b7a6d; --accent-wash: #e7f6f4; --accent-line: #b8e6df;
-        --border: #e3e8ef;
-        --warn: #c23b3b; --warn-wash: #fbecec; --warn-line: #f0cccc;
-        --sh: 0 10px 34px -14px rgba(10, 37, 64, .22);
+        --bg: #faf8f4; --surface: #ffffff;
+        --ink: #10294b; --ink-2: #1b2a40; --muted: #4d5a70; --faint: #8593a8;
+        --accent: #0d9391; --accent-ink: #0b6360; --accent-wash: #e4f4f2; --accent-line: #c1e7e2;
+        --border: #e6e2d9;
+        --warn: #bf3d2c; --warn-wash: #fbecea; --warn-line: #f0ccc6;
+        --grad: linear-gradient(115deg, #0d9391, #3b82c4);
+        --sh: 0 18px 50px rgba(16, 41, 75, .13);
         --display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
         --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
         --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
@@ -101,31 +120,34 @@ const showResendForm = !!errorMessage && !!tenant && resendStatus !== "sent";
       }
       @media (prefers-color-scheme: dark) {
         :root {
-          --bg: #071320; --surface: #0e2134;
-          --ink: #eaf1f8; --ink-2: #bdccdc; --muted: #90a3b7; --faint: #6c8098;
-          --accent: #2fd4bf; --accent-ink: #7fe7da; --accent-wash: #0f2e30; --accent-line: #1e514b;
-          --border: #1b3348;
+          --bg: #121118; --surface: #1b1a26;
+          --ink: #f3f5f9; --ink-2: #c7cede; --muted: #98a1b5; --faint: #6f7994;
+          --accent: #5fe0cf; --accent-ink: #7fe3d6; --accent-wash: #10302d; --accent-line: #1f524c;
+          --border: #2a2836;
           --warn: #f2857f; --warn-wash: #2a1414; --warn-line: #5a2626;
-          --sh: 0 18px 44px -22px rgba(0, 0, 0, .7);
+          --grad: linear-gradient(115deg, #0d9391, #3b82c4);
+          --sh: 0 18px 44px -18px rgba(0, 0, 0, .6);
           color-scheme: dark;
         }
       }
       :root[data-theme="dark"] {
-        --bg: #071320; --surface: #0e2134;
-        --ink: #eaf1f8; --ink-2: #bdccdc; --muted: #90a3b7; --faint: #6c8098;
-        --accent: #2fd4bf; --accent-ink: #7fe7da; --accent-wash: #0f2e30; --accent-line: #1e514b;
-        --border: #1b3348;
+        --bg: #121118; --surface: #1b1a26;
+        --ink: #f3f5f9; --ink-2: #c7cede; --muted: #98a1b5; --faint: #6f7994;
+        --accent: #5fe0cf; --accent-ink: #7fe3d6; --accent-wash: #10302d; --accent-line: #1f524c;
+        --border: #2a2836;
         --warn: #f2857f; --warn-wash: #2a1414; --warn-line: #5a2626;
-        --sh: 0 18px 44px -22px rgba(0, 0, 0, .7);
+        --grad: linear-gradient(115deg, #0d9391, #3b82c4);
+        --sh: 0 18px 44px -18px rgba(0, 0, 0, .6);
         color-scheme: dark;
       }
       :root[data-theme="light"] {
-        --bg: #f7f9fc; --surface: #ffffff;
-        --ink: #0a2540; --ink-2: #33415b; --muted: #55637a; --faint: #8593a8;
-        --accent: #0e9f8e; --accent-ink: #0b7a6d; --accent-wash: #e7f6f4; --accent-line: #b8e6df;
-        --border: #e3e8ef;
-        --warn: #c23b3b; --warn-wash: #fbecec; --warn-line: #f0cccc;
-        --sh: 0 10px 34px -14px rgba(10, 37, 64, .22);
+        --bg: #faf8f4; --surface: #ffffff;
+        --ink: #10294b; --ink-2: #1b2a40; --muted: #4d5a70; --faint: #8593a8;
+        --accent: #0d9391; --accent-ink: #0b6360; --accent-wash: #e4f4f2; --accent-line: #c1e7e2;
+        --border: #e6e2d9;
+        --warn: #bf3d2c; --warn-wash: #fbecea; --warn-line: #f0ccc6;
+        --grad: linear-gradient(115deg, #0d9391, #3b82c4);
+        --sh: 0 18px 50px rgba(16, 41, 75, .13);
         color-scheme: light;
       }
 
@@ -148,14 +170,14 @@ const showResendForm = !!errorMessage && !!tenant && resendStatus !== "sent";
       }
       .card::before {
         content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
-        background: linear-gradient(90deg, var(--accent), var(--accent-line));
+        background: var(--grad);
       }
       @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
 
       .mark {
         width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
-        color: #fff; background: linear-gradient(150deg, var(--accent), var(--accent-ink));
-        box-shadow: 0 6px 18px -6px rgba(14, 159, 142, .75); position: relative;
+        color: #fff; background: var(--grad);
+        box-shadow: 0 8px 20px -6px rgba(13, 147, 145, .6); position: relative;
       }
       .mark::after {
         content: ""; position: absolute; inset: -5px; border-radius: 17px;
@@ -194,12 +216,12 @@ const showResendForm = !!errorMessage && !!tenant && resendStatus !== "sent";
       form { margin: 0; }
       .cta {
         width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
-        font-family: var(--display); font-weight: 700; font-size: 1rem; color: #fff; background: var(--accent);
+        font-family: var(--display); font-weight: 700; font-size: 1rem; color: #fff; background: var(--grad);
         border: 0; border-radius: 999px; padding: .9rem 1.3rem; cursor: pointer;
-        box-shadow: 0 10px 26px -10px rgba(14, 159, 142, .85);
-        transition: transform .12s, background .12s, box-shadow .12s;
+        box-shadow: 0 10px 24px rgba(13, 147, 145, .32);
+        transition: transform .12s, box-shadow .12s, filter .12s;
       }
-      .cta:hover { transform: translateY(-1px); background: var(--accent-ink); box-shadow: 0 14px 30px -10px rgba(14, 159, 142, .95); }
+      .cta:hover { transform: translateY(-1px); filter: saturate(1.08); box-shadow: 0 14px 30px rgba(13, 147, 145, .4); }
       .cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
       .cta svg { width: 17px; height: 17px; }
 
@@ -253,7 +275,17 @@ const showResendForm = !!errorMessage && !!tenant && resendStatus !== "sent";
         <svg viewBox="0 0 24 24" fill="none"><path d="M12 2.5 20 6v6c0 4.6-3.2 7.9-8 9.5-4.8-1.6-8-4.9-8-9.5V6l8-3.5Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="m8.5 12 2.4 2.4L15.8 9.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
       </span>
       <p class="eyebrow">Token of Trust© · Regulated Storefront</p>
-      {resendStatus === "sent" ? (
+      {stepUpRequired || successPending ? (
+        <>
+          <h1>{successPending ? "Almost there" : "Verify with SMS to continue"}</h1>
+          <p class="sub">
+            {successPending
+              ? "Your identity is verified — sign-in just needs one more step: verify with SMS to continue."
+              : `Your email is confirmed. For extra security, please verify ${stepUpFactorLabel} before we can finish signing you in.`}
+          </p>
+          <p class="altrow"><a class="altlink" href={loginHref}>Continue with SMS verification →</a></p>
+        </>
+      ) : resendStatus === "sent" ? (
         <>
           <h1>Check your email</h1>
           <p class="sub">If that address is still on this store's invite list, a fresh sign-in link is on the way.</p>
@@ -286,8 +318,8 @@ const showResendForm = !!errorMessage && !!tenant && resendStatus !== "sent";
         </>
       ) : (
         <>
-          <h1>Confirm sign in</h1>
-          <p class="sub">Confirm it's you to finish signing in.</p>
+          <h1>Accept your invitation</h1>
+          <p class="sub">Confirm it's you to accept this invitation and finish signing in.</p>
           {appLabel ? (
             <div class="ident">
               <span class="ava" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="M4 9.5 5.2 5h13.6L20 9.5M4 9.5V19h16V9.5M4 9.5h16M9 19v-5h6v5" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg></span>
@@ -310,13 +342,13 @@ const showResendForm = !!errorMessage && !!tenant && resendStatus !== "sent";
             <input type="hidden" name="email_hint" value={emailHint} />
             <input type="hidden" name="next" value={next} />
             <button class="cta" type="submit">
-              Confirm sign in
+              Accept &amp; sign in
               <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
             </button>
           </form>
           <p class="note">
             <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="5" y="11" width="14" height="9" rx="2" stroke="currentColor" stroke-width="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3" stroke="currentColor" stroke-width="2"/></svg>
-            This is a single-use link — confirming completes your sign-in.
+            This is a single-use link — accepting completes your sign-in.
           </p>
         </>
       )}

package/apps/storefront/src/pages/blog/[slug].astro

@@ -0,0 +1,107 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import { getBlogPost, resolveBlogRedirect } from "@/lib/blog/provider.js";
+import { breadcrumbLd } from "@/lib/jsonld.js";
+
+const { tenant, canonicalBase, basePath } = Astro.locals;
+const slug = Astro.params.slug ?? "";
+const post = await getBlogPost(tenant.tenant_id, slug);
+if (!post) {
+  const redirect = await resolveBlogRedirect(tenant.tenant_id, slug);
+  if (redirect) return Astro.redirect(`${basePath}/blog/${redirect}/`, 301);
+  return new Response(null, { status: 404 });
+}
+
+const canonical = new URL(`/blog/${post.slug}/`, canonicalBase + "/").toString();
+const articleLd = {
+  "@context": "https://schema.org",
+  "@type": "BlogPosting",
+  headline: post.title,
+  description: post.description,
+  url: canonical,
+  mainEntityOfPage: canonical,
+  datePublished: post.publishedAt,
+  dateModified: post.modifiedAt,
+  author: { "@type": "Person", name: post.author },
+  publisher: { "@type": "Organization", name: tenant.displayName, url: canonicalBase },
+  ...(post.featuredImage ? { image: new URL(post.featuredImage.src, canonicalBase + "/").toString() } : {}),
+};
+const crumbs = breadcrumbLd([
+  { label: tenant.displayName, href: "/" },
+  { label: "Blog", href: "/blog/" },
+  { label: post.title, href: `/blog/${post.slug}/` },
+], canonicalBase);
+const blogHref = `${basePath}/blog/`;
+---
+
+<Layout
+  title={post.seoTitle || post.title}
+  description={post.description}
+  path={`/blog/${post.slug}/`}
+  ogType="article"
+  ogImage={post.featuredImage?.src}
+  jsonLd={[crumbs, articleLd]}
+>
+  <article class="article-shell">
+    <nav class="breadcrumbs" aria-label="Breadcrumb"><a href={blogHref}>Blog</a><span aria-hidden="true">/</span><span>{post.categories[0] ?? "Article"}</span></nav>
+    <header>
+      {post.tags[0] && <p class="eyebrow eyebrow--tick">{post.tags[0]}</p>}
+      <h1>{post.title}</h1>
+      <p class="dek">{post.excerpt}</p>
+      <div class="byline">
+        <span>By {post.author}</span>
+        <span aria-hidden="true">·</span>
+        <time datetime={post.publishedAt}>{new Date(post.publishedAt).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}</time>
+      </div>
+    </header>
+    {post.featuredImage && (
+      <img
+        class="featured"
+        src={post.featuredImage.src}
+        alt={post.featuredImage.alt}
+        width={post.featuredImage.width}
+        height={post.featuredImage.height}
+        fetchpriority="high"
+        decoding="async"
+      />
+    )}
+    <div class="article-grid">
+      <aside>
+        <a href={blogHref}>← All articles</a>
+        {post.tags.length > 0 && <div class="article-tags">{post.tags.map((tag) => <span>{tag}</span>)}</div>}
+      </aside>
+      <div class="blog-body" set:html={post.contentHtml}></div>
+    </div>
+  </article>
+</Layout>
+
+<style>
+  .article-shell { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; padding-block: clamp(2rem, 5vw, 5rem); }
+  .breadcrumbs { display: flex; gap: .55rem; align-items: center; color: var(--color-muted); font-size: .84rem; }
+  .breadcrumbs a { color: var(--color-accent-ink); font-weight: 700; }
+  header { max-width: 880px; margin: clamp(2.5rem, 6vw, 5rem) auto clamp(2rem, 5vw, 3.5rem); text-align: center; }
+  header .eyebrow { justify-content: center; }
+  h1 { margin-top: .9rem; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.02; }
+  .dek { max-width: 68ch; margin: 1.5rem auto 0; color: var(--color-muted); font-size: clamp(1rem, 2vw, 1.2rem); }
+  .byline { display: flex; justify-content: center; gap: .55rem; margin-top: 1.35rem; color: var(--color-muted); font-size: .85rem; }
+  .featured { display: block; width: 100%; max-height: 620px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
+  .article-grid { display: grid; grid-template-columns: 190px minmax(0, 720px); justify-content: center; gap: clamp(2rem, 6vw, 5rem); margin-top: clamp(3rem, 7vw, 5.5rem); }
+  aside { align-self: start; position: sticky; top: 7rem; }
+  aside > a { color: var(--color-accent-ink); font-size: .88rem; font-weight: 700; }
+  .article-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
+  .article-tags span { padding: .3rem .55rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-muted); font-size: .7rem; }
+  .blog-body { min-width: 0; font-size: 1.05rem; line-height: 1.78; }
+  .blog-body :global(p), .blog-body :global(ul), .blog-body :global(ol), .blog-body :global(blockquote), .blog-body :global(figure), .blog-body :global(table), .blog-body :global(pre) { margin-block: 1.25rem; }
+  .blog-body :global(h2), .blog-body :global(h3), .blog-body :global(h4) { scroll-margin-top: 7rem; margin: 2.8rem 0 1rem; line-height: 1.18; }
+  .blog-body :global(h2) { font-size: clamp(1.75rem, 3vw, 2.35rem); }
+  .blog-body :global(h3) { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
+  .blog-body :global(a) { color: var(--color-accent-ink); text-decoration: underline; text-underline-offset: .18em; }
+  .blog-body :global(ul), .blog-body :global(ol) { padding-left: 1.4rem; }
+  .blog-body :global(li) { margin-block: .45rem; }
+  .blog-body :global(blockquote) { padding: .8rem 1.25rem; border-left: 4px solid var(--color-accent); background: var(--color-surface); color: var(--color-muted); }
+  .blog-body :global(img) { display: block; width: auto; max-width: 100%; margin-inline: auto; border-radius: var(--radius-md); }
+  .blog-body :global(figcaption) { margin-top: .5rem; color: var(--color-muted); text-align: center; font-size: .78rem; }
+  .blog-body :global(table) { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
+  .blog-body :global(th), .blog-body :global(td) { padding: .7rem; border: 1px solid var(--color-border); text-align: left; }
+  @media (max-width: 760px) { .article-grid { grid-template-columns: 1fr; } aside { position: static; } .article-tags { display: none; } }
+</style>