diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index 33fe7d7..4a69f67 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -20,8 +20,10 @@ jobs:
       - run: npm run lint
       - run: npm run build
       - run: npm run test:e2e
+      - run: npm run test:rollback
       - run: npx playwright install --with-deps chromium
       - run: npm run test:browser
+      - run: npm run test:browser:access
       - uses: actions/upload-artifact@v4
         if: failure()
         with:
diff --git a/e2e/access-rollback.e2e.test.ts b/e2e/access-rollback.e2e.test.ts
new file mode 100644
index 0000000..77455b5
--- /dev/null
+++ b/e2e/access-rollback.e2e.test.ts
@@ -0,0 +1,43 @@
+import { afterEach, beforeEach, expect, it, onTestFailed } from 'vitest'
+import { saveTrace, startHarness, type Harness } from './harness'
+
+// Rollback hazard check (evidence for the release plan, not a product fix): after someone has signed in through Access,
+// their account row is access:<hash>. If the release is rolled back to the legacy sign-in (AUTH_MODE unset), can that
+// person still reach their contacts by the legacy email link, and does the legacy path avoid creating a second account
+// with the same email (which would make Access sign-in fail closed with "Account access requires review" after a re-enable)?
+// Skipped unless ROLLBACK_CHECK=1 because it documents a known gap that is being reported, not a passing expectation.
+
+let h: Harness
+beforeEach(async () => {
+  h = await startHarness()
+})
+afterEach(async () => {
+  await h.dispose()
+})
+
+async function seedAccessAccount(email: string, contactName: string) {
+  const db = await h.mf.getD1Database('DB')
+  const id = `access:${'a'.repeat(64)}`
+  await db.prepare("INSERT INTO users (id, email, name, auth_provider, created_at, updated_at) VALUES (?, ?, ?, 'access', 't', 't')").bind(id, email, email).run()
+  await db
+    .prepare("INSERT INTO contacts (id, user_id, name, created_at, updated_at) VALUES ('c1', ?, ?, '2026-01-01T00:00:00Z', '2026-01-01T00:00:00Z')")
+    .bind(id, contactName)
+    .run()
+  return { db, id }
+}
+
+it.skipIf(process.env.ROLLBACK_CHECK !== '1')('after a rollback, the legacy email link reaches the contacts of a person who signed in through Access', async () => {
+  onTestFailed((r) => saveTrace('access-rollback-contacts', h.trace, r.errors?.[0]?.message))
+  await seedAccessAccount('alice@example.test', 'Alice Contact')
+  const alice = await h.signIn('alice@example.test')
+  const list = (await (await alice.request('/api/contacts')).json()) as { contacts: Array<{ name: string }> }
+  expect(list.contacts.map((c) => c.name)).toEqual(['Alice Contact'])
+})
+
+it.skipIf(process.env.ROLLBACK_CHECK !== '1')('after a rollback, the legacy email link does not create a second account with the same email', async () => {
+  onTestFailed((r) => saveTrace('access-rollback-duplicate', h.trace, r.errors?.[0]?.message))
+  const { db } = await seedAccessAccount('alice@example.test', 'Alice Contact')
+  await h.signIn('alice@example.test')
+  const count = (await db.prepare("SELECT COUNT(*) AS n FROM users WHERE lower(trim(email)) = 'alice@example.test'").first<{ n: number }>())!.n
+  expect(count).toBe(1)
+})
diff --git a/e2e/access.e2e.test.ts b/e2e/access.e2e.test.ts
new file mode 100644
index 0000000..7204f1a
--- /dev/null
+++ b/e2e/access.e2e.test.ts
@@ -0,0 +1,332 @@
+import { createHmac } from 'node:crypto'
+import { afterEach, beforeEach, describe, expect, it, onTestFailed } from 'vitest'
+import { ACCESS_AUDIENCE, ACCESS_ISSUER, defaultClaims, makeAccessKey, mintToken } from './access'
+import { SESSION_SECRET, saveTrace, startHarness, uploadForm, type Harness } from './harness'
+
+// Cloudflare Access sign-in, tested against the contract Codex posted (seq 59):
+// AUTH_MODE=access, ACCESS_ISSUER/ACCESS_AUDIENCE/ACCESS_ALLOWED_HOSTS, RS256 JWT checked against the issuer's JWKS,
+// every /api route gated, 401 {loginUrl:'/cdn-cgi/access/login'}, logoutUrl '/cdn-cgi/access/logout', legacy sign-in routes 410.
+// The simulator's keys and JWKS exist only in the test process. These are SIMULATED checks, not live Access behavior.
+
+const LOGIN_URL = '/cdn-cgi/access/login'
+const LOGOUT_URL = '/cdn-cgi/access/logout'
+const now = () => Math.floor(Date.now() / 1000)
+
+let h: Harness
+
+beforeEach(async () => {
+  h = await startHarness({ access: true })
+  h.openai.mode = {
+    kind: 'card',
+    card: { name: 'Maria Okafor', company: 'Sunrise Realty Group', role: 'Broker', emails: ['maria@sunrise.example'], phones: ['(602) 555-0142'], website: '', address: '', tags: [], notes: '', confidence: 0.95, needs_review: false },
+  }
+})
+
+afterEach(async () => {
+  await h.dispose()
+})
+
+function scenario(name: string, fn: () => Promise<void>) {
+  it(name, async () => {
+    onTestFailed((result) => saveTrace(`access-${name}`, h.trace, result.errors?.[0]?.message))
+    await fn()
+  })
+}
+
+async function db() {
+  return h.mf.getD1Database('DB')
+}
+
+async function seedUser(id: string, email: string, contactName?: string) {
+  const d = await db()
+  await d.prepare("INSERT INTO users (id, email, name, created_at, updated_at) VALUES (?, ?, ?, 't', 't')").bind(id, email, email).run()
+  if (contactName) {
+    await d
+      .prepare("INSERT INTO contacts (id, user_id, name, created_at, updated_at) VALUES (?, ?, ?, '2026-01-01T00:00:00Z', '2026-01-01T00:00:00Z')")
+      .bind(`c-${id}`, id, contactName)
+      .run()
+  }
+}
+
+async function contactNames(res: Response): Promise<string[]> {
+  return ((await res.json()) as { contacts: Array<{ name: string }> }).contacts.map((c) => c.name)
+}
+
+describe('valid Access sessions and existing-account mapping', () => {
+  scenario('a valid token signs in as the existing canonical account and sees its contacts', async () => {
+    await seedUser('email:alice@example.test', 'alice@example.test', 'Alice Contact')
+    const alice = h.access.session('alice@example.test')
+    const me = await alice.request('/api/me')
+    expect(me.status).toBe(200)
+    expect(await me.json()).toEqual({ email: 'alice@example.test', id: 'email:alice@example.test' })
+    expect(await contactNames(await alice.request('/api/contacts'))).toEqual(['Alice Contact'])
+  })
+
+  scenario('email case and spaces in the token do not create a second account', async () => {
+    await seedUser('email:alice@example.test', 'alice@example.test', 'Alice Contact')
+    const session = h.access.session('  Alice@Example.TEST ')
+    const me = await session.request('/api/me')
+    expect(me.status).toBe(200)
+    expect((await me.json()) as { id: string }).toMatchObject({ id: 'email:alice@example.test' })
+    expect(await contactNames(await session.request('/api/contacts'))).toEqual(['Alice Contact'])
+  })
+
+  scenario('an existing account with a non-canonical id keeps its id and its data', async () => {
+    await seedUser('legacy-42', 'bob@example.test', 'Bob Legacy Contact')
+    const bob = h.access.session('bob@example.test')
+    const me = await bob.request('/api/me')
+    expect(me.status).toBe(200)
+    expect(await me.json()).toEqual({ email: 'bob@example.test', id: 'legacy-42' })
+    expect(await contactNames(await bob.request('/api/contacts'))).toEqual(['Bob Legacy Contact'])
+  })
+
+  scenario('the same person keeps the same account when their Access subject changes', async () => {
+    await seedUser('email:alice@example.test', 'alice@example.test', 'Alice Contact')
+    const first = await h.access.session('alice@example.test', { sub: 'subject-one' }).request('/api/me')
+    const second = await h.access.session('alice@example.test', { sub: 'subject-two' }).request('/api/me')
+    expect(((await first.json()) as { id: string }).id).toBe('email:alice@example.test')
+    expect(((await second.json()) as { id: string }).id).toBe('email:alice@example.test')
+  })
+
+  scenario('a first-time person gets a new account with no data and no password row, and keeps it on later sign-ins', async () => {
+    const carol = h.access.session('carol@example.test')
+    const me = await carol.request('/api/me')
+    expect(me.status).toBe(200)
+    const created = (await me.json()) as { email: string; id: string }
+    expect(created.email).toBe('carol@example.test')
+    expect(created.id).toMatch(/^access:[0-9a-f]{64}$/)
+    const again = (await (await h.access.session('carol@example.test').request('/api/me')).json()) as { id: string }
+    expect(again.id).toBe(created.id)
+    expect(await contactNames(await carol.request('/api/contacts'))).toEqual([])
+    const rows = (await (await db()).prepare('SELECT COUNT(*) AS n FROM user_passwords').first<{ n: number }>())!.n
+    expect(rows).toBe(0)
+  })
+
+  scenario('two accounts with the same normalized email fail closed and expose no data', async () => {
+    await seedUser('dup-1', 'dana@example.test', 'Dana One')
+    await seedUser('dup-2', 'Dana@Example.test', 'Dana Two')
+    const dana = h.access.session('dana@example.test')
+    const res = await dana.request('/api/contacts')
+    expect([401, 403]).toContain(res.status)
+    expect(JSON.stringify(await res.json())).not.toMatch(/Dana (One|Two)/)
+  })
+})
+
+describe('forged, expired and malformed tokens are rejected', () => {
+  async function expectRejected(token: string | null, label: string) {
+    const headers: Record<string, string> = token === null ? {} : { 'Cf-Access-Jwt-Assertion': token }
+    const res = await h.access.raw('/api/me', { headers })
+    expect(res.status, label).toBe(401)
+    const body = (await res.json()) as { loginUrl?: string }
+    expect(body.loginUrl, label).toBe(LOGIN_URL)
+  }
+
+  const claims = (over: Record<string, unknown> = {}) => ({ ...defaultClaims('alice@example.test'), ...over })
+
+  scenario('no token at all', async () => {
+    await expectRejected(null, 'no token')
+  })
+
+  scenario('expired token', async () => {
+    await expectRejected(mintToken({ key: h.access.keys[0], claims: claims({ exp: now() - 60, iat: now() - 3600 }) }), 'expired')
+  })
+
+  scenario('token issued in the future (iat) or not yet valid (nbf)', async () => {
+    await expectRejected(mintToken({ key: h.access.keys[0], claims: claims({ iat: now() + 3600, nbf: now() + 3600, exp: now() + 7200 }) }), 'future iat/nbf')
+  })
+
+  scenario('wrong issuer', async () => {
+    await expectRejected(mintToken({ key: h.access.keys[0], claims: claims({ iss: 'https://other-team.cloudflareaccess.com' }) }), 'wrong iss')
+  })
+
+  scenario('wrong audience (string and array forms)', async () => {
+    await expectRejected(mintToken({ key: h.access.keys[0], claims: claims({ aud: ['some-other-app-aud'] }) }), 'wrong aud array')
+    await expectRejected(mintToken({ key: h.access.keys[0], claims: claims({ aud: 'some-other-app-aud' }) }), 'wrong aud string')
+  })
+
+  scenario('missing audience, missing subject, missing email, or not an app token', async () => {
+    const base = claims()
+    const { aud: _aud, ...noAud } = base
+    const { sub: _sub, ...noSub } = base
+    const { email: _email, ...noEmail } = base
+    void _aud
+    void _sub
+    void _email
+    await expectRejected(mintToken({ key: h.access.keys[0], claims: noAud }), 'no aud')
+    await expectRejected(mintToken({ key: h.access.keys[0], claims: noSub }), 'no sub')
+    await expectRejected(mintToken({ key: h.access.keys[0], claims: noEmail }), 'no email')
+    await expectRejected(mintToken({ key: h.access.keys[0], claims: claims({ type: 'service-token' }) }), 'type not app')
+  })
+
+  scenario('unsigned (alg none) and algorithm-confusion (HS256 with the public key) tokens', async () => {
+    await expectRejected(mintToken({ key: h.access.keys[0], alg: 'none', claims: claims() }), 'alg none')
+    await expectRejected(mintToken({ key: h.access.keys[0], alg: 'HS256', claims: claims() }), 'HS256 confusion')
+  })
+
+  scenario('tampered signature, tampered payload, unknown key id', async () => {
+    const good = mintToken({ key: h.access.keys[0], claims: claims() })
+    await expectRejected(mintToken({ key: h.access.keys[0], claims: claims(), tamperSignature: true }), 'tampered signature')
+    const [head, , sig] = good.split('.')
+    const evil = Buffer.from(JSON.stringify(claims({ email: 'victim@example.test' }))).toString('base64url')
+    await expectRejected(`${head}.${evil}.${sig}`, 'tampered payload')
+    await expectRejected(mintToken({ key: h.access.keys[0], kid: 'not-published', claims: claims() }), 'unknown kid')
+  })
+
+  scenario('token signed by a key that is not in the issuer JWKS', async () => {
+    const rogue = makeAccessKey('test-key-1') // same kid, different key material
+    await expectRejected(mintToken({ key: rogue, claims: claims() }), 'rogue key same kid')
+  })
+
+  scenario('garbage, empty and oversized tokens', async () => {
+    await expectRejected('not-a-jwt', 'garbage')
+    await expectRejected('a.b.c', 'three junk parts')
+    await expectRejected('x'.repeat(20000), 'oversized')
+    await expectRejected('', 'empty')
+  })
+
+  scenario('a rejected token never exposes data or creates an account', async () => {
+    const rogue = makeAccessKey('test-key-1')
+    const res = await h.access.raw('/api/contacts', { headers: { 'Cf-Access-Jwt-Assertion': mintToken({ key: rogue, claims: claims({ email: 'mallory@example.test' }) }) } })
+    expect(res.status).toBe(401)
+    const users = (await (await db()).prepare("SELECT COUNT(*) AS n FROM users WHERE email LIKE 'mallory%'").first<{ n: number }>())!.n
+    expect(users).toBe(0)
+  })
+})
+
+describe('old sign-in credentials no longer work in Access mode', () => {
+  scenario('plain identity headers and a forged CF_Authorization cookie are ignored', async () => {
+    const forgedPayload = Buffer.from(JSON.stringify(defaultClaims('alice@example.test'))).toString('base64url')
+    for (const headers of [
+      { 'Cf-Access-Authenticated-User-Email': 'alice@example.test' },
+      { 'Cf-Access-Jwt-Assertion': `x.${forgedPayload}.y` },
+      { Cookie: `CF_Authorization=x.${forgedPayload}.y` },
+    ]) {
+      expect((await h.access.raw('/api/me', { headers })).status).toBe(401)
+    }
+  })
+
+  scenario('a validly signed legacy cardcap_session cookie does not authenticate', async () => {
+    const userId = 'email:alice@example.test'
+    const expires = now() + 3600
+    const sig = createHmac('sha256', SESSION_SECRET).update(`${userId}.${expires}`).digest('base64url')
+    const cookie = `cardcap_session=${encodeURIComponent(`v1.${Buffer.from(userId).toString('base64url')}.${expires}.${sig}`)}`
+    const res = await h.access.raw('/api/me', { headers: { Cookie: cookie } })
+    expect(res.status).toBe(401)
+  })
+
+  scenario('legacy sign-in routes answer 410 to an Access-authenticated caller and never issue a session', async () => {
+    const alice = h.access.session('alice@example.test')
+    const json = { 'content-type': 'application/json' }
+    const attempts: Array<[string, string, string | undefined]> = [
+      ['POST', '/api/auth/request-link', JSON.stringify({ email: 'alice@example.test' })],
+      ['POST', '/api/auth/password-login', JSON.stringify({ email: 'alice@example.test', password: 'correct horse battery' })],
+      ['POST', '/api/auth/set-password', JSON.stringify({ password: 'correct horse battery' })],
+      ['GET', '/api/auth/verify?token=abc', undefined],
+    ]
+    for (const [method, path, body] of attempts) {
+      const res = await alice.request(path, { method, headers: json, body })
+      expect(res.status, `${method} ${path}`).toBe(410)
+      expect(res.headers.get('set-cookie'), `${method} ${path}`).toBeNull()
+    }
+  })
+})
+
+describe('every API route is gated, and other hosts cannot bypass Access', () => {
+  scenario('health and auth config are not public in Access mode', async () => {
+    for (const path of ['/api/health', '/api/auth/config']) {
+      const res = await h.access.raw(path)
+      expect(res.status, path).toBe(401)
+      expect(((await res.json()) as { loginUrl?: string }).loginUrl, path).toBe(LOGIN_URL)
+    }
+  })
+
+  scenario('a valid token sent to an allowed host works, including case differences', async () => {
+    for (const host of ['cardcap.test', 'CARDCAP.TEST', 'cardcap.example.test']) {
+      const res = await h.access.session('alice@example.test', { host }).request('/api/me')
+      expect(res.status, host).toBe(200)
+    }
+  })
+
+  scenario('a valid token sent to a host that is not allowed (workers.dev, lookalikes, suffix tricks) is refused', async () => {
+    for (const host of ['cardcap.codylecates.workers.dev', 'evilcardcap.test', 'cardcap.test.evil.example', 'cardcap.test.', 'localhost']) {
+      const res = await h.access.session('alice@example.test', { host }).request('/api/me')
+      expect([401, 403], host).toContain(res.status)
+      expect(JSON.stringify(await res.json()), host).not.toContain('alice@example.test')
+    }
+  })
+
+  scenario('a forwarded-host header cannot talk the Worker into accepting a disallowed host', async () => {
+    const res = await h.access
+      .session('alice@example.test', { host: 'cardcap.codylecates.workers.dev' })
+      .request('/api/me', { headers: { 'X-Forwarded-Host': 'cardcap.test', Host: 'cardcap.test', Origin: 'https://cardcap.test' } })
+    expect([401, 403]).toContain(res.status)
+  })
+
+  scenario('the published JWKS is actually fetched from the issuer certs URL', async () => {
+    await h.access.session('alice@example.test').request('/api/me')
+    expect(h.access.jwksFetches).toBeGreaterThan(0)
+    const fetched = h.trace.filter((t) => t.kind === 'outbound' && t.note?.includes('access jwks'))
+    expect(fetched.every((t) => t.url === `${ACCESS_ISSUER}/cdn-cgi/access/certs`)).toBe(true)
+  })
+
+  scenario('the token audience is bound to this app', async () => {
+    const other = mintToken({ key: h.access.keys[0], claims: { ...defaultClaims('alice@example.test'), aud: [`${ACCESS_AUDIENCE}-other`] } })
+    expect((await h.access.raw('/api/me', { headers: { 'Cf-Access-Jwt-Assertion': other } })).status).toBe(401)
+  })
+})
+
+describe('logout', () => {
+  scenario('logout clears the legacy cookie and returns the Access logout URL', async () => {
+    const alice = h.access.session('alice@example.test')
+    const res = await alice.request('/api/auth/logout', { method: 'POST' })
+    expect(res.status).toBe(200)
+    expect(await res.json()).toEqual({ logoutUrl: LOGOUT_URL })
+    expect(res.headers.get('set-cookie') || '').toMatch(/cardcap_session=;.*Max-Age=0/)
+  })
+})
+
+describe('a refused account can still sign out', () => {
+  scenario('with a valid token but an ambiguous account mapping, data is refused (403) yet logout answers with the Access logout URL', async () => {
+    await seedUser('dup-1', 'dana@example.test', 'Dana One')
+    await seedUser('dup-2', 'Dana@Example.test', 'Dana Two')
+    const dana = h.access.session('dana@example.test')
+    const data = await dana.request('/api/contacts')
+    expect(data.status).toBe(403)
+    expect(await data.json()).toEqual({ error: 'Account access requires review.' })
+    const out = await dana.request('/api/auth/logout', { method: 'POST' })
+    expect(out.status).toBe(200)
+    expect(await out.json()).toEqual({ logoutUrl: LOGOUT_URL })
+    expect(out.headers.get('set-cookie') || '').toMatch(/cardcap_session=;.*Max-Age=0/)
+  })
+
+  scenario('logout still requires a cryptographically valid token (a forged one gets nothing)', async () => {
+    const rogue = makeAccessKey('test-key-1')
+    const res = await h.access.raw('/api/auth/logout', {
+      method: 'POST',
+      headers: { 'Cf-Access-Jwt-Assertion': mintToken({ key: rogue, claims: defaultClaims('dana@example.test') }) },
+    })
+    expect(res.status).toBe(401)
+  })
+})
+
+describe('cross-user isolation with Access sign-in', () => {
+  scenario('another Access user cannot list, read, edit, delete or fetch the image of a contact', async () => {
+    const alice = h.access.session('alice@example.test')
+    const bob = h.access.session('bob@example.test')
+    const upload = await alice.request('/api/cards/upload', { method: 'POST', body: uploadForm('maria.png') })
+    expect(upload.status).toBe(201)
+    const { contact } = (await upload.json()) as { contact: { id: string; sourceImageUrl: string; name: string } }
+    expect(contact.name).toBe('Maria Okafor')
+    expect((await alice.request(contact.sourceImageUrl)).status).toBe(200)
+
+    expect(await contactNames(await bob.request('/api/contacts'))).toEqual([])
+    expect((await bob.request(`/api/contacts/${contact.id}`)).status).toBe(404)
+    expect((await bob.request(contact.sourceImageUrl)).status).toBe(404)
+    const put = await bob.request(`/api/contacts/${contact.id}`, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name: 'Hijacked' }) })
+    expect(put.status).toBe(404)
+    const del = await bob.request(`/api/contacts/${contact.id}`, { method: 'DELETE' })
+    expect(del.status).toBe(404)
+    expect(await contactNames(await alice.request('/api/contacts'))).toEqual(['Maria Okafor'])
+    expect((await alice.request(contact.sourceImageUrl)).status).toBe(200)
+  })
+})
diff --git a/e2e/access.ts b/e2e/access.ts
new file mode 100644
index 0000000..3bc8762
--- /dev/null
+++ b/e2e/access.ts
@@ -0,0 +1,68 @@
+import { createHmac, createSign, generateKeyPairSync, type KeyObject } from 'node:crypto'
+
+// Cloudflare Access simulator for tests: a throwaway RSA key pair, the JWKS the Worker will fetch from
+// <issuer>/cdn-cgi/access/certs (served by the harness's outbound interceptor), and a signed-JWT minter.
+// Nothing here can reach production: the keys exist only in the test process.
+
+export const ACCESS_ISSUER = 'https://csi-test.cloudflareaccess.com'
+export const ACCESS_AUDIENCE = 'aud-tag-for-cardcap-tests-0123456789'
+export const ACCESS_HOSTS = ['cardcap.test', 'cardcap.example.test']
+export const JWKS_URL = `${ACCESS_ISSUER}/cdn-cgi/access/certs`
+
+export type AccessKey = { kid: string; privateKey: KeyObject; jwk: Record<string, unknown> }
+
+export function makeAccessKey(kid: string): AccessKey {
+  const { publicKey, privateKey } = generateKeyPairSync('rsa', { modulusLength: 2048 })
+  const jwk = publicKey.export({ format: 'jwk' }) as Record<string, unknown>
+  return { kid, privateKey, jwk: { ...jwk, kid, alg: 'RS256', use: 'sig' } }
+}
+
+export type TokenClaims = {
+  iss?: string
+  aud?: string | string[]
+  sub?: string
+  email?: string | null
+  type?: string
+  iat?: number
+  nbf?: number
+  exp?: number
+  [key: string]: unknown
+}
+
+export type MintOptions = {
+  key: AccessKey
+  alg?: 'RS256' | 'HS256' | 'none'
+  kid?: string | null
+  claims?: TokenClaims
+  /** flip a byte in the signature after signing */
+  tamperSignature?: boolean
+}
+
+const b64url = (input: Buffer | string) => Buffer.from(input).toString('base64url')
+
+export function defaultClaims(email: string, sub = `sub-${email}`, now = Math.floor(Date.now() / 1000)): TokenClaims {
+  return { iss: ACCESS_ISSUER, aud: [ACCESS_AUDIENCE], sub, email, type: 'app', iat: now - 5, nbf: now - 5, exp: now + 300 }
+}
+
+export function mintToken(options: MintOptions): string {
+  const { key, alg = 'RS256', claims = {} } = options
+  const header: Record<string, unknown> = { alg, typ: 'JWT' }
+  const kid = options.kid === undefined ? key.kid : options.kid
+  if (kid !== null) header.kid = kid
+  const payload = claims
+  const signingInput = `${b64url(JSON.stringify(header))}.${b64url(JSON.stringify(payload))}`
+  let signature: Buffer
+  if (alg === 'none') {
+    signature = Buffer.alloc(0)
+  } else if (alg === 'HS256') {
+    // Classic algorithm-confusion attempt: HMAC using the public key material as the secret.
+    signature = createHmac('sha256', String(key.jwk.n)).update(signingInput).digest()
+  } else {
+    signature = createSign('RSA-SHA256').update(signingInput).sign(key.privateKey)
+  }
+  if (options.tamperSignature && signature.length > 0) {
+    signature = Buffer.from(signature)
+    signature[0] ^= 0xff
+  }
+  return `${signingInput}.${b64url(signature)}`
+}
diff --git a/e2e/browser/access.spec.ts b/e2e/browser/access.spec.ts
new file mode 100644
index 0000000..15f16d4
--- /dev/null
+++ b/e2e/browser/access.spec.ts
@@ -0,0 +1,210 @@
+import { expect, test, type Browser, type Page } from '@playwright/test'
+import { PNG_BUFFER } from '../fixtures'
+import { chooseFromMenu, expectSignedInAs, openContact, WELCOME_HEADING } from './helpers'
+
+// Sign-in through a SIMULATED Cloudflare Access edge (see e2e/browser/server.ts, ACCESS_SIM=1; the port comes from the Playwright project):
+// the Worker runs in AUTH_MODE=access, the edge redirects signed-out people to a fake sign-in page, and signed-in
+// requests carry a signed Access JWT. This shows how CardCap behaves behind Access; it is not live Access behavior.
+test.skip(process.env.ACCESS_SIM !== '1', 'needs the simulated Access server (ACCESS_SIM=1)')
+
+let counter = 0
+const uniqueEmail = (name: string) => `${name}-${Date.now()}-${++counter}@example.test`
+
+async function edgeSignIn(page: Page, email: string) {
+  await expect(page.getByRole('heading', { name: 'Simulated Access sign-in' })).toBeVisible()
+  await page.getByLabel('Email').fill(email)
+  await page.getByRole('button', { name: 'Continue' }).click()
+}
+
+async function openApp(page: Page, email: string, path = '/') {
+  await page.goto(path)
+  await edgeSignIn(page, email)
+  await expect(page.getByRole('button', { name: 'Add cards' })).toBeVisible()
+}
+
+async function upload(page: Page) {
+  await page.locator('input[type=file][accept="image/*"]').setInputFiles({ name: 'maria.png', mimeType: 'image/png', buffer: PNG_BUFFER })
+  await expect(page.getByLabel('Name', { exact: true })).toHaveValue('Maria Okafor')
+  await expect(page.getByRole('status')).toContainText('Cards added')
+}
+
+test.beforeEach(async ({ request }) => {
+  await request.get('/__test/openai?mode=card')
+})
+
+test('first visit goes through the edge, returns to the same address, and shows no CardCap sign-in or password screens', async ({ page, baseURL }) => {
+  const email = uniqueEmail('alice')
+  await page.goto('/?from=bookmark')
+  await expect(page).toHaveURL(/\/sim-idp\?return=/)
+  await edgeSignIn(page, email)
+  await expect(page).toHaveURL(new URL('/?from=bookmark', baseURL).toString())
+  await expect(page.getByRole('button', { name: 'Add cards' })).toBeVisible()
+  await expectSignedInAs(page, email)
+  await expect(page.getByRole('heading', { name: 'Sign in to CardCap' })).toHaveCount(0)
+  await page.getByRole('button', { name: /^Account menu/ }).click()
+  await expect(page.getByRole('menuitem', { name: 'Set password' })).toHaveCount(0)
+  await expect(page.getByRole('menuitem', { name: 'Sign out' })).toBeVisible()
+})
+
+test('upload → review/edit → save → reload keeps the exact values behind Access', async ({ page }) => {
+  await openApp(page, uniqueEmail('alice'))
+  await upload(page)
+  await page.getByLabel('Name', { exact: true }).fill('Maria Okafor-Lee')
+  await page.getByRole('button', { name: 'Save Contact' }).click()
+  await expect(page.getByText('Saved.', { exact: true })).toBeVisible()
+  await page.reload()
+  await openContact(page, 'Maria Okafor-Lee')
+  await expect(page.getByLabel('Name', { exact: true })).toHaveValue('Maria Okafor-Lee')
+  await expect(page.locator('.source-body img')).toBeVisible()
+})
+
+test('when the session ends the person is told, keeps their edits, signs in again at the edge and is back where they were', async ({ page, request }) => {
+  const email = uniqueEmail('alice')
+  await openApp(page, email)
+  await upload(page)
+  await page.getByLabel('Name', { exact: true }).fill('Maria Okafor-Lee')
+
+  await request.get('/__test/access-expire') // the edge session ends; the next API call gets an edge redirect
+  await page.getByRole('button', { name: 'Save Contact' }).click()
+  const dialog = page.getByRole('alertdialog', { name: 'Your session ended' })
+  await expect(dialog).toBeVisible()
+  await expect(dialog).toContainText('We kept the edits you had not saved')
+  await expect(page.locator('.banner.error')).toHaveCount(0)
+
+  await dialog.getByRole('button', { name: 'Sign in again' }).click()
+  await edgeSignIn(page, email)
+  await expect(page.getByLabel('Name', { exact: true })).toHaveValue('Maria Okafor-Lee')
+  await expect(page.getByRole('status')).toContainText('We restored the edits you had not saved')
+  await page.getByRole('button', { name: 'Save Contact' }).click()
+  await expect(page.getByText('Saved.', { exact: true })).toBeVisible()
+  await page.reload()
+  await openContact(page, 'Maria Okafor-Lee')
+  await expect(page.getByLabel('Name', { exact: true })).toHaveValue('Maria Okafor-Lee')
+})
+
+const SIGN_OUT_TITLE = 'Sign out of CardCap and Blackboard?'
+
+test('sign out asks first, naming Blackboard, then leaves through the Access logout address and the app is closed again', async ({ page }) => {
+  await openApp(page, uniqueEmail('alice'))
+  await chooseFromMenu(page, 'Account', 'Sign out')
+  const dialog = page.getByRole('alertdialog', { name: SIGN_OUT_TITLE })
+  await expect(dialog).toBeVisible()
+  await expect(dialog).toContainText('This also signs you out of Blackboard')
+  await expect(dialog).toContainText('up to 30 seconds')
+  // The safe choice has focus; nothing has been signed out yet.
+  await expect(dialog.getByRole('button', { name: 'Cancel' })).toBeFocused()
+  await expect(page).not.toHaveURL(/\/cdn-cgi\/access\/logout/)
+  await dialog.getByRole('button', { name: 'Sign out', exact: true }).click()
+  await expect(page).toHaveURL(/\/cdn-cgi\/access\/logout$/)
+  await expect(page.getByRole('heading', { name: 'You are signed out' })).toBeVisible()
+  await page.goto('/')
+  await expect(page).toHaveURL(/\/sim-idp/)
+})
+
+test('cancelling (button or Escape) keeps the session and puts focus back on the Account button', async ({ page }) => {
+  await openApp(page, uniqueEmail('alice'))
+  const account = page.getByRole('button', { name: /^Account menu/ })
+  for (const way of ['button', 'escape'] as const) {
+    await chooseFromMenu(page, 'Account', 'Sign out')
+    const dialog = page.getByRole('alertdialog', { name: SIGN_OUT_TITLE })
+    await expect(dialog).toBeVisible()
+    // Tab stays inside the dialog.
+    await page.keyboard.press('Tab')
+    await expect(dialog.getByRole('button', { name: 'Sign out', exact: true })).toBeFocused()
+    await page.keyboard.press('Tab')
+    await expect(dialog.getByRole('button', { name: 'Cancel' })).toBeFocused()
+    if (way === 'button') await dialog.getByRole('button', { name: 'Cancel' }).click()
+    else await page.keyboard.press('Escape')
+    await expect(dialog).toHaveCount(0)
+    await expect(account).toBeFocused()
+    await expect(page).not.toHaveURL(/\/cdn-cgi\/access\/logout/)
+  }
+  // Still signed in: the app works.
+  expect((await page.request.get('/api/me')).status()).toBe(200)
+})
+
+test('an account that needs review is refused with a clear message and a way out', async ({ page, request }) => {
+  const email = uniqueEmail('dana')
+  await request.get(`/__test/seed-duplicate-email?email=${encodeURIComponent(email)}`)
+  await page.goto('/')
+  await edgeSignIn(page, email)
+  const dialog = page.getByRole('alertdialog', { name: 'This account cannot use CardCap' })
+  await expect(dialog).toBeVisible()
+  await expect(dialog).toContainText('Account access requires review.')
+  await expect(dialog.getByRole('link', { name: 'cody@copperstateit.com' })).toBeVisible()
+  await expect(dialog.getByRole('button', { name: 'Sign out and use another account' })).toBeFocused()
+  // The way out works even though the Worker refuses this account, and it asks first because it is the shared sign-out.
+  await dialog.getByRole('button', { name: 'Sign out and use another account' }).click()
+  const confirm = page.getByRole('alertdialog', { name: SIGN_OUT_TITLE })
+  await expect(confirm).toBeVisible()
+  await expect(confirm).toContainText('Blackboard')
+  // Staying signed in goes back to the refusal message.
+  await confirm.getByRole('button', { name: 'Cancel' }).click()
+  await expect(dialog).toBeVisible()
+  await dialog.getByRole('button', { name: 'Sign out and use another account' }).click()
+  await confirm.getByRole('button', { name: 'Sign out', exact: true }).click()
+  await expect(page).toHaveURL(/\/cdn-cgi\/access\/logout$/)
+})
+
+async function person(browser: Browser, baseURL: string | undefined, name: string) {
+  const context = await browser.newContext({ baseURL })
+  const page = await context.newPage()
+  await openApp(page, uniqueEmail(name))
+  return { context, page }
+}
+
+test("another signed-in person cannot see, open the image of, or change someone else's contact", async ({ browser, baseURL }) => {
+  const alice = await person(browser, baseURL, 'alice')
+  await upload(alice.page)
+  const imageUrl = (await alice.page.locator('.source-body img').getAttribute('src'))!
+  const contacts = (await (await alice.page.request.get('/api/contacts')).json()) as { contacts: Array<{ id: string }> }
+  const id = contacts.contacts[0].id
+
+  const bob = await person(browser, baseURL, 'bob')
+  await expect(bob.page.getByRole('heading', { name: WELCOME_HEADING })).toBeVisible()
+  expect((await bob.page.request.get(imageUrl)).status()).toBe(404)
+  expect((await bob.page.request.get(`/api/contacts/${id}`)).status()).toBe(404)
+  expect((await bob.page.request.put(`/api/contacts/${id}`, { data: { name: 'Hijacked' } })).status()).toBe(404)
+  expect((await bob.page.request.delete(`/api/contacts/${id}`)).status()).toBe(404)
+
+  await alice.page.reload()
+  await openContact(alice.page, 'Maria Okafor')
+  await expect(alice.page.getByLabel('Name', { exact: true })).toHaveValue('Maria Okafor')
+  await alice.context.close()
+  await bob.context.close()
+})
+
+test.describe('on a phone', () => {
+  test.use({ viewport: { width: 375, height: 812 }, hasTouch: true })
+
+  test('signed-in screen fits, shows who is signed in, and every control is at least 44px tall', async ({ page }) => {
+    const email = uniqueEmail('alice')
+    await openApp(page, email)
+    await upload(page)
+    await expectSignedInAs(page, email)
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(375)
+    const small = await page.evaluate(() =>
+      [...document.querySelectorAll<HTMLElement>('button, a.btn, input:not([type=file]), select, textarea, .contact-row')]
+        .filter((e) => e.getBoundingClientRect().width > 0 && e.getBoundingClientRect().height < 44)
+        .map((e) => `${e.tagName}:${(e.innerText || e.className).slice(0, 24)}:${Math.round(e.getBoundingClientRect().height)}`),
+    )
+    expect(small).toEqual([])
+  })
+
+  test('the sign-out question fits on a phone with 44px buttons and no sideways scroll', async ({ page }) => {
+    await openApp(page, uniqueEmail('alice'))
+    await chooseFromMenu(page, 'Account', 'Sign out')
+    const dialog = page.getByRole('alertdialog', { name: SIGN_OUT_TITLE })
+    await expect(dialog).toBeVisible()
+    const box = (await dialog.boundingBox())!
+    expect(box.x).toBeGreaterThanOrEqual(0)
+    expect(box.x + box.width).toBeLessThanOrEqual(375)
+    expect(box.y).toBeGreaterThanOrEqual(0)
+    expect(box.y + box.height).toBeLessThanOrEqual(812)
+    for (const name of ['Cancel', 'Sign out']) {
+      const button = (await dialog.getByRole('button', { name, exact: true }).boundingBox())!
+      expect(button.height, name).toBeGreaterThanOrEqual(44)
+    }
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(375)
+  })
+})
diff --git a/e2e/browser/cardcap.spec.ts b/e2e/browser/cardcap.spec.ts
index ff07091..aa94f00 100644
--- a/e2e/browser/cardcap.spec.ts
+++ b/e2e/browser/cardcap.spec.ts
@@ -1,6 +1,7 @@
 import { readFileSync } from 'node:fs'
 import { expect, test, type APIRequestContext, type Browser, type Page } from '@playwright/test'
 import { PNG_BUFFER, PNG_HEIGHT, PNG_WIDTH } from '../fixtures'
+import { chooseFromMenu, openContact, WELCOME_HEADING } from './helpers'
 
 // Real Chromium against the built SPA + the real Worker on local Miniflare (see e2e/browser/server.ts).
 // OpenAI/Resend are intercepted by the server; data is synthetic.
@@ -19,7 +20,7 @@ async function signIn(page: Page, request: APIRequestContext, email: string) {
   const link = await (await request.get(`/__test/login-link?email=${encodeURIComponent(email)}`)).text()
   await page.goto(link)
   await expect(page.getByRole('button', { name: 'Add Cards' })).toBeVisible()
-  await expect(page.getByRole('button', { name: 'Sign out' })).toBeVisible()
+  await expect(page.getByRole('button', { name: /^Account menu/ })).toBeVisible()
 }
 
 async function uploadCard(page: Page, name = 'maria-card.png') {
@@ -30,8 +31,8 @@ async function r2Keys(request: APIRequestContext): Promise<string[]> {
   return (await request.get('/__test/r2')).json()
 }
 
-async function downloadText(page: Page, buttonName: string): Promise<{ text: string; filename: string }> {
-  const [download] = await Promise.all([page.waitForEvent('download'), page.getByRole('button', { name: buttonName, exact: true }).click()])
+async function downloadText(page: Page, itemName: string): Promise<{ text: string; filename: string }> {
+  const [download] = await Promise.all([page.waitForEvent('download'), chooseFromMenu(page, 'Export', itemName)])
   return { text: readFileSync(await download.path(), 'utf8'), filename: download.suggestedFilename() }
 }
 
@@ -45,7 +46,7 @@ test('upload → review/edit → save → reload → export keeps exactly the co
 
   // Draft from the card, flagged for review.
   await expect(page.getByLabel('Name', { exact: true })).toHaveValue('Maria Okafor')
-  await expect(page.getByText('Needs review').first()).toBeVisible()
+  await expect(page.locator('.review-chip')).toBeVisible()
   await expect(page.getByLabel('Company', { exact: true })).toHaveValue('Sunrise Realty Group')
 
   // Review/edit like a person: fix name and role, set status, and use the explicit Save Contact button first.
@@ -54,27 +55,29 @@ test('upload → review/edit → save → reload → export keeps exactly the co
   await page.locator('.form-grid select').selectOption('Active')
   await page.getByRole('button', { name: 'Save Contact' }).click()
   await expect(page.getByText('Saved.', { exact: true })).toBeVisible()
-  await expect(page.getByText('Needs review').first()).toBeVisible() // saving alone does not clear the review flag
+  await expect(page.locator('.review-chip')).toBeVisible() // saving alone does not clear the review flag
 
   // Reload after Save Contact: values persisted on the server, still flagged for review.
   await page.reload()
+  await openContact(page, 'Maria Okafor-Lee')
   await expect(page.getByLabel('Name', { exact: true })).toHaveValue('Maria Okafor-Lee')
   await expect(page.getByLabel('Role', { exact: true })).toHaveValue('Managing Broker')
   await expect(page.locator('.form-grid select')).toHaveValue('Active')
-  await expect(page.getByText('Needs review').first()).toBeVisible()
+  await expect(page.locator('.review-chip')).toBeVisible()
 
   // Then mark reviewed, which clears the flag.
   await page.getByRole('button', { name: 'Mark Reviewed' }).click()
   await expect(page.getByText('Marked reviewed.', { exact: true })).toBeVisible()
-  await expect(page.getByText('Needs review')).toHaveCount(0)
+  await expect(page.locator('.review-chip')).toHaveCount(0)
 
   // Reload: same values come back from the server, not from client memory; the real image renders.
   await page.reload()
+  await openContact(page, 'Maria Okafor-Lee')
   await expect(page.getByLabel('Name', { exact: true })).toHaveValue('Maria Okafor-Lee')
   await expect(page.getByLabel('Role', { exact: true })).toHaveValue('Managing Broker')
   await expect(page.locator('.form-grid select')).toHaveValue('Active')
-  await expect(page.getByText('Needs review')).toHaveCount(0)
-  const image = page.locator('img').first()
+  await expect(page.locator('.review-chip')).toHaveCount(0)
+  const image = page.locator('.source-body img')
   await expect(image).toBeVisible()
   await expect.poll(() => image.evaluate((img: HTMLImageElement) => `${img.complete}:${img.naturalWidth}x${img.naturalHeight}`)).toBe(`true:${PNG_WIDTH}x${PNG_HEIGHT}`)
 
@@ -103,7 +106,7 @@ test('a failed extraction shows a safe message, leaves nothing behind, and a ret
   await expect(banner).not.toContainText(UPSTREAM_SECRET)
   await expect(banner).not.toContainText('OpenAI')
   expect(await r2Keys(request)).toEqual(r2Before)
-  await expect(page.getByText('No contacts yet.')).toBeVisible()
+  await expect(page.getByRole('heading', { name: WELCOME_HEADING })).toBeVisible()
 
   await request.get('/__test/openai?mode=card')
   await uploadCard(page)
@@ -134,13 +137,13 @@ test("cross-user isolation: another user's browser session cannot see, read the
   const alice = await newUser(browser, request, 'alice')
   await uploadCard(alice.page)
   await expect(alice.page.getByLabel('Name', { exact: true })).toHaveValue('Maria Okafor')
-  const imageUrl = (await alice.page.locator('img').first().getAttribute('src'))!
+  const imageUrl = (await alice.page.locator('.source-body img').getAttribute('src'))!
   const contacts = (await (await alice.page.request.get('/api/contacts')).json()) as { contacts: Array<{ id: string }> }
   const aliceContactId = contacts.contacts[0].id
   expect((await alice.page.request.get(imageUrl)).status()).toBe(200)
 
   const bob = await newUser(browser, request, 'bob')
-  await expect(bob.page.getByText('No contacts yet.')).toBeVisible()
+  await expect(bob.page.getByRole('heading', { name: WELCOME_HEADING })).toBeVisible()
   await expect(bob.page.getByText('Maria Okafor')).toHaveCount(0)
   expect((await bob.page.request.get(imageUrl)).status()).toBe(404)
   expect((await bob.page.request.get(`/api/contacts/${aliceContactId}`)).status()).toBe(404)
@@ -151,6 +154,7 @@ test("cross-user isolation: another user's browser session cannot see, read the
 
   // Alice is untouched and still sees her image.
   await alice.page.reload()
+  await openContact(alice.page, 'Maria Okafor')
   await expect(alice.page.getByLabel('Name', { exact: true })).toHaveValue('Maria Okafor')
   expect((await alice.page.request.get(imageUrl)).status()).toBe(200)
   await alice.context.close()
@@ -163,7 +167,7 @@ test('password: set it in the account panel, sign out, then sign in with email a
   await uploadCard(page)
   await expect(page.getByLabel('Name', { exact: true })).toHaveValue('Maria Okafor')
 
-  await page.getByRole('button', { name: 'Set password' }).click()
+  await chooseFromMenu(page, 'Account', 'Set password')
   await page.getByLabel('New password').fill('correct horse battery')
   await page.getByLabel('Confirm password').fill('different password')
   await page.getByRole('button', { name: 'Save password' }).click()
@@ -173,7 +177,7 @@ test('password: set it in the account panel, sign out, then sign in with email a
   await page.getByRole('button', { name: 'Save password' }).click()
   await expect(page.getByText('Password saved.')).toBeVisible()
 
-  await page.getByRole('button', { name: 'Sign out' }).click()
+  await chooseFromMenu(page, 'Account', 'Sign out')
   await expect(page.getByRole('heading', { name: 'Sign in to CardCap' })).toBeVisible()
 
   await page.getByPlaceholder('you@company.com').fill(email)
@@ -183,9 +187,11 @@ test('password: set it in the account panel, sign out, then sign in with email a
 
   await page.getByLabel('Password', { exact: true }).fill('correct horse battery')
   await page.getByRole('button', { name: 'Sign in', exact: true }).click()
+  await openContact(page, 'Maria Okafor')
   await expect(page.getByLabel('Name', { exact: true })).toHaveValue('Maria Okafor')
 
   // The session survives a reload.
   await page.reload()
+  await openContact(page, 'Maria Okafor')
   await expect(page.getByLabel('Name', { exact: true })).toHaveValue('Maria Okafor')
 })
diff --git a/e2e/browser/helpers.ts b/e2e/browser/helpers.ts
new file mode 100644
index 0000000..8cf4425
--- /dev/null
+++ b/e2e/browser/helpers.ts
@@ -0,0 +1,22 @@
+import { expect, type Page } from '@playwright/test'
+
+export const WELCOME_HEADING = 'Add your first business cards'
+
+/** Open the Export or Account menu and press one of its items. */
+export async function chooseFromMenu(page: Page, menu: 'Export' | 'Account', item: string) {
+  const button = menu === 'Export' ? page.getByRole('button', { name: 'Export', exact: true }) : page.getByRole('button', { name: /^Account menu/ })
+  await button.click()
+  await page.getByRole('menuitem', { name: item, exact: true }).click()
+}
+
+/** Open a contact from the list (nothing is open by default after a page load). */
+export async function openContact(page: Page, name: string) {
+  await page.locator('.contact-row', { hasText: name }).first().click()
+  await expect(page.getByLabel('Name', { exact: true })).toBeVisible()
+}
+
+export async function expectSignedInAs(page: Page, email: string) {
+  await page.getByRole('button', { name: /^Account menu/ }).click()
+  await expect(page.getByRole('menu')).toContainText(`Signed in as ${email}`)
+  await page.keyboard.press('Escape')
+}
diff --git a/e2e/browser/layout.spec.ts b/e2e/browser/layout.spec.ts
new file mode 100644
index 0000000..b26e28b
--- /dev/null
+++ b/e2e/browser/layout.spec.ts
@@ -0,0 +1,219 @@
+import { expect, test, type APIRequestContext, type Page } from '@playwright/test'
+import { PNG_BUFFER } from '../fixtures'
+import { WELCOME_HEADING } from './helpers'
+
+// Layout around the next action: one welcome state when empty, search + list when there are contacts,
+// editor + card photo only when a contact is open, menus for Export and Account, one task at a time on phones.
+
+let counter = 0
+const uniqueEmail = () => `layout-${Date.now()}-${++counter}@example.test`
+
+async function signIn(page: Page, request: APIRequestContext) {
+  const email = uniqueEmail()
+  await request.get('/__test/openai?mode=card')
+  await page.goto('/')
+  await page.getByRole('button', { name: 'Use email link' }).click()
+  await page.getByPlaceholder('you@company.com').fill(email)
+  await page.getByRole('button', { name: 'Email me a sign-in link' }).click()
+  await expect.poll(async () => (await request.get(`/__test/login-link?email=${encodeURIComponent(email)}`)).status()).toBe(200)
+  await page.goto(await (await request.get(`/__test/login-link?email=${encodeURIComponent(email)}`)).text())
+  await expect(page.getByRole('button', { name: /^Account menu/ })).toBeVisible()
+}
+
+const csv = [
+  'name,company,role,email,phones,website,address,tags,status,next_step,notes',
+  'Ada Lovelace,Analytical Engines,Founder,ada@engines.example,,,,,New,,',
+  'Zed Zimmer,Zenith Title,Agent,zed@zenith.example,,,,,Follow up,,',
+  'Bea Brandt,Bridge Loans,Broker,bea@bridge.example,,,,,Active,,',
+].join('\n')
+
+async function importContacts(page: Page) {
+  await page.locator('input[type=file][accept*=".csv"]').setInputFiles({ name: 'people.csv', mimeType: 'text/csv', buffer: Buffer.from(csv) })
+  await expect(page.locator('.contact-row')).toHaveCount(3)
+}
+
+async function uploadCard(page: Page) {
+  await page.locator('input[type=file][accept="image/*"]').setInputFiles({ name: 'maria.png', mimeType: 'image/png', buffer: PNG_BUFFER })
+  await expect(page.getByLabel('Name', { exact: true })).toHaveValue('Maria Okafor')
+  await expect(page.getByRole('status')).toContainText('Cards added')
+}
+
+test('with no contacts there is one welcoming state and nothing else competing with it', async ({ page, request }) => {
+  await signIn(page, request)
+  await expect(page.getByRole('heading', { name: WELCOME_HEADING })).toBeVisible()
+  await expect(page.getByRole('heading')).toHaveCount(2) // the app name and the welcome
+  // No second empty message, no list tools, no editor, no photo panel.
+  await expect(page.getByText('Ready for your first batch')).toHaveCount(0)
+  await expect(page.getByText('No contacts yet')).toHaveCount(0)
+  await expect(page.getByRole('searchbox')).toHaveCount(0)
+  await expect(page.locator('.contact-row')).toHaveCount(0)
+  await expect(page.getByLabel('Name', { exact: true })).toHaveCount(0)
+  await expect(page.getByRole('complementary', { name: 'Card photo' })).toHaveCount(0)
+  // The next action is obvious: Add cards is the one primary button; Import is secondary.
+  await expect(page.getByRole('banner').getByRole('button', { name: 'Add cards' })).toHaveClass(/primary/)
+  await expect(page.getByRole('banner').getByRole('button', { name: 'Import' })).not.toHaveClass(/primary/)
+  // Only one primary button on the whole screen: the header's Add cards. The welcome offers just the secondary Import.
+  await expect(page.locator('.btn.primary')).toHaveCount(1)
+  await expect(page.getByRole('button', { name: 'Add cards' })).toHaveCount(1)
+  await expect(page.locator('.welcome-actions .btn')).toHaveText(['Import a file'])
+  await expect(page.getByRole('button', { name: 'Import a file' })).not.toHaveClass(/primary/)
+})
+
+test('export formats live in one Export menu and sign out lives in the Account menu', async ({ page, request }) => {
+  await signIn(page, request)
+  const header = page.getByRole('banner')
+  // No loose export or sign-out buttons in the header.
+  for (const name of ['CSV', 'vCard', 'JSON', 'HTML', 'iContact CSV', 'Sign out', 'Set password']) {
+    await expect(header.getByRole('button', { name, exact: true })).toHaveCount(0)
+  }
+  const exportButton = header.getByRole('button', { name: 'Export', exact: true })
+  await expect(exportButton).toHaveAttribute('aria-expanded', 'false')
+  await exportButton.click()
+  await expect(exportButton).toHaveAttribute('aria-expanded', 'true')
+  await expect(page.getByRole('menuitem')).toHaveText(['CSV', 'vCard', 'JSON', 'HTML', 'iContact CSV'])
+  // Keyboard: the first item is focused, arrows move, Escape closes and puts focus back on the button.
+  await expect(page.getByRole('menuitem', { name: 'CSV', exact: true })).toBeFocused()
+  await page.keyboard.press('ArrowDown')
+  await expect(page.getByRole('menuitem', { name: 'vCard', exact: true })).toBeFocused()
+  await page.keyboard.press('End')
+  await expect(page.getByRole('menuitem', { name: 'iContact CSV', exact: true })).toBeFocused()
+  await page.keyboard.press('Escape')
+  await expect(page.getByRole('menu')).toHaveCount(0)
+  await expect(exportButton).toBeFocused()
+  // Clicking elsewhere closes it too.
+  await exportButton.click()
+  await page.getByRole('heading', { name: WELCOME_HEADING }).click()
+  await expect(page.getByRole('menu')).toHaveCount(0)
+
+  const account = header.getByRole('button', { name: /^Account menu/ })
+  await account.click()
+  await expect(page.getByRole('menu')).toContainText('Signed in as layout-')
+  await expect(page.getByRole('menuitem')).toHaveText(['Set password', 'Sign out'])
+})
+
+test('once there are contacts: search and list first; the editor and card photo open only when one is selected', async ({ page, request }) => {
+  await signIn(page, request)
+  await importContacts(page)
+  await page.reload()
+
+  // List state.
+  await expect(page.getByRole('heading', { name: WELCOME_HEADING })).toHaveCount(0)
+  await expect(page.getByRole('searchbox')).toBeVisible()
+  await expect(page.locator('.contact-row')).toHaveCount(3)
+  await expect(page.getByLabel('Name', { exact: true })).toHaveCount(0)
+  await expect(page.getByRole('complementary', { name: 'Card photo' })).toHaveCount(0)
+
+  // Search narrows the list.
+  await page.getByRole('searchbox').fill('zenith')
+  await expect(page.locator('.contact-row')).toHaveCount(1)
+  await expect(page.locator('.contact-row')).toContainText('Zed Zimmer')
+  await page.getByRole('searchbox').fill('no such person')
+  await expect(page.getByText('No contacts match.')).toBeVisible()
+  await page.getByRole('button', { name: 'Clear search' }).click()
+  await expect(page.locator('.contact-row')).toHaveCount(3)
+
+  // Editing state: pick one.
+  await page.locator('.contact-row', { hasText: 'Zed Zimmer' }).click()
+  await expect(page.getByLabel('Name', { exact: true })).toHaveValue('Zed Zimmer')
+  await expect(page.getByRole('complementary', { name: 'Card photo' })).toBeVisible()
+  await expect(page.locator('.contact-row.active')).toContainText('Zed Zimmer')
+  // The list stays next to the editor on a wide screen.
+  await expect(page.getByRole('searchbox')).toBeVisible()
+})
+
+test('after adding a card the new contact opens for review with its photo', async ({ page, request }) => {
+  await signIn(page, request)
+  await uploadCard(page)
+  await expect(page.getByRole('complementary', { name: 'Card photo' })).toBeVisible()
+  await expect(page.locator('.source-body img')).toBeVisible()
+  await expect(page.locator('.review-chip')).toBeVisible()
+})
+
+test('controls are compact with a mouse', async ({ page, request }) => {
+  await signIn(page, request)
+  await importContacts(page)
+  const heights = await page.evaluate(() =>
+    [...document.querySelectorAll<HTMLElement>('.toolbar .btn, .filters input, .filters select')].map((e) => Math.round(e.getBoundingClientRect().height)),
+  )
+  expect(heights.length).toBeGreaterThan(3)
+  for (const height of heights) {
+    expect(height).toBeGreaterThanOrEqual(40)
+    expect(height).toBeLessThanOrEqual(41)
+  }
+})
+
+test.describe('on a phone: one task at a time', () => {
+  test.use({ viewport: { width: 375, height: 812 }, hasTouch: true })
+
+  test('welcome, then list, then one contact at a time with details and photo on separate screens', async ({ page, request }) => {
+    await signIn(page, request)
+    // Empty: only the welcome.
+    await expect(page.getByRole('heading', { name: WELCOME_HEADING })).toBeVisible()
+    await expect(page.getByRole('searchbox')).toHaveCount(0)
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(375)
+
+    await importContacts(page)
+    await page.reload()
+    // List: only the list.
+    await expect(page.getByRole('searchbox')).toBeVisible()
+    await expect(page.getByLabel('Name', { exact: true })).toHaveCount(0)
+
+    // Open one: only the editor (the list and photo are not on screen).
+    await page.locator('.contact-row', { hasText: 'Ada Lovelace' }).click()
+    await expect(page.getByLabel('Name', { exact: true })).toBeVisible()
+    await expect(page.getByRole('searchbox')).toBeHidden()
+    await expect(page.getByRole('complementary', { name: 'Card photo' })).toBeHidden()
+
+    // Photo screen replaces the form.
+    await page.getByRole('button', { name: 'Card photo', exact: true }).click()
+    await expect(page.getByRole('complementary', { name: 'Card photo' })).toBeVisible()
+    await expect(page.getByLabel('Name', { exact: true })).toBeHidden()
+    await page.getByRole('button', { name: 'Details', exact: true }).click()
+    await expect(page.getByLabel('Name', { exact: true })).toBeVisible()
+
+    // Back to the list.
+    await page.getByRole('button', { name: 'All contacts', exact: true }).click()
+    await expect(page.getByRole('searchbox')).toBeVisible()
+    await expect(page.getByLabel('Name', { exact: true })).toHaveCount(0)
+  })
+
+  test('touch targets are 44px and nothing scrolls sideways in each state', async ({ page, request }) => {
+    await signIn(page, request)
+    const small = () =>
+      page.evaluate(() =>
+        [...document.querySelectorAll<HTMLElement>('button, a.btn, .quick-links a, input:not([type=file]), select, textarea, .contact-row, [role=menuitem]')]
+          .filter((e) => e.getBoundingClientRect().width > 0 && e.getBoundingClientRect().height > 0 && e.getBoundingClientRect().height < 44)
+          .map((e) => `${e.tagName}:${(e.innerText || e.className).slice(0, 24)}:${Math.round(e.getBoundingClientRect().height)}`),
+      )
+    expect(await small()).toEqual([])
+    await importContacts(page)
+    await page.reload()
+    expect(await small()).toEqual([])
+    await page.locator('.contact-row', { hasText: 'Ada Lovelace' }).click()
+    expect(await small()).toEqual([])
+    await page.getByRole('banner').getByRole('button', { name: 'Export', exact: true }).click()
+    expect(await small()).toEqual([])
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(375)
+  })
+})
+
+test('fonts are served from this site: no request goes to a font provider and the Atkinson faces load', async ({ page, request }) => {
+  const hosts = new Set<string>()
+  const fontFiles: Array<{ url: string; status: number }> = []
+  page.on('request', (req) => hosts.add(new URL(req.url()).host))
+  page.on('response', (res) => {
+    if (res.url().endsWith('.woff2')) fontFiles.push({ url: new URL(res.url()).pathname, status: res.status() })
+  })
+  await signIn(page, request)
+  await page.evaluate(() => document.fonts.ready)
+  expect([...hosts]).toEqual(['127.0.0.1:5199'])
+  expect(await page.evaluate(() => document.fonts.check('16px "Atkinson Hyperlegible Next"'))).toBe(true)
+  expect(await page.evaluate(() => document.fonts.check('12px "Atkinson Hyperlegible Mono"'))).toBe(true)
+  expect(fontFiles.length).toBeGreaterThan(0)
+  for (const file of fontFiles) {
+    expect(file.url).toMatch(/^\/fonts\/atkinson-.*\.woff2$/)
+    expect(file.status).toBe(200)
+  }
+  // The renderer really uses it (not the system fallback).
+  expect(await page.evaluate(() => getComputedStyle(document.body).fontFamily)).toContain('Atkinson Hyperlegible Next')
+})
diff --git a/e2e/browser/server.ts b/e2e/browser/server.ts
index b6d2405..6aeba98 100644
--- a/e2e/browser/server.ts
+++ b/e2e/browser/server.ts
@@ -1,5 +1,8 @@
 // Serves the built SPA (dist/client) plus the real Worker on local Miniflare for browser tests.
 // /__test/* are test-only controls; they are not part of the app.
+// With ACCESS_SIM=1 the Worker runs in AUTH_MODE=access behind a SIMULATED Cloudflare Access edge: nothing is served without
+// a simulated session cookie, unauthenticated requests (pages and API calls alike) are redirected to a fake sign-in page,
+// and signed-in requests reach the Worker with a signed Access JWT. This imitates the edge; it is not live Access.
 import { existsSync, readFileSync } from 'node:fs'
 import { createServer } from 'node:http'
 import { dirname, extname, join, resolve } from 'node:path'
@@ -8,10 +11,17 @@ import { startHarness } from '../harness'
 
 const port = Number(process.env.PORT || 5199)
 const dist = resolve(process.env.CARDCAP_DIST || join(dirname(fileURLToPath(import.meta.url)), '..', '..', 'dist', 'client'))
-const types: Record<string, string> = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.svg': 'image/svg+xml', '.png': 'image/png' }
+const accessSim = process.env.ACCESS_SIM === '1'
+const types: Record<string, string> = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.svg': 'image/svg+xml', '.png': 'image/png', '.woff2': 'font/woff2', '.txt': 'text/plain' }
 
 async function main() {
-  const h = await startHarness()
+  const h = await startHarness({ access: accessSim })
+  let epoch = 1 // bumping this ends every simulated session at once
+  const simCookie = (req: { headers: { cookie?: string } }) => /(?:^|;\s*)sim_access=([^;]+)/.exec(req.headers.cookie || '')?.[1]
+  const simEmail = (req: { headers: { cookie?: string } }) => {
+    const [email, seen] = decodeURIComponent(simCookie(req) || '').split('|')
+    return email && Number(seen) === epoch ? email : ''
+  }
   h.openai.mode = {
     kind: 'card',
     card: {
@@ -24,6 +34,34 @@ async function main() {
   createServer(async (req, res) => {
     try {
       const url = new URL(req.url || '/', `http://127.0.0.1:${port}`)
+      if (accessSim && !url.pathname.startsWith('/__test/')) {
+        if (url.pathname === '/sim-idp') {
+          if (req.method === 'POST') {
+            const form = new URLSearchParams(Buffer.concat(await collect(req)).toString())
+            const email = (form.get('email') || '').trim()
+            const back = form.get('return') || '/'
+            res.writeHead(302, { location: back.startsWith('/') && !back.startsWith('//') ? back : '/', 'set-cookie': `sim_access=${encodeURIComponent(`${email}|${epoch}`)}; Path=/; HttpOnly` }).end()
+            return
+          }
+          const back = url.searchParams.get('return') || '/'
+          res
+            .writeHead(200, { 'content-type': 'text/html' })
+            .end(`<!doctype html><html lang="en"><title>Simulated sign-in</title><main><h1>Simulated Access sign-in</h1><form method="post" action="/sim-idp"><label>Email <input name="email" type="email" required></label><input type="hidden" name="return" value="${back.replace(/"/g, '')}"><button>Continue</button></form></main>`)
+          return
+        }
+        if (url.pathname === '/cdn-cgi/access/logout') {
+          res.writeHead(200, { 'content-type': 'text/html', 'set-cookie': 'sim_access=; Path=/; Max-Age=0' }).end('<!doctype html><html lang="en"><title>Signed out</title><h1>You are signed out</h1>')
+          return
+        }
+        if (url.pathname === '/cdn-cgi/access/login') {
+          res.writeHead(302, { location: `/sim-idp?return=${encodeURIComponent(url.searchParams.get('redirect_url') || '/')}` }).end()
+          return
+        }
+        if (!simEmail(req)) {
+          res.writeHead(302, { location: `/sim-idp?return=${encodeURIComponent(url.pathname + url.search)}` }).end()
+          return
+        }
+      }
       if (url.pathname === '/__test/login-link') {
         const link = h.lastLoginLink(url.searchParams.get('email') || '')
         res.writeHead(link ? 200 : 404, { 'content-type': 'text/plain' }).end(link ? new URL(link).pathname + new URL(link).search : '')
@@ -37,6 +75,20 @@ async function main() {
         res.writeHead(200).end('ok')
         return
       }
+      if (url.pathname === '/__test/seed-duplicate-email') {
+        const email = url.searchParams.get('email') || ''
+        const db = await h.mf.getD1Database('DB')
+        for (const id of ['dup-a', 'dup-b']) {
+          await db.prepare("INSERT OR IGNORE INTO users (id, email, name, created_at, updated_at) VALUES (?, ?, ?, 't', 't')").bind(`${id}-${email}`, email, email).run()
+        }
+        res.writeHead(200).end('ok')
+        return
+      }
+      if (url.pathname === '/__test/access-expire') {
+        epoch += 1
+        res.writeHead(200).end('ok')
+        return
+      }
       if (url.pathname === '/__test/r2') {
         res.writeHead(200, { 'content-type': 'application/json' }).end(JSON.stringify(await h.r2Keys()))
         return
@@ -47,9 +99,16 @@ async function main() {
         const headers = new Headers()
         for (const [k, v] of Object.entries(req.headers)) if (v && k !== 'host' && k !== 'connection') headers.set(k, Array.isArray(v) ? v.join(', ') : v)
         const body = chunks.length ? Buffer.concat(chunks) : undefined
-        const out = (await h.mf.dispatchFetch(`https://cardcap.test${url.pathname}${url.search}`, {
-          method: req.method, headers, body: req.method === 'GET' || req.method === 'HEAD' ? undefined : body, redirect: 'manual',
-        } as never)) as unknown as Response
+        const hasBody = req.method !== 'GET' && req.method !== 'HEAD'
+        const out = accessSim
+          ? await h.access.raw(
+              `${url.pathname}${url.search}`,
+              { method: req.method, headers: { ...Object.fromEntries(headers), 'Cf-Access-Jwt-Assertion': h.access.token(simEmail(req)) }, body: hasBody ? body : undefined } as never,
+              'cardcap.test',
+            )
+          : ((await h.mf.dispatchFetch(`https://cardcap.test${url.pathname}${url.search}`, {
+              method: req.method, headers, body: hasBody ? body : undefined, redirect: 'manual',
+            } as never)) as unknown as Response)
         const outHeaders: Record<string, string | string[]> = {}
         out.headers.forEach((v, k) => { if (k !== 'set-cookie') outHeaders[k] = v })
         const cookies = (out.headers as unknown as { getSetCookie?: () => string[] }).getSetCookie?.() || []
@@ -68,3 +127,9 @@ async function main() {
 }
 
 void main()
+
+async function collect(req: AsyncIterable<Buffer | string>): Promise<Buffer[]> {
+  const chunks: Buffer[] = []
+  for await (const chunk of req) chunks.push(Buffer.from(chunk))
+  return chunks
+}
diff --git a/e2e/browser/session-states.spec.ts b/e2e/browser/session-states.spec.ts
new file mode 100644
index 0000000..d69a5c3
--- /dev/null
+++ b/e2e/browser/session-states.spec.ts
@@ -0,0 +1,162 @@
+import { expect, test, type APIRequestContext, type Page } from '@playwright/test'
+import { PNG_BUFFER } from '../fixtures'
+import { chooseFromMenu } from './helpers'
+
+// What a person sees when their sign-in ends, is refused, or the network drops.
+// These are SIMULATED: the server's answers are replaced with the responses Cloudflare Access and the Worker are
+// expected to send (401 + loginUrl, an edge login redirect, 403, a dead connection). They do not prove live Access behavior.
+
+let counter = 0
+const uniqueEmail = () => `states-${Date.now()}-${++counter}@example.test`
+
+async function signIn(page: Page, request: APIRequestContext, email: string) {
+  await page.goto('/')
+  await page.getByRole('button', { name: 'Use email link' }).click()
+  await page.getByPlaceholder('you@company.com').fill(email)
+  await page.getByRole('button', { name: 'Email me a sign-in link' }).click()
+  await expect.poll(async () => (await request.get(`/__test/login-link?email=${encodeURIComponent(email)}`)).status()).toBe(200)
+  await page.goto(await (await request.get(`/__test/login-link?email=${encodeURIComponent(email)}`)).text())
+  await expect(page.getByRole('button', { name: /^Account menu/ })).toBeVisible()
+}
+
+async function withContact(page: Page, request: APIRequestContext) {
+  await request.get('/__test/openai?mode=card')
+  await signIn(page, request, uniqueEmail())
+  await page.locator('input[type=file][accept="image/*"]').setInputFiles({ name: 'maria.png', mimeType: 'image/png', buffer: PNG_BUFFER })
+  await expect(page.getByLabel('Name', { exact: true })).toHaveValue('Maria Okafor')
+  // The upload has fully finished (list reloaded) before the test changes the session underneath it.
+  await expect(page.getByRole('status')).toContainText('Cards added')
+}
+
+const ended = {
+  status: 401,
+  contentType: 'application/json',
+  body: JSON.stringify({ error: 'Sign in to continue.', loginUrl: '/cdn-cgi/access/login' }),
+}
+
+test('expired session (401 + loginUrl): clear dialog, keeps unsaved edits, restores them after signing in again', async ({ page, request }) => {
+  await withContact(page, request)
+  await page.getByLabel('Name', { exact: true }).fill('Maria Okafor-Lee')
+
+  // The session ends: every save now gets the Access-mode 401.
+  await page.route('**/api/contacts/*', (route) => route.fulfill(ended))
+  await page.getByRole('button', { name: 'Save Contact' }).click()
+
+  const dialog = page.getByRole('alertdialog', { name: 'Your session ended' })
+  await expect(dialog).toBeVisible()
+  await expect(dialog).toContainText('Your contacts are saved')
+  await expect(dialog).toContainText('We kept the edits you had not saved')
+  await expect(dialog.getByRole('button', { name: 'Sign in again' })).toBeFocused()
+  // The page behind is not reachable while the dialog is open.
+  await expect(page.locator('.app-content')).toHaveAttribute('inert', '')
+  // Tab stays inside the dialog.
+  await page.keyboard.press('Tab')
+  await expect(dialog.getByRole('button', { name: 'Sign out' })).toBeFocused()
+  await page.keyboard.press('Tab')
+  await expect(dialog.getByRole('button', { name: 'Sign in again' })).toBeFocused()
+
+  // Signing in again (here: the session works again, then the page reloads) brings the edits back, unsaved.
+  await page.unroute('**/api/contacts/*')
+  await dialog.getByRole('button', { name: 'Sign in again' }).click()
+  await expect(page.getByLabel('Name', { exact: true })).toHaveValue('Maria Okafor-Lee')
+  await expect(page.getByRole('status')).toContainText('We restored the edits you had not saved')
+  // Nothing was saved behind the person's back.
+  const saved = (await (await page.request.get('/api/contacts')).json()) as { contacts: Array<{ name: string }> }
+  expect(saved.contacts.map((c) => c.name)).toEqual(['Maria Okafor'])
+  await page.getByRole('button', { name: 'Save Contact' }).click()
+  await expect(page.getByText('Saved.', { exact: true })).toBeVisible()
+})
+
+test('an edge login redirect instead of JSON is treated as an ended session, not a broken page', async ({ page, request }) => {
+  await withContact(page, request)
+  await page.route('**/api/contacts/*', (route) =>
+    route.fulfill({ status: 302, headers: { location: 'https://csi-test.cloudflareaccess.com/cdn-cgi/access/login/cardcap.test?kid=x' }, body: '' }),
+  )
+  await page.getByRole('button', { name: 'Mark Reviewed' }).click()
+  await expect(page.getByRole('alertdialog', { name: 'Your session ended' })).toBeVisible()
+  await expect(page.locator('.banner.error')).toHaveCount(0)
+})
+
+test('an account that is refused (403) sees who to contact and can sign out', async ({ page, request }) => {
+  await withContact(page, request)
+  await page.route('**/api/contacts/*', (route) =>
+    route.fulfill({ status: 403, contentType: 'application/json', body: JSON.stringify({ error: 'This account is not allowed to use CardCap.' }) }),
+  )
+  await page.getByRole('button', { name: 'Save Contact' }).click()
+  const dialog = page.getByRole('alertdialog', { name: 'This account cannot use CardCap' })
+  await expect(dialog).toBeVisible()
+  await expect(dialog).toContainText('This account is not allowed to use CardCap.')
+  await expect(dialog.getByRole('link', { name: 'cody@copperstateit.com' })).toHaveAttribute('href', 'mailto:cody@copperstateit.com')
+  await expect(dialog.getByRole('button', { name: 'Sign out and use another account' })).toBeFocused()
+})
+
+test('a dead connection says so, is not mistaken for a sign-out, and works again after retrying', async ({ page, request }) => {
+  await withContact(page, request)
+  await page.route('**/api/contacts/*', (route) => route.abort('connectionfailed'))
+  await page.getByRole('button', { name: 'Save Contact' }).click()
+  await expect(page.locator('.banner.error')).toContainText('reach CardCap')
+  await expect(page.getByRole('alertdialog')).toHaveCount(0)
+  await page.unroute('**/api/contacts/*')
+  await page.getByRole('button', { name: 'Save Contact' }).click()
+  await expect(page.getByText('Saved.', { exact: true })).toBeVisible()
+})
+
+test('sign out goes to the Access logout address the server returns', async ({ page, request }) => {
+  await withContact(page, request)
+  await page.route('**/api/auth/logout', (route) =>
+    route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ ok: true, logoutUrl: '/cdn-cgi/access/logout' }) }),
+  )
+  await page.route('**/cdn-cgi/access/logout', (route) => route.fulfill({ status: 200, contentType: 'text/html', body: '<h1>edge logout reached</h1>' }))
+  await chooseFromMenu(page, 'Account', 'Sign out')
+  // The current sign-in only ends this app's session, so there is no shared-sign-out question here.
+  await expect(page.getByRole('alertdialog')).toHaveCount(0)
+  await expect(page).toHaveURL(/\/cdn-cgi\/access\/logout$/)
+  await expect(page.getByRole('heading', { name: 'edge logout reached' })).toBeVisible()
+})
+
+test('a logout address that is not a same-site Access path is never followed', async ({ page, request }) => {
+  await withContact(page, request)
+  await page.route('**/api/auth/logout', (route) =>
+    // Like the real logout, this also clears the session cookie, so the sign-in screen is not skipped by an old session.
+    route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      headers: { 'set-cookie': 'cardcap_session=; Path=/; Max-Age=0' },
+      body: JSON.stringify({ ok: true, logoutUrl: 'https://evil.example/logout' }),
+    }),
+  )
+  await chooseFromMenu(page, 'Account', 'Sign out')
+  await expect(page).toHaveURL('http://127.0.0.1:5199/')
+  await expect(page.getByRole('heading', { name: 'Sign in to CardCap' })).toBeVisible()
+})
+
+test.describe('on a phone', () => {
+  test.use({ viewport: { width: 375, height: 812 }, hasTouch: true })
+
+  test('the session dialog fits, has 44px buttons, and the page does not scroll sideways', async ({ page, request }) => {
+    await withContact(page, request)
+    await page.route('**/api/contacts/*', (route) => route.fulfill(ended))
+    await page.getByRole('button', { name: 'Save Contact' }).click()
+    const dialog = page.getByRole('alertdialog', { name: 'Your session ended' })
+    await expect(dialog).toBeVisible()
+    const box = (await dialog.boundingBox())!
+    expect(box.x).toBeGreaterThanOrEqual(0)
+    expect(box.x + box.width).toBeLessThanOrEqual(375)
+    for (const name of ['Sign in again', 'Sign out']) {
+      const button = (await dialog.getByRole('button', { name }).boundingBox())!
+      expect(button.height, name).toBeGreaterThanOrEqual(44)
+    }
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(375)
+  })
+
+  test('the main screen has no sideways scroll and every control is at least 44px tall', async ({ page, request }) => {
+    await withContact(page, request)
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(375)
+    const small = await page.evaluate(() =>
+      [...document.querySelectorAll<HTMLElement>('button, a.btn, input:not([type=file]), select, textarea, .contact-row')]
+        .filter((e) => e.getBoundingClientRect().width > 0 && e.getBoundingClientRect().height < 44)
+        .map((e) => `${e.tagName}:${(e.innerText || e.className).slice(0, 24)}:${Math.round(e.getBoundingClientRect().height)}`),
+    )
+    expect(small).toEqual([])
+  })
+})
diff --git a/e2e/harness.ts b/e2e/harness.ts
index 9cd8536..e0080b5 100644
--- a/e2e/harness.ts
+++ b/e2e/harness.ts
@@ -1,8 +1,10 @@
-import { mkdirSync, mkdtempSync, readFileSync, writeFileSync } from 'node:fs'
+import { request as httpRequest } from 'node:http'
+import { mkdirSync, mkdtempSync, readdirSync, readFileSync, writeFileSync } from 'node:fs'
 import { tmpdir } from 'node:os'
 import { fileURLToPath } from 'node:url'
 import { dirname, join, resolve } from 'node:path'
 import { build } from 'esbuild'
+import { ACCESS_AUDIENCE, ACCESS_HOSTS, ACCESS_ISSUER, JWKS_URL, defaultClaims, makeAccessKey, mintToken, type AccessKey, type MintOptions, type TokenClaims } from './access'
 import { PNG_BYTES } from './fixtures'
 import { FormData as MfFormData, Miniflare, Response as MfResponse } from 'miniflare'
 
@@ -22,7 +24,25 @@ export type OpenAiMode =
 
 export type TraceEntry = { at: string; kind: 'request' | 'outbound'; method: string; url: string; status?: number; body?: string; note?: string }
 
+export type HarnessOptions = {
+  /** Turn on the Cloudflare Access simulator (AUTH_MODE=access with a test issuer, audience, hosts and JWKS). */
+  access?: boolean
+}
+
+export type AccessSim = {
+  keys: AccessKey[]
+  jwksFetches: number
+  /** Replace the published key set (e.g. to simulate rotation or an unknown kid). */
+  publishKeys(keys: AccessKey[]): void
+  token(email: string, overrides?: { claims?: TokenClaims; mint?: Partial<MintOptions>; sub?: string }): string
+  /** Request as an Access-authenticated browser: signed JWT in both the header and the CF_Authorization cookie. */
+  session(email: string, opts?: { sub?: string; host?: string }): Session
+  /** Raw request with explicit credentials, for negative tests. */
+  raw(path: string, init?: RequestInit & { headers?: Record<string, string> }, host?: string): Promise<Response>
+}
+
 export type Harness = {
+  access: AccessSim
   mf: Miniflare
   openai: { mode: OpenAiMode; calls: number }
   trace: TraceEntry[]
@@ -41,7 +61,7 @@ export type Session = {
 
 export { PNG_BYTES }
 
-export async function startHarness(): Promise<Harness> {
+export async function startHarness(options: HarnessOptions = {}): Promise<Harness> {
   const root = process.env.CARDCAP_SRC ? resolve(process.env.CARDCAP_SRC) : resolve(here, '..')
   const outDir = mkdtempSync(join(tmpdir(), 'cardcap-e2e-'))
   const bundle = join(outDir, 'worker.mjs')
@@ -60,6 +80,8 @@ export async function startHarness(): Promise<Harness> {
   const trace: TraceEntry[] = []
   const openai = { mode: { kind: 'card', card: {} } as OpenAiMode, calls: 0 }
   const sentEmails: Array<{ to: string; text: string }> = []
+  const accessKey = makeAccessKey('test-key-1')
+  const access = { keys: [accessKey], published: [accessKey], jwksFetches: 0 }
 
   const mf = new Miniflare({
     modules: true,
@@ -76,6 +98,9 @@ export async function startHarness(): Promise<Harness> {
       OPENAI_MODEL: 'test-model',
       RESEND_API_KEY: 're_test_not_real',
       SENDER_EMAIL: 'test@example.invalid',
+      ...(options.access
+        ? { AUTH_MODE: 'access', ACCESS_ISSUER, ACCESS_AUDIENCE, ACCESS_ALLOWED_HOSTS: ACCESS_HOSTS.join(',') }
+        : {}),
     },
     outboundService: async (request: Request) => {
       const url = new URL(request.url)
@@ -86,6 +111,11 @@ export async function startHarness(): Promise<Harness> {
         trace.push({ at: new Date().toISOString(), kind: 'outbound', method: request.method, url: request.url, status: 200, note: 'resend intercepted' })
         return MfResponse.json({ id: 'email-test' })
       }
+      if (request.url === JWKS_URL) {
+        access.jwksFetches += 1
+        trace.push({ at: new Date().toISOString(), kind: 'outbound', method: request.method, url: request.url, status: 200, note: 'access jwks intercepted' })
+        return MfResponse.json({ keys: access.published.map((k) => k.jwk) })
+      }
       if (url.hostname === OPENAI_HOST) {
         openai.calls += 1
         const mode = openai.mode
@@ -98,14 +128,17 @@ export async function startHarness(): Promise<Harness> {
       return new MfResponse('blocked by e2e harness', { status: 599 })
     },
   })
-  await mf.ready
+  const runtimeUrl = await mf.ready
+  await applyMigrations(mf, root)
 
   const origin = 'https://cardcap.test'
 
-  async function send(cookie: string, path: string, init: RequestInit & { headers?: Record<string, string> } = {}): Promise<Response> {
+  async function send(cookie: string, path: string, init: RequestInit & { headers?: Record<string, string> } = {}, host?: string): Promise<Response> {
     const headers = new Headers(init.headers)
     if (cookie) headers.set('cookie', cookie)
-    const res = (await mf.dispatchFetch(`${origin}${path}`, { ...init, headers, redirect: 'manual' } as never)) as unknown as Response
+    const res = options.access
+      ? await rawHttp(runtimeUrl, path, init, headers, host || 'cardcap.test')
+      : ((await mf.dispatchFetch(`${host ? `https://${host}` : origin}${path}`, { ...init, headers, redirect: 'manual' } as never)) as unknown as Response)
     let snippet = ''
     const type = res.headers.get('content-type') || ''
     if (/json|text/.test(type)) snippet = (await res.clone().text()).slice(0, 2000)
@@ -113,7 +146,29 @@ export async function startHarness(): Promise<Harness> {
     return res
   }
 
+  const accessSim: AccessSim = {
+    get keys() {
+      return access.keys
+    },
+    get jwksFetches() {
+      return access.jwksFetches
+    },
+    publishKeys(keys) {
+      access.published = keys
+    },
+    token(email, overrides = {}) {
+      return mintToken({ key: accessKey, ...overrides.mint, claims: { ...defaultClaims(email, overrides.sub), ...overrides.claims } })
+    },
+    session(email, opts = {}) {
+      const token = accessSim.token(email, { sub: opts.sub })
+      const cookie = `CF_Authorization=${token}`
+      return { email, cookie, request: (path, init) => send(cookie, path, { ...init, headers: { 'Cf-Access-Jwt-Assertion': token, ...init?.headers } }, opts.host) }
+    },
+    raw: (path, init, host) => send('', path, init, host),
+  }
+
   return {
+    access: accessSim,
     mf,
     openai,
     trace,
@@ -164,3 +219,63 @@ export function uploadForm(fileName: string, type = 'image/png', bytes: Uint8Arr
 export function emptyForm(): FormData {
   return new MfFormData() as unknown as FormData
 }
+
+// Build the test database the way production is built: apply migrations/*.sql in order (not the Worker's runtime ensureSchema).
+// D1 enforces the foreign keys these migrations declare, so ordering bugs surface here like they would in production.
+async function applyMigrations(mf: Miniflare, root: string): Promise<void> {
+  const dir = join(root, 'migrations')
+  const db = await mf.getD1Database('DB')
+  const files = readdirSync(dir).filter((f) => /^\d+.*\.sql$/.test(f)).sort()
+  if (files.length === 0) throw new Error(`no migrations found in ${dir}`)
+  for (const file of files) {
+    const sql = readFileSync(join(dir, file), 'utf8').replace(/--.*$/gm, '')
+    const statements = sql.split(/;\s*(?:\r?\n|$)/).map((stmt) => stmt.trim()).filter(Boolean)
+    await db.batch(statements.map((stmt) => db.prepare(stmt)))
+  }
+}
+
+// Miniflare's dispatchFetch keeps the requested URL but sends its own local address as the Host header, which a Worker
+// that (rightly) compares the two would refuse. For Access tests we talk to the runtime over plain HTTP instead, with the
+// Host header we choose, exactly as the Cloudflare edge would deliver it. An absolute request target lets a test send a
+// Host header that disagrees with the URL.
+async function rawHttp(runtimeUrl: URL, path: string, init: RequestInit, headers: Headers, host: string): Promise<Response> {
+  let body: Buffer | undefined
+  if (init.body instanceof MfFormData) {
+    const encoded = new MfResponse(init.body as never)
+    headers.set('content-type', encoded.headers.get('content-type') || '')
+    body = Buffer.from(await encoded.arrayBuffer())
+  } else if (typeof init.body === 'string') {
+    body = Buffer.from(init.body)
+  } else if (init.body instanceof Uint8Array) {
+    body = Buffer.from(init.body)
+  }
+  headers.set('host', host)
+  headers.set('connection', 'close')
+  if (body) headers.set('content-length', String(body.length))
+  const outgoing: Record<string, string> = {}
+  headers.forEach((value, key) => {
+    outgoing[key] = value
+  })
+  return new Promise((resolvePromise, reject) => {
+    const req = httpRequest(
+      { hostname: runtimeUrl.hostname, port: runtimeUrl.port, path, method: init.method || 'GET', headers: outgoing, agent: false },
+      (res) => {
+        const chunks: Buffer[] = []
+        res.on('data', (chunk: Buffer) => chunks.push(chunk))
+        res.on('end', () => {
+          const responseHeaders = new Headers()
+          for (const [key, value] of Object.entries(res.headers)) {
+            if (Array.isArray(value)) value.forEach((v) => responseHeaders.append(key, v))
+            else if (value !== undefined) responseHeaders.set(key, value)
+          }
+          const status = res.statusCode || 0
+          const nullBody = status === 204 || status === 304
+          resolvePromise(new Response(nullBody ? null : Buffer.concat(chunks), { status, headers: responseHeaders }))
+        })
+      },
+    )
+    req.on('error', reject)
+    if (body) req.write(body)
+    req.end()
+  })
+}
diff --git a/e2e/legacy-ambiguity.e2e.test.ts b/e2e/legacy-ambiguity.e2e.test.ts
new file mode 100644
index 0000000..4cbc77d
--- /dev/null
+++ b/e2e/legacy-ambiguity.e2e.test.ts
@@ -0,0 +1,85 @@
+import { afterEach, beforeEach, expect, it, onTestFailed } from 'vitest'
+import { saveTrace, startHarness, type Harness } from './harness'
+
+// Legacy email-link sign-in must fail closed when two accounts share one normalized email, and must keep
+// reusing an existing account (whatever its id) instead of creating a parallel one.
+
+let h: Harness
+beforeEach(async () => {
+  h = await startHarness()
+})
+afterEach(async () => {
+  await h.dispose()
+})
+
+async function insertUser(id: string, email: string, contact?: string) {
+  const db = await h.mf.getD1Database('DB')
+  await db.prepare("INSERT INTO users (id, email, name, created_at, updated_at) VALUES (?, ?, ?, 't', 't')").bind(id, email, email).run()
+  if (contact) {
+    await db
+      .prepare("INSERT INTO contacts (id, user_id, name, created_at, updated_at) VALUES (?, ?, ?, '2026-01-01T00:00:00Z', '2026-01-01T00:00:00Z')")
+      .bind(`c-${id}`, id, contact)
+      .run()
+  }
+  return db
+}
+
+it('two accounts with the same normalized email: the email link is refused and neither account is exposed', async () => {
+  onTestFailed((r) => saveTrace('legacy-ambiguity-refused', h.trace, r.errors?.[0]?.message))
+  await insertUser('dup-1', 'dana@example.test', 'Dana One')
+  await insertUser('dup-2', ' Dana@Example.test ', 'Dana Two')
+  await expect(h.signIn('dana@example.test')).rejects.toThrow(/verify failed: 410/)
+})
+
+it('an existing account with a non-canonical id is reused by the email link, without creating another', async () => {
+  onTestFailed((r) => saveTrace('legacy-reuse-noncanonical', h.trace, r.errors?.[0]?.message))
+  const db = await insertUser('legacy-42', 'bob@example.test', 'Bob Legacy Contact')
+  const bob = await h.signIn('bob@example.test')
+  const list = (await (await bob.request('/api/contacts')).json()) as { contacts: Array<{ name: string }> }
+  expect(list.contacts.map((c) => c.name)).toEqual(['Bob Legacy Contact'])
+  expect(((await (await bob.request('/api/me')).json()) as { id: string }).id).toBe('legacy-42')
+  const count = (await db.prepare("SELECT COUNT(*) AS n FROM users WHERE lower(trim(email)) = 'bob@example.test'").first<{ n: number }>())!.n
+  expect(count).toBe(1)
+})
+
+it('a brand-new person still gets the canonical email:<address> id', async () => {
+  onTestFailed((r) => saveTrace('legacy-new-canonical', h.trace, r.errors?.[0]?.message))
+  const carol = await h.signIn('Carol@Example.Test')
+  expect(((await (await carol.request('/api/me')).json()) as { id: string }).id).toBe('email:carol@example.test')
+})
+
+it('email-link tokens still work exactly once after the change', async () => {
+  onTestFailed((r) => saveTrace('legacy-token-once', h.trace, r.errors?.[0]?.message))
+  await insertUser('legacy-42', 'bob@example.test')
+  await h.signIn('bob@example.test')
+  const link = h.lastLoginLink('bob@example.test')!
+  const replay = await h.anonymous().request(new URL(link).pathname + new URL(link).search)
+  expect(replay.status).toBe(410)
+})
+
+it('many email links for one new person verified at the same moment still create exactly one account', async () => {
+  onTestFailed((r) => saveTrace('legacy-concurrent-first-login', h.trace, r.errors?.[0]?.message))
+  const email = 'erin@example.test'
+  const links: string[] = []
+  for (let i = 0; i < 8; i += 1) {
+    const res = await h.anonymous().request('/api/auth/request-link', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ email }),
+    })
+    expect(res.status).toBe(200)
+    links.push(h.lastLoginLink(email)!)
+  }
+  expect(new Set(links).size).toBe(8)
+  // All eight links are opened at the same moment.
+  const verifies = await Promise.all(links.map((link) => h.anonymous().request(new URL(link).pathname + new URL(link).search)))
+  expect(verifies.map((r) => r.status)).toEqual(Array(8).fill(302))
+  const cookies = verifies.map((r) => (r.headers.get('set-cookie') || '').split(';')[0])
+  const ids = await Promise.all(
+    cookies.map(async (cookie) => ((await (await h.anonymous().request('/api/me', { headers: { Cookie: cookie } })).json()) as { id: string }).id),
+  )
+  expect(new Set(ids)).toEqual(new Set(['email:erin@example.test']))
+  const db = await h.mf.getD1Database('DB')
+  const count = (await db.prepare("SELECT COUNT(*) AS n FROM users WHERE lower(trim(email)) = 'erin@example.test'").first<{ n: number }>())!.n
+  expect(count).toBe(1)
+})
diff --git a/e2e/schema.e2e.test.ts b/e2e/schema.e2e.test.ts
new file mode 100644
index 0000000..99046ce
--- /dev/null
+++ b/e2e/schema.e2e.test.ts
@@ -0,0 +1,30 @@
+import { afterEach, beforeEach, expect, it } from 'vitest'
+import { startHarness, type Harness } from './harness'
+
+let h: Harness
+beforeEach(async () => {
+  h = await startHarness()
+})
+afterEach(async () => {
+  await h.dispose()
+})
+
+// Guards the harness itself: the suites must run on a migration-built database, like production,
+// not on the tables the Worker would create at runtime.
+it('the test database is built from migrations (indexes and foreign keys that only migrations define)', async () => {
+  const db = await h.mf.getD1Database('DB')
+  const indexes = (await db.prepare("SELECT name FROM sqlite_master WHERE type = 'index'").all<{ name: string }>()).results.map((r) => r.name)
+  expect(indexes).toEqual(expect.arrayContaining(['idx_contacts_user_updated', 'idx_contacts_user_name', 'idx_jobs_contact', 'idx_login_tokens_email', 'idx_users_email']))
+  const jobFks = (await db.prepare('PRAGMA foreign_key_list(extraction_jobs)').all<{ table: string }>()).results.map((r) => r.table).sort()
+  expect(jobFks).toEqual(['contacts', 'users'])
+})
+
+it('an extraction job cannot reference a contact that does not exist (production foreign key)', async () => {
+  const db = await h.mf.getD1Database('DB')
+  await db.prepare("INSERT INTO users (id, email, name, created_at, updated_at) VALUES ('u1','u1@example.test','u1','t','t')").run()
+  await expect(
+    db
+      .prepare("INSERT INTO extraction_jobs (id, user_id, contact_id, source_image_key, status, created_at, updated_at) VALUES ('j1','u1','missing','k','extracted','t','t')")
+      .run(),
+  ).rejects.toThrow(/FOREIGN KEY/i)
+})
diff --git a/index.html b/index.html
index 742e507..41f2536 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>cardcap-app</title>
+    <meta name="description" content="Turn business card photos into contacts you can review, edit and export." />
+    <meta name="theme-color" content="#0F7C7A" />
+    <link rel="preload" href="/fonts/atkinson-next-latin.woff2" as="font" type="font/woff2" crossorigin />
+    <title>CardCap | Copper State Intelligence</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/migrations/0004_access_identities.sql b/migrations/0004_access_identities.sql
new file mode 100644
index 0000000..91ec3b8
--- /dev/null
+++ b/migrations/0004_access_identities.sql
@@ -0,0 +1,10 @@
+CREATE TABLE IF NOT EXISTS access_identities (
+  issuer TEXT NOT NULL,
+  subject TEXT NOT NULL,
+  user_id TEXT NOT NULL,
+  created_at TEXT NOT NULL,
+  PRIMARY KEY (issuer, subject),
+  FOREIGN KEY (user_id) REFERENCES users(id)
+);
+CREATE INDEX IF NOT EXISTS idx_access_identities_user ON access_identities(user_id);
+CREATE INDEX IF NOT EXISTS idx_users_normalized_email ON users(lower(trim(email)));
diff --git a/package-lock.json b/package-lock.json
index f5ef71d..f2a3b20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "cardcap-app",
       "version": "0.0.0",
       "dependencies": {
+        "jose": "6.2.12",
         "react": "^19.2.6",
         "react-dom": "^19.2.6"
       },
@@ -3510,6 +3511,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/jose": {
+      "version": "6.2.12",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.12.tgz",
+      "integrity": "sha512-9NiFmJEex0sy2Dk58j2UGBSHgUs2ypF9eZSu4L6vjOX3Dp96Sw1F3uL+H+D1sx02jZZdzUT0HgvCy59CuvXcWw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/package.json b/package.json
index 3d4a977..7a58f48 100644
--- a/package.json
+++ b/package.json
@@ -12,9 +12,12 @@
     "test": "vitest run --config vitest.config.ts",
     "test:e2e": "vitest run --config vitest.e2e.config.ts",
     "test:browser": "playwright test",
+    "test:browser:access": "playwright test --config playwright.access.config.ts",
+    "test:rollback": "node --import tsx scripts/test-rollback.ts",
     "test:browser:server": "tsx e2e/browser/server.ts"
   },
   "dependencies": {
+    "jose": "6.2.12",
     "react": "^19.2.6",
     "react-dom": "^19.2.6"
   },
diff --git a/playwright.access.config.ts b/playwright.access.config.ts
new file mode 100644
index 0000000..e24a246
--- /dev/null
+++ b/playwright.access.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from '@playwright/test'
+
+// This is a synthetic edge for browser tests, never a production authentication bypass.
+process.env.ACCESS_SIM = '1'
+
+export default defineConfig({
+  testDir: './e2e/browser',
+  testMatch: '**/access.spec.ts',
+  workers: 1,
+  fullyParallel: false,
+  retries: 0,
+  reporter: [['list']],
+  outputDir: 'test-results/browser-access',
+  use: { baseURL: 'http://127.0.0.1:5197', trace: 'retain-on-failure', screenshot: 'only-on-failure' },
+  webServer: {
+    command: 'npm run build && npm run test:browser:server',
+    env: { ACCESS_SIM: '1', PORT: '5197' },
+    url: 'http://127.0.0.1:5197',
+    reuseExistingServer: false,
+    timeout: 120_000,
+  },
+})
diff --git a/public/brand/csi-monogram-dark.svg b/public/brand/csi-monogram-dark.svg
new file mode 100644
index 0000000..cb60041
--- /dev/null
+++ b/public/brand/csi-monogram-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" xmlns:c2pa="http://c2pa.org/manifest"><metadata><c2pa:manifest>AAAWgmp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAABZcanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46YzJwYTpjMjkzYWZmMi0xZDk0LTQ5ZDMtYTIxMi0yMjZlNzNkMDI1ZWQAAAADl2p1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAALxqdW1iAAAARGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaW5ncmVkaWVudC52MwAAAAAYYzJzaIP9WyX7bAJpQWbl+2h8ocAAAABwY2JvcqNpZGM6Zm9ybWF0bWltYWdlL3N2Zyt4bWxqaW5zdGFuY2VJRHgseG1wOmlpZDo1NjcyN2IyZS1lMzZmLTQ1ODAtOGJhNC1jN2RiNjE0N2MzMDBscmVsYXRpb25zaGlwaHBhcmVudE9mAAAB4mp1bWIAAABBanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5hY3Rpb25zLnYyAAAAABhjMnNoCm8GxqMfk489Fei+7AbfdgAAAZljYm9yomdhY3Rpb25zgqJmYWN0aW9ua2MycGEub3BlbmVkanBhcmFtZXRlcnOha2luZ3JlZGllbnRzgaJjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggt+dKYNIKgCNsslykJfZl1jLZNVKOvq7PsNIuPKIGwRqkZmFjdGlvbngdY29tLmFudGhyb3BpYy5jbGF1ZGUucHJvdmlkZWRqcGFyYW1ldGVyc6F4H2NvbS5hbnRocm9waWMub3JpZ2luLWNvbmZpZGVuY2VndW5rbm93bmtkZXNjcmlwdGlvbnhmQ2xhdWRlIHByb3ZpZGVkIHRoaXMgZmlsZSBhdCB0aGUgcmVxdWVzdCBvZiBhIHVzZXIgYW5kIG1heSBoYXZlIGNyZWF0ZWQgb3IgbW9kaWZpZWQgdGhlIGZpbGUgY29udGVudHMubXNvZnR3YXJlQWdlbnShZG5hbWVmQ2xhdWRlcmFsbEFjdGlvbnNJbmNsdWRlZPUAAADIanVtYgAAAEBqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmhhc2guZGF0YQAAAAAYYzJzaDOIg7+p+fcOpYlj1LM8/5UAAACAY2JvcqVjYWxnZnNoYTI1NmNwYWRNAAAAAAAAAAAAAAAAAGRoYXNoWCDCcyxGtjWOBT8wk6LMy2NxBY85rjUNZjJkPyut8uRwKWRuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBiSZmxlbmd0aBkeBAAAAj5qdW1iAAAAJ2p1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0udjIAAAACD2Nib3KlY2FsZ2ZzaGEyNTZpc2lnbmF0dXJleE1zZWxmI2p1bWJmPS9jMnBhL3VybjpjMnBhOmMyOTNhZmYyLTFkOTQtNDlkMy1hMjEyLTIyNmU3M2QwMjVlZC9jMnBhLnNpZ25hdHVyZWppbnN0YW5jZUlEeCx4bXA6aWlkOjM5Y2IxNDQ1LTU4MjAtNGFiYS1hNTc5LTFlMTU0ZTIzZTc5YXJjcmVhdGVkX2Fzc2VydGlvbnODomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCC350pg0gqAI2yyXKQl9mXWMtk1Uo6+rs+w0i48ogbBGqJjdXJseCpzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmFjdGlvbnMudjJkaGFzaFgg7etWS5/SkiyKYd0If3aHQdNk0x2EoMrVyL6JfaY62QCiY3VybHgpc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5oYXNoLmRhdGFkaGFzaFgg6Vw0ifRDj76Vq5LOj0HHSoztrtWHGf8M4wVprb26rKJ0Y2xhaW1fZ2VuZXJhdG9yX2luZm+jZG5hbWVvQW50aHJvcGljIEZpbGVzZ3ZlcnNpb25lMS4wLjBrc3BlY1ZlcnNpb25lMi40LjAAABA4anVtYgAAAChqdW1kYzJjcwARABCAAACqADibcQNjMnBhLnNpZ25hdHVyZQAAABAIY2JvctKEWQISogEmGCFZAgowggIGMIIBjaADAgECAhRA5aAK7sI50L64g/oGQgU9Z1UTADAKBggqhkjOPQQDAzBJMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEuMCwGA1UEAxMlQW50aHJvcGljIENvbnRlbnQgQ3JlZGVudGlhbHMgUm9vdCBDQTAeFw0yNjA4MDcxODQzNTZaFw0yODA4MDYxOTQzNTZaMEQxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMSkwJwYDVQQDEyBBbnRocm9waWMgQ2xhdWRlIENvbnRlbnQgU2lnbmluZzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABJh6CmvLUBgFFNU0vUKlOVtE6djd17L5SuwX0LemFisBM3dkd/3cyjxFA3Qo5S46fX0/ihY0VZ7mfb9KF703t5OjWDBWMA4GA1UdDwEB/wQEAwIHgDAVBgNVHSUEDjAMBgorBgEEAYPoXgIBMAwGA1UdEwEB/wQCMAAwHwYDVR0jBBgwFoAUzlHiBIFOZFsj+OPEz5o+nMHXXMIwCgYIKoZIzj0EAwMDZwAwZAIwMXMdFJ4BetLLVY7ORuE9noqbbAZOZn/aArXyTwFAZfKrPzxF2vPoJNf1+UCdg1XGAjBwX1zd9WGqYkqmL5SFqw1QySjr1zJfpJM9+1rdDwSPLMOPOjKuiXjoU/pUUeG9RwmhY3BhZFkNngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPZYQKFz0OdbEJXz5OcQ8nTwyLG8qEHaR+7sLZ7dDTXBetsF9/zWdZu2u2+TqbnCwb4K5xUsHJPmHocqrHbTk+7u7NY=</c2pa:manifest></metadata><rect width="64" height="64" fill="#ECEDEE"></rect><text x="50%" y="29.5" dy="0.35em" text-anchor="middle" font-family="'Atkinson Hyperlegible Next', Verdana, sans-serif" font-weight="800" font-size="22" letter-spacing="-0.02em" fill="#111315">CSI</text><rect y="59" width="64" height="5" fill="#0F7C7A"></rect></svg>
\ No newline at end of file
diff --git a/public/brand/csi-monogram-light.svg b/public/brand/csi-monogram-light.svg
new file mode 100644
index 0000000..d83dd6b
--- /dev/null
+++ b/public/brand/csi-monogram-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" xmlns:c2pa="http://c2pa.org/manifest"><metadata><c2pa:manifest>AAAWgmp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAABZcanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46YzJwYTo4MzM4YzhlYy0wMmQ4LTQ2NjgtYTMxMS0wNzdjNjNkMTZmODgAAAADl2p1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAALxqdW1iAAAARGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaW5ncmVkaWVudC52MwAAAAAYYzJzaF767vFsvmKCTTjDkXDvlW4AAABwY2JvcqNpZGM6Zm9ybWF0bWltYWdlL3N2Zyt4bWxqaW5zdGFuY2VJRHgseG1wOmlpZDo3MjVkN2VmMy04NzQyLTQyZWQtOWNkYi00MmEzNTIxNTkwNjVscmVsYXRpb25zaGlwaHBhcmVudE9mAAAB4mp1bWIAAABBanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5hY3Rpb25zLnYyAAAAABhjMnNoRgUtxe69wjxmCDl5o26akwAAAZljYm9yomdhY3Rpb25zgqJmYWN0aW9ua2MycGEub3BlbmVkanBhcmFtZXRlcnOha2luZ3JlZGllbnRzgaJjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggue+sdmGV0fEkOAjPcWntzR646ESkFk7yM1IBuZGf3VCkZmFjdGlvbngdY29tLmFudGhyb3BpYy5jbGF1ZGUucHJvdmlkZWRqcGFyYW1ldGVyc6F4H2NvbS5hbnRocm9waWMub3JpZ2luLWNvbmZpZGVuY2VndW5rbm93bmtkZXNjcmlwdGlvbnhmQ2xhdWRlIHByb3ZpZGVkIHRoaXMgZmlsZSBhdCB0aGUgcmVxdWVzdCBvZiBhIHVzZXIgYW5kIG1heSBoYXZlIGNyZWF0ZWQgb3IgbW9kaWZpZWQgdGhlIGZpbGUgY29udGVudHMubXNvZnR3YXJlQWdlbnShZG5hbWVmQ2xhdWRlcmFsbEFjdGlvbnNJbmNsdWRlZPUAAADIanVtYgAAAEBqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmhhc2guZGF0YQAAAAAYYzJzaH7lCZ04pdC4cH4zhvaLy6EAAACAY2JvcqVjYWxnZnNoYTI1NmNwYWRNAAAAAAAAAAAAAAAAAGRoYXNoWCBwT46O7yRGvu1wvNNfz39zHSUDvFTyVa44vlQ3ZmplmWRuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBiSZmxlbmd0aBkeBAAAAj5qdW1iAAAAJ2p1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0udjIAAAACD2Nib3KlY2FsZ2ZzaGEyNTZpc2lnbmF0dXJleE1zZWxmI2p1bWJmPS9jMnBhL3VybjpjMnBhOjgzMzhjOGVjLTAyZDgtNDY2OC1hMzExLTA3N2M2M2QxNmY4OC9jMnBhLnNpZ25hdHVyZWppbnN0YW5jZUlEeCx4bXA6aWlkOjdhZDFhZmQ2LTQ2MTAtNGE0OC1hZGQ5LWE2MjYzY2JlZDQ2OHJjcmVhdGVkX2Fzc2VydGlvbnODomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCC576x2YZXR8SQ4CM9xae3NHrjoRKQWTvIzUgG5kZ/dUKJjdXJseCpzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmFjdGlvbnMudjJkaGFzaFggHnFn9nVNI+JSMpP6LoyawGSUnjUxyQ6s66LvofsF9aKiY3VybHgpc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5oYXNoLmRhdGFkaGFzaFgg7GLqwj8snwE/zvVK4wCGndkiof+bJRVZI6pbO/ByWsd0Y2xhaW1fZ2VuZXJhdG9yX2luZm+jZG5hbWVvQW50aHJvcGljIEZpbGVzZ3ZlcnNpb25lMS4wLjBrc3BlY1ZlcnNpb25lMi40LjAAABA4anVtYgAAAChqdW1kYzJjcwARABCAAACqADibcQNjMnBhLnNpZ25hdHVyZQAAABAIY2JvctKEWQISogEmGCFZAgowggIGMIIBjaADAgECAhRA5aAK7sI50L64g/oGQgU9Z1UTADAKBggqhkjOPQQDAzBJMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEuMCwGA1UEAxMlQW50aHJvcGljIENvbnRlbnQgQ3JlZGVudGlhbHMgUm9vdCBDQTAeFw0yNjA4MDcxODQzNTZaFw0yODA4MDYxOTQzNTZaMEQxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMSkwJwYDVQQDEyBBbnRocm9waWMgQ2xhdWRlIENvbnRlbnQgU2lnbmluZzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABJh6CmvLUBgFFNU0vUKlOVtE6djd17L5SuwX0LemFisBM3dkd/3cyjxFA3Qo5S46fX0/ihY0VZ7mfb9KF703t5OjWDBWMA4GA1UdDwEB/wQEAwIHgDAVBgNVHSUEDjAMBgorBgEEAYPoXgIBMAwGA1UdEwEB/wQCMAAwHwYDVR0jBBgwFoAUzlHiBIFOZFsj+OPEz5o+nMHXXMIwCgYIKoZIzj0EAwMDZwAwZAIwMXMdFJ4BetLLVY7ORuE9noqbbAZOZn/aArXyTwFAZfKrPzxF2vPoJNf1+UCdg1XGAjBwX1zd9WGqYkqmL5SFqw1QySjr1zJfpJM9+1rdDwSPLMOPOjKuiXjoU/pUUeG9RwmhY3BhZFkNngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPZYQEFhxiupsZkJtrgXRBmFUc9/KBwudyFUJmUL8kpY5+8p/kRPjLgIILC329djLvzJEkZl4sY7UU0Vu4o4dq5JXh0=</c2pa:manifest></metadata><rect width="64" height="64" fill="#15171A"></rect><text x="50%" y="29.5" dy="0.35em" text-anchor="middle" font-family="'Atkinson Hyperlegible Next', Verdana, sans-serif" font-weight="800" font-size="22" letter-spacing="-0.02em" fill="#FFFFFF">CSI</text><rect y="59" width="64" height="5" fill="#0F7C7A"></rect></svg>
\ No newline at end of file
diff --git a/public/brand/csi-wordmark-dark.svg b/public/brand/csi-wordmark-dark.svg
new file mode 100644
index 0000000..0879302
--- /dev/null
+++ b/public/brand/csi-wordmark-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="460" height="60" viewBox="0 0 460 60" xmlns:c2pa="http://c2pa.org/manifest"><metadata><c2pa:manifest>AAAWgmp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAABZcanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46YzJwYTozM2I5MTczZi02NzU3LTQ2OTgtOGYzMC0wZTU3MTkxMmVhNzgAAAADl2p1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAALxqdW1iAAAARGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaW5ncmVkaWVudC52MwAAAAAYYzJzaL9iQ7GaID1ZjFDCSja/04gAAABwY2JvcqNpZGM6Zm9ybWF0bWltYWdlL3N2Zyt4bWxqaW5zdGFuY2VJRHgseG1wOmlpZDpjYjIxMDhkMS01ODIzLTQ0YTAtYTZlMS0wYWI2ZTZlN2UyZjRscmVsYXRpb25zaGlwaHBhcmVudE9mAAAB4mp1bWIAAABBanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5hY3Rpb25zLnYyAAAAABhjMnNo2akkLAL2MiRrOQdOLnNj5QAAAZljYm9yomdhY3Rpb25zgqJmYWN0aW9ua2MycGEub3BlbmVkanBhcmFtZXRlcnOha2luZ3JlZGllbnRzgaJjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggjIu4+rF9f0O3u6NKDvxtYa6GO6tmZwZXnNm655IOTj2kZmFjdGlvbngdY29tLmFudGhyb3BpYy5jbGF1ZGUucHJvdmlkZWRqcGFyYW1ldGVyc6F4H2NvbS5hbnRocm9waWMub3JpZ2luLWNvbmZpZGVuY2VndW5rbm93bmtkZXNjcmlwdGlvbnhmQ2xhdWRlIHByb3ZpZGVkIHRoaXMgZmlsZSBhdCB0aGUgcmVxdWVzdCBvZiBhIHVzZXIgYW5kIG1heSBoYXZlIGNyZWF0ZWQgb3IgbW9kaWZpZWQgdGhlIGZpbGUgY29udGVudHMubXNvZnR3YXJlQWdlbnShZG5hbWVmQ2xhdWRlcmFsbEFjdGlvbnNJbmNsdWRlZPUAAADIanVtYgAAAEBqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmhhc2guZGF0YQAAAAAYYzJzaE4SZshH72zpTkVxkioC4dkAAACAY2JvcqVjYWxnZnNoYTI1NmNwYWRNAAAAAAAAAAAAAAAAAGRoYXNoWCCUA70mW1ODMQemvT7ETaCpE3VaywelCYTChlRTcJ7yQGRuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBiUZmxlbmd0aBkeBAAAAj5qdW1iAAAAJ2p1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0udjIAAAACD2Nib3KlY2FsZ2ZzaGEyNTZpc2lnbmF0dXJleE1zZWxmI2p1bWJmPS9jMnBhL3VybjpjMnBhOjMzYjkxNzNmLTY3NTctNDY5OC04ZjMwLTBlNTcxOTEyZWE3OC9jMnBhLnNpZ25hdHVyZWppbnN0YW5jZUlEeCx4bXA6aWlkOjg4MGQzYWJiLTM2NTYtNDAxOS1iNmVjLTFhNzJlMTNmMGMxMXJjcmVhdGVkX2Fzc2VydGlvbnODomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCCMi7j6sX1/Q7e7o0oO/G1hroY7q2ZnBlec2brnkg5OPaJjdXJseCpzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmFjdGlvbnMudjJkaGFzaFggbFn+u0U1pEcNPcXj0apQT6tknCLpjEhqiXHcz+XJjl+iY3VybHgpc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5oYXNoLmRhdGFkaGFzaFggRgFmWCr48ArkYSOk1YFdlNALQglY6Sq71MYODAW/Tgl0Y2xhaW1fZ2VuZXJhdG9yX2luZm+jZG5hbWVvQW50aHJvcGljIEZpbGVzZ3ZlcnNpb25lMS4wLjBrc3BlY1ZlcnNpb25lMi40LjAAABA4anVtYgAAAChqdW1kYzJjcwARABCAAACqADibcQNjMnBhLnNpZ25hdHVyZQAAABAIY2JvctKEWQISogEmGCFZAgowggIGMIIBjaADAgECAhRA5aAK7sI50L64g/oGQgU9Z1UTADAKBggqhkjOPQQDAzBJMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEuMCwGA1UEAxMlQW50aHJvcGljIENvbnRlbnQgQ3JlZGVudGlhbHMgUm9vdCBDQTAeFw0yNjA4MDcxODQzNTZaFw0yODA4MDYxOTQzNTZaMEQxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMSkwJwYDVQQDEyBBbnRocm9waWMgQ2xhdWRlIENvbnRlbnQgU2lnbmluZzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABJh6CmvLUBgFFNU0vUKlOVtE6djd17L5SuwX0LemFisBM3dkd/3cyjxFA3Qo5S46fX0/ihY0VZ7mfb9KF703t5OjWDBWMA4GA1UdDwEB/wQEAwIHgDAVBgNVHSUEDjAMBgorBgEEAYPoXgIBMAwGA1UdEwEB/wQCMAAwHwYDVR0jBBgwFoAUzlHiBIFOZFsj+OPEz5o+nMHXXMIwCgYIKoZIzj0EAwMDZwAwZAIwMXMdFJ4BetLLVY7ORuE9noqbbAZOZn/aArXyTwFAZfKrPzxF2vPoJNf1+UCdg1XGAjBwX1zd9WGqYkqmL5SFqw1QySjr1zJfpJM9+1rdDwSPLMOPOjKuiXjoU/pUUeG9RwmhY3BhZFkNngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPZYQN1Q+9apQqFT9Zo92/SfSA7mZwL5OKhhzfHrTzYWFIkFI9VvbW5UXvtjcWN0eW2Lnmn0wHkz46ge4d0LivjRmAI=</c2pa:manifest></metadata><text x="0" y="34" font-family="'Atkinson Hyperlegible Next', Verdana, sans-serif" font-weight="700" font-size="34" letter-spacing="-0.015em" fill="#ECEDEE">Copper State Intelligence</text><rect x="0" y="50" width="30" height="3" fill="#4CC3BC"></rect><rect x="30" y="50" width="30" height="3" fill="#C98663"></rect></svg>
\ No newline at end of file
diff --git a/public/brand/csi-wordmark-light.svg b/public/brand/csi-wordmark-light.svg
new file mode 100644
index 0000000..6bbe129
--- /dev/null
+++ b/public/brand/csi-wordmark-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="460" height="60" viewBox="0 0 460 60" xmlns:c2pa="http://c2pa.org/manifest"><metadata><c2pa:manifest>AAAWgmp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAABZcanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46YzJwYTowYTUyYzY5Ni1jNjQ2LTQ0OGQtOTNiOS0yYjllODI5MjE5MGYAAAADl2p1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAALxqdW1iAAAARGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaW5ncmVkaWVudC52MwAAAAAYYzJzaMij/ZZ/GeX7M3ZZPoWDq4gAAABwY2JvcqNpZGM6Zm9ybWF0bWltYWdlL3N2Zyt4bWxqaW5zdGFuY2VJRHgseG1wOmlpZDpiMTA4Y2M1NS03Y2YzLTQ2NTYtYjFkMy03ZTFlODQ0ZWQ4MTVscmVsYXRpb25zaGlwaHBhcmVudE9mAAAB4mp1bWIAAABBanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5hY3Rpb25zLnYyAAAAABhjMnNovgYE+lsMTggVGMf/EO2jbQAAAZljYm9yomdhY3Rpb25zgqJmYWN0aW9ua2MycGEub3BlbmVkanBhcmFtZXRlcnOha2luZ3JlZGllbnRzgaJjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggwL9TGh0r0cWyvRG0NF8HVSWvmG5XMLQ20j7k8co+48ykZmFjdGlvbngdY29tLmFudGhyb3BpYy5jbGF1ZGUucHJvdmlkZWRqcGFyYW1ldGVyc6F4H2NvbS5hbnRocm9waWMub3JpZ2luLWNvbmZpZGVuY2VndW5rbm93bmtkZXNjcmlwdGlvbnhmQ2xhdWRlIHByb3ZpZGVkIHRoaXMgZmlsZSBhdCB0aGUgcmVxdWVzdCBvZiBhIHVzZXIgYW5kIG1heSBoYXZlIGNyZWF0ZWQgb3IgbW9kaWZpZWQgdGhlIGZpbGUgY29udGVudHMubXNvZnR3YXJlQWdlbnShZG5hbWVmQ2xhdWRlcmFsbEFjdGlvbnNJbmNsdWRlZPUAAADIanVtYgAAAEBqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmhhc2guZGF0YQAAAAAYYzJzaKEfC4ukSCS82tTXSvp1dG0AAACAY2JvcqVjYWxnZnNoYTI1NmNwYWRNAAAAAAAAAAAAAAAAAGRoYXNoWCDHEUoSteMQJ4EJGlBK+QHHSKhXrCX603DVLcoud5bqyGRuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBiUZmxlbmd0aBkeBAAAAj5qdW1iAAAAJ2p1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0udjIAAAACD2Nib3KlY2FsZ2ZzaGEyNTZpc2lnbmF0dXJleE1zZWxmI2p1bWJmPS9jMnBhL3VybjpjMnBhOjBhNTJjNjk2LWM2NDYtNDQ4ZC05M2I5LTJiOWU4MjkyMTkwZi9jMnBhLnNpZ25hdHVyZWppbnN0YW5jZUlEeCx4bXA6aWlkOjFkMGVhMWIyLTRlNTgtNDA4Zi1hMzY4LTAzMjVmZWRiNGViNHJjcmVhdGVkX2Fzc2VydGlvbnODomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCDAv1MaHSvRxbK9EbQ0XwdVJa+YblcwtDbSPuTxyj7jzKJjdXJseCpzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmFjdGlvbnMudjJkaGFzaFggJReha+nDlXXUnxPUWJH6eifLLIH1TMzy06hr9LpX2eSiY3VybHgpc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5oYXNoLmRhdGFkaGFzaFggAJZ7XYehhAU6lhBkNt5OJn0iD5kBNz7rUkZWApSp3250Y2xhaW1fZ2VuZXJhdG9yX2luZm+jZG5hbWVvQW50aHJvcGljIEZpbGVzZ3ZlcnNpb25lMS4wLjBrc3BlY1ZlcnNpb25lMi40LjAAABA4anVtYgAAAChqdW1kYzJjcwARABCAAACqADibcQNjMnBhLnNpZ25hdHVyZQAAABAIY2JvctKEWQISogEmGCFZAgowggIGMIIBjaADAgECAhRA5aAK7sI50L64g/oGQgU9Z1UTADAKBggqhkjOPQQDAzBJMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEuMCwGA1UEAxMlQW50aHJvcGljIENvbnRlbnQgQ3JlZGVudGlhbHMgUm9vdCBDQTAeFw0yNjA4MDcxODQzNTZaFw0yODA4MDYxOTQzNTZaMEQxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMSkwJwYDVQQDEyBBbnRocm9waWMgQ2xhdWRlIENvbnRlbnQgU2lnbmluZzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABJh6CmvLUBgFFNU0vUKlOVtE6djd17L5SuwX0LemFisBM3dkd/3cyjxFA3Qo5S46fX0/ihY0VZ7mfb9KF703t5OjWDBWMA4GA1UdDwEB/wQEAwIHgDAVBgNVHSUEDjAMBgorBgEEAYPoXgIBMAwGA1UdEwEB/wQCMAAwHwYDVR0jBBgwFoAUzlHiBIFOZFsj+OPEz5o+nMHXXMIwCgYIKoZIzj0EAwMDZwAwZAIwMXMdFJ4BetLLVY7ORuE9noqbbAZOZn/aArXyTwFAZfKrPzxF2vPoJNf1+UCdg1XGAjBwX1zd9WGqYkqmL5SFqw1QySjr1zJfpJM9+1rdDwSPLMOPOjKuiXjoU/pUUeG9RwmhY3BhZFkNngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPZYQEeejjCIyfhTlPS2If07Y01SohFhNVHU1DN/kla6TbEgLjKoJnoZ8cJSEnNDxzW5S/nSdjYfaon+6Olj8NdEg6I=</c2pa:manifest></metadata><text x="0" y="34" font-family="'Atkinson Hyperlegible Next', Verdana, sans-serif" font-weight="700" font-size="34" letter-spacing="-0.015em" fill="#15171A">Copper State Intelligence</text><rect x="0" y="50" width="30" height="3" fill="#0F7C7A"></rect><rect x="30" y="50" width="30" height="3" fill="#8C4A2B"></rect></svg>
\ No newline at end of file
diff --git a/public/favicon.svg b/public/favicon.svg
index 6893eb1..89bcb9b 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" xmlns:c2pa="http://c2pa.org/manifest"><metadata><c2pa:manifest>AAAWgmp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAABZcanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46YzJwYTpkODFhMzQyMC1kZmFiLTQ2NjAtODFhZi05YTQ0YTVjYWIyY2IAAAADl2p1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAALxqdW1iAAAARGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaW5ncmVkaWVudC52MwAAAAAYYzJzaKVJonBNEtEfLreUq47Ke5UAAABwY2JvcqNpZGM6Zm9ybWF0bWltYWdlL3N2Zyt4bWxqaW5zdGFuY2VJRHgseG1wOmlpZDowMGYwZmNkNy1mNzQ2LTQ2ZjYtOTc3OC04MTAwMzg1YTZmMzRscmVsYXRpb25zaGlwaHBhcmVudE9mAAAB4mp1bWIAAABBanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5hY3Rpb25zLnYyAAAAABhjMnNoYpDGKq8qAk8SEhbimxk1+gAAAZljYm9yomdhY3Rpb25zgqJmYWN0aW9ua2MycGEub3BlbmVkanBhcmFtZXRlcnOha2luZ3JlZGllbnRzgaJjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFgg+ncvTnS9Ku3XG9SlCNSBw0TMRXFAuR+gyqx6ziFdvpmkZmFjdGlvbngdY29tLmFudGhyb3BpYy5jbGF1ZGUucHJvdmlkZWRqcGFyYW1ldGVyc6F4H2NvbS5hbnRocm9waWMub3JpZ2luLWNvbmZpZGVuY2VndW5rbm93bmtkZXNjcmlwdGlvbnhmQ2xhdWRlIHByb3ZpZGVkIHRoaXMgZmlsZSBhdCB0aGUgcmVxdWVzdCBvZiBhIHVzZXIgYW5kIG1heSBoYXZlIGNyZWF0ZWQgb3IgbW9kaWZpZWQgdGhlIGZpbGUgY29udGVudHMubXNvZnR3YXJlQWdlbnShZG5hbWVmQ2xhdWRlcmFsbEFjdGlvbnNJbmNsdWRlZPUAAADIanVtYgAAAEBqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmhhc2guZGF0YQAAAAAYYzJzaIGjdyTJwt8EWawqTHOif0IAAACAY2JvcqVjYWxnZnNoYTI1NmNwYWRNAAAAAAAAAAAAAAAAAGRoYXNoWCCodUJY5rn78nGqQTAqa+jjN5mjI2EvAvQT7m25rdwHDmRuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBiSZmxlbmd0aBkeBAAAAj5qdW1iAAAAJ2p1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0udjIAAAACD2Nib3KlY2FsZ2ZzaGEyNTZpc2lnbmF0dXJleE1zZWxmI2p1bWJmPS9jMnBhL3VybjpjMnBhOmQ4MWEzNDIwLWRmYWItNDY2MC04MWFmLTlhNDRhNWNhYjJjYi9jMnBhLnNpZ25hdHVyZWppbnN0YW5jZUlEeCx4bXA6aWlkOmNkZDJmNDJiLTg1NzMtNGEyNS1hZmVhLWE1YWFjODdlY2VjY3JjcmVhdGVkX2Fzc2VydGlvbnODomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCD6dy9OdL0q7dcb1KUI1IHDRMxFcUC5H6DKrHrOIV2+maJjdXJseCpzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmFjdGlvbnMudjJkaGFzaFggv969psq5wFcSbLjTlkKFBzE2cPnQMRcCjuNC5J4acEKiY3VybHgpc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5oYXNoLmRhdGFkaGFzaFggiAYYoznsjDBnX/QAccktfA19IaGeNV5vb/3GUKoqyG90Y2xhaW1fZ2VuZXJhdG9yX2luZm+jZG5hbWVvQW50aHJvcGljIEZpbGVzZ3ZlcnNpb25lMS4wLjBrc3BlY1ZlcnNpb25lMi40LjAAABA4anVtYgAAAChqdW1kYzJjcwARABCAAACqADibcQNjMnBhLnNpZ25hdHVyZQAAABAIY2JvctKEWQISogEmGCFZAgowggIGMIIBjaADAgECAhRA5aAK7sI50L64g/oGQgU9Z1UTADAKBggqhkjOPQQDAzBJMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEuMCwGA1UEAxMlQW50aHJvcGljIENvbnRlbnQgQ3JlZGVudGlhbHMgUm9vdCBDQTAeFw0yNjA4MDcxODQzNTZaFw0yODA4MDYxOTQzNTZaMEQxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMSkwJwYDVQQDEyBBbnRocm9waWMgQ2xhdWRlIENvbnRlbnQgU2lnbmluZzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABJh6CmvLUBgFFNU0vUKlOVtE6djd17L5SuwX0LemFisBM3dkd/3cyjxFA3Qo5S46fX0/ihY0VZ7mfb9KF703t5OjWDBWMA4GA1UdDwEB/wQEAwIHgDAVBgNVHSUEDjAMBgorBgEEAYPoXgIBMAwGA1UdEwEB/wQCMAAwHwYDVR0jBBgwFoAUzlHiBIFOZFsj+OPEz5o+nMHXXMIwCgYIKoZIzj0EAwMDZwAwZAIwMXMdFJ4BetLLVY7ORuE9noqbbAZOZn/aArXyTwFAZfKrPzxF2vPoJNf1+UCdg1XGAjBwX1zd9WGqYkqmL5SFqw1QySjr1zJfpJM9+1rdDwSPLMOPOjKuiXjoU/pUUeG9RwmhY3BhZFkNngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPZYQHRsL2lR4cfVNkv3rUBu17LyQL5C4L6qhvKLRs9auL3KByX5U9KWdnKJTKNuYRR9smrj/h0hLonFtOFXvqo+QhI=</c2pa:manifest></metadata><rect width="32" height="32" fill="#15171A"></rect><text x="50%" y="14.5" dy="0.35em" text-anchor="middle" font-family="'Atkinson Hyperlegible Next', Verdana, sans-serif" font-weight="800" font-size="20" letter-spacing="-0.02em" fill="#FFFFFF">C</text><rect y="29" width="32" height="3" fill="#0F7C7A"></rect></svg>
\ No newline at end of file
diff --git a/public/fonts/OFL.txt b/public/fonts/OFL.txt
new file mode 100644
index 0000000..8895573
--- /dev/null
+++ b/public/fonts/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2020-2024 The Atkinson Hyperlegible Next Project Authors (https://github.com/googlefonts/atkinson-hyperlegible-next)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/public/fonts/atkinson-mono-latin-ext.woff2 b/public/fonts/atkinson-mono-latin-ext.woff2
new file mode 100644
index 0000000..a60e131
Binary files /dev/null and b/public/fonts/atkinson-mono-latin-ext.woff2 differ
diff --git a/public/fonts/atkinson-mono-latin.woff2 b/public/fonts/atkinson-mono-latin.woff2
new file mode 100644
index 0000000..f5c1081
Binary files /dev/null and b/public/fonts/atkinson-mono-latin.woff2 differ
diff --git a/public/fonts/atkinson-next-latin-ext.woff2 b/public/fonts/atkinson-next-latin-ext.woff2
new file mode 100644
index 0000000..d2b4185
Binary files /dev/null and b/public/fonts/atkinson-next-latin-ext.woff2 differ
diff --git a/public/fonts/atkinson-next-latin.woff2 b/public/fonts/atkinson-next-latin.woff2
new file mode 100644
index 0000000..a9ca4bd
Binary files /dev/null and b/public/fonts/atkinson-next-latin.woff2 differ
diff --git a/scripts/test-rollback.ts b/scripts/test-rollback.ts
new file mode 100644
index 0000000..4d8110d
--- /dev/null
+++ b/scripts/test-rollback.ts
@@ -0,0 +1,7 @@
+import { spawnSync } from 'node:child_process'
+
+const result = spawnSync(process.execPath, ['node_modules/vitest/vitest.mjs', 'run', '--config', 'vitest.e2e.config.ts', 'e2e/access-rollback.e2e.test.ts'], {
+  stdio: 'inherit',
+  env: { ...process.env, ROLLBACK_CHECK: '1' },
+})
+process.exit(result.status ?? 1)
diff --git a/src/App.css b/src/App.css
index 81085d4..9843517 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,171 +1,322 @@
-:root {
-  --bg: #f5f6f8;
-  --panel: #ffffff;
-  --text: #1f252d;
-  --muted: #68717d;
-  --line: #dfe3e8;
-  --line-strong: #c7ced6;
-  --accent: #146c5f;
-  --accent-dark: #0f5b51;
-  --accent-weak: #dff2ee;
-  --danger: #a33a35;
-  --shadow: 0 12px 30px rgba(28, 38, 48, 0.1);
+/* CardCap on the CSI "Ledger" system (src/csi.css, from csiOS/csi-brand).
+   Only --csi-* tokens are used for color, type and space. Square corners, 1px rules, no shadows or gradients.
+   Controls are 40px tall with a mouse and 44px on touch screens and phones. */
+
+/* The brand kit only ships dark values behind [data-theme="dark"]; apply the same values when the OS asks for dark. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --csi-paper: #111315;
+    --csi-surface: #181b1e;
+    --csi-ink: #ecedee;
+    --csi-text: #c9ccd0;
+    --csi-muted: #979ca2;
+    --csi-rule: #2a2e33;
+    --csi-rule-strong: #3a3f45;
+    --csi-turquoise: #4cc3bc;
+    --csi-turquoise-deep: #7ad6d0;
+    --csi-turquoise-tint: #132726;
+    --csi-on-turquoise: #111315;
+    --csi-copper: #c98663;
+    --csi-copper-tint: #221a16;
+    --csi-rose: #e0668c;
+    --csi-rose-tint: #2a1820;
+    --csi-focus: 0 0 0 3px var(--csi-paper), 0 0 0 5px var(--csi-turquoise);
+  }
+}
+
+html {
+  color-scheme: light dark;
+}
+
+:root[data-theme='light'] {
+  color-scheme: light;
 }
 
 .app-shell {
+  --ctl: 40px;
+  --header: 57px;
   min-height: 100vh;
-  background: var(--bg);
-  color: var(--text);
+  background: var(--csi-surface);
+  color: var(--csi-text);
+  font: var(--csi-small);
+}
+
+@media (pointer: coarse), (max-width: 760px) {
+  .app-shell {
+    --ctl: 44px;
+  }
+}
+
+.app-shell *,
+.app-shell *::before,
+.app-shell *::after {
+  border-radius: 0;
+}
+
+.skip-link {
+  position: absolute;
+  left: var(--csi-s2);
+  top: -100px;
+  z-index: 50;
+  padding: var(--csi-s3) var(--csi-s4);
+  background: var(--csi-paper);
+  color: var(--csi-ink);
+  border: 1px solid var(--csi-ink);
+}
+
+.skip-link:focus {
+  top: var(--csi-s2);
+}
+
+.app-shell :focus-visible {
+  outline: none;
+  box-shadow: var(--csi-focus);
+}
+
+/* Header */
+.brand-bar {
+  height: var(--csi-bar);
+  background: var(--csi-turquoise);
 }
 
 .topbar {
-  min-height: 64px;
+  position: sticky;
+  top: 0;
+  z-index: 10;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  padding: 12px 16px;
-  background: var(--panel);
-  border-bottom: 1px solid var(--line);
+  gap: var(--csi-s4);
+  padding: var(--csi-s2) var(--csi-s4);
+  background: var(--csi-paper);
+  border-bottom: var(--csi-border);
 }
 
-.topbar h1,
-.topbar p,
-.editor-head h2,
-.editor-head p,
-.source-head h2 {
-  margin: 0;
+.brand {
+  display: flex;
+  align-items: center;
+  gap: var(--csi-s3);
+  min-width: 0;
 }
 
-.topbar h1 {
-  font-size: 22px;
-  font-weight: 800;
+.brand-mark {
+  flex: none;
+  width: 36px;
+  height: 36px;
+  display: block;
 }
 
-.topbar p,
-.editor-head p {
-  color: var(--muted);
-  font-size: 13px;
+.brand-text {
+  display: grid;
+  min-width: 0;
 }
 
-.toolbar,
-.quick-links,
-.actions {
+.brand-org {
+  font: var(--csi-label);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--csi-muted);
+}
+
+.topbar h1 {
+  margin: 0;
+  font: 700 20px/1.2 var(--csi-font);
+  color: var(--csi-ink);
+}
+
+.toolbar {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 8px;
+  justify-content: flex-end;
+  gap: var(--csi-s2);
 }
 
+/* Buttons (same look as .csi-btn, a little smaller) */
 .btn,
 .quick-links a {
-  border: 1px solid var(--line-strong);
-  background: #fff;
-  color: var(--text);
-  border-radius: 7px;
-  padding: 8px 12px;
-  min-height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--csi-s2);
+  min-height: var(--ctl);
+  padding: 0 14px;
+  border: 1px solid var(--csi-rule-strong);
+  background: var(--csi-paper);
+  color: var(--csi-ink);
+  font: 700 14px/1 var(--csi-font);
   text-decoration: none;
-  font: inherit;
+  cursor: pointer;
 }
 
 .btn:hover,
 .quick-links a:hover {
-  background: #f1f3f5;
+  border-color: var(--csi-ink);
+  color: var(--csi-ink);
+}
+
+.btn:disabled {
+  cursor: not-allowed;
+  color: var(--csi-muted);
+  background: var(--csi-surface);
 }
 
 .btn.primary {
-  color: #fff;
-  background: var(--accent);
-  border-color: var(--accent);
+  color: var(--csi-on-turquoise);
+  background: var(--csi-turquoise);
+  border-color: var(--csi-turquoise);
 }
 
 .btn.primary:hover {
-  background: var(--accent-dark);
+  background: var(--csi-turquoise-deep);
+  border-color: var(--csi-turquoise-deep);
+  color: var(--csi-on-turquoise);
+}
+
+.btn.primary:disabled {
+  background: var(--csi-rule-strong);
+  border-color: var(--csi-rule-strong);
+  color: var(--csi-paper);
 }
 
 .btn.danger {
-  color: var(--danger);
-  border-color: #e2c0bd;
+  color: var(--csi-rose);
+  border-color: var(--csi-rose);
+}
+
+.btn.danger:hover {
+  color: #ffffff;
+  background: var(--csi-rose);
+  border-color: var(--csi-rose);
 }
 
 .hidden-input {
   display: none;
 }
 
+/* Menus (Export, Account) */
+.menu {
+  position: relative;
+}
+
+.menu-caret {
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid currentColor;
+}
+
+.menu-panel {
+  position: absolute;
+  right: 0;
+  top: calc(100% + var(--csi-s1));
+  z-index: 30;
+  width: max-content;
+  min-width: 200px;
+  max-width: min(360px, calc(100vw - 24px));
+  padding: var(--csi-s1) 0;
+  background: var(--csi-paper);
+  border: 1px solid var(--csi-ink);
+}
+
+.menu-heading {
+  padding: var(--csi-s2) var(--csi-s4);
+  color: var(--csi-muted);
+  font: var(--csi-small);
+  overflow-wrap: break-word;
+  word-break: break-word;
+  border-bottom: var(--csi-border);
+  margin-bottom: var(--csi-s1);
+}
+
+.menu-item {
+  display: block;
+  width: 100%;
+  min-height: var(--ctl);
+  padding: 0 var(--csi-s4);
+  border: 0;
+  background: transparent;
+  color: var(--csi-ink);
+  font: 500 14px/1 var(--csi-font);
+  text-align: left;
+  cursor: pointer;
+}
+
+.menu-item:hover,
+.menu-item:focus-visible {
+  background: var(--csi-turquoise-tint);
+}
+
+/* Messages */
 .banner {
-  padding: 10px 16px;
-  color: var(--accent-dark);
-  background: var(--accent-weak);
-  border-bottom: 1px solid #bfe0d9;
+  padding: var(--csi-s2) var(--csi-s4);
+  color: var(--csi-turquoise-deep);
+  background: var(--csi-turquoise-tint);
+  border-bottom: var(--csi-border);
+  font: var(--csi-small);
 }
 
 .banner.error {
-  color: #7f1d1d;
-  background: #fff2f1;
-  border-bottom-color: #efc6c2;
+  color: var(--csi-text);
+  background: var(--csi-rose-tint);
+  border-left: 4px solid var(--csi-rose);
+}
+
+.banner.error::before {
+  content: 'Problem: ';
+  font-weight: 700;
+  color: var(--csi-rose);
 }
 
+/* Sign-in and session screens */
 .unlock-screen {
-  min-height: calc(100vh - 64px);
+  min-height: calc(100vh - var(--header));
   display: grid;
   place-items: center;
-  padding: 24px;
+  padding: var(--csi-s5) var(--csi-s4);
 }
 
 .unlock-panel {
-  width: min(100%, 380px);
+  width: min(100%, 420px);
   display: grid;
-  gap: 14px;
-  padding: 22px;
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  box-shadow: var(--shadow);
+  gap: var(--csi-s4);
+  padding: var(--csi-s5);
+  background: var(--csi-paper);
+  border: var(--csi-border);
+  border-top: var(--csi-bar) solid var(--csi-turquoise);
 }
 
-.unlock-panel h2,
-.unlock-panel p {
+.unlock-panel h2 {
   margin: 0;
+  font: var(--csi-h2);
+  color: var(--csi-ink);
 }
 
 .unlock-panel p {
-  color: var(--muted);
-}
-
-.workspace {
-  min-height: calc(100vh - 64px);
-  display: grid;
-  grid-template-columns: 300px minmax(420px, 1fr) 420px;
-}
-
-.sidebar,
-.editor,
-.source-panel {
-  min-height: 0;
-  background: var(--panel);
+  margin: 0;
+  color: var(--csi-muted);
 }
 
-.sidebar {
-  border-right: 1px solid var(--line);
-  display: flex;
-  flex-direction: column;
+.privacy-note {
+  font: var(--csi-small);
+  color: var(--csi-muted);
+  margin-top: var(--csi-s4);
 }
 
-.filters {
-  display: grid;
-  gap: 10px;
-  padding: 14px;
-  border-bottom: 1px solid var(--line);
+.turnstile-slot {
+  min-height: 65px;
+  margin: var(--csi-s2) 0;
 }
 
+/* Forms */
 label {
   display: grid;
-  gap: 6px;
-  color: var(--muted);
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0;
+  gap: 4px;
+  color: var(--csi-muted);
+  font: var(--csi-label);
+  letter-spacing: 0.08em;
   text-transform: uppercase;
 }
 
@@ -173,98 +324,248 @@ input,
 select,
 textarea {
   width: 100%;
-  min-height: 38px;
-  border: 1px solid var(--line-strong);
-  border-radius: 7px;
-  padding: 8px 10px;
-  color: var(--text);
-  background: #fff;
-  font: 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  min-height: var(--ctl);
+  border: 1px solid var(--csi-rule-strong);
+  padding: 0 var(--csi-s3);
+  color: var(--csi-ink);
+  background: var(--csi-paper);
+  font: 400 15px/1.4 var(--csi-font);
   text-transform: none;
   letter-spacing: 0;
 }
 
 textarea {
-  min-height: 94px;
+  min-height: 72px;
+  padding: var(--csi-s2) var(--csi-s3);
   resize: vertical;
 }
 
+input::placeholder,
+textarea::placeholder {
+  color: var(--csi-muted);
+}
+
 input:focus,
 select:focus,
 textarea:focus {
-  outline: 2px solid rgba(20, 108, 95, 0.18);
-  border-color: var(--accent);
+  border-color: var(--csi-turquoise);
+}
+
+/* Workspace: one view at a time */
+.workspace {
+  min-height: calc(100vh - var(--header));
+}
+
+.view-loading,
+.view-empty {
+  display: grid;
+  place-items: start center;
+  padding: var(--csi-s7) var(--csi-s4);
+}
+
+.view-list {
+  display: grid;
+  grid-template-columns: minmax(0, 760px);
+  justify-content: center;
+  align-items: start;
+  padding: var(--csi-s4);
+}
+
+.view-edit {
+  display: grid;
+  grid-template-columns: 300px minmax(0, 1fr) 320px;
+  align-items: start;
+}
+
+.empty {
+  display: grid;
+  gap: var(--csi-s2);
+  padding: var(--csi-s5) var(--csi-s4);
+  color: var(--csi-muted);
+  text-align: center;
+  justify-items: center;
+}
+
+.empty strong {
+  color: var(--csi-ink);
+  font: var(--csi-h3);
+}
+
+/* Welcome (no contacts yet) */
+.welcome {
+  width: min(100%, 560px);
+  display: grid;
+  gap: var(--csi-s4);
+  padding: var(--csi-s6);
+  background: var(--csi-paper);
+  border: var(--csi-border);
+  border-top: var(--csi-bar) solid var(--csi-turquoise);
+}
+
+.welcome h2 {
+  margin: 0;
+  font: var(--csi-h1);
+  color: var(--csi-ink);
+}
+
+.welcome p {
+  margin: 0;
+  max-width: var(--csi-measure);
+  font: var(--csi-body);
+  color: var(--csi-text);
+}
+
+.welcome-steps {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--csi-s3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: step;
+}
+
+.welcome-steps li {
+  counter-increment: step;
+  display: grid;
+  gap: 2px;
+  padding-top: var(--csi-s3);
+  border-top: 1px solid var(--csi-rule-strong);
+}
+
+.welcome-steps li::before {
+  content: counter(step, decimal-leading-zero);
+  font: var(--csi-label);
+  letter-spacing: 0.08em;
+  color: var(--csi-turquoise-deep);
+}
+
+.welcome-steps strong {
+  color: var(--csi-ink);
+  font: 700 15px/1.3 var(--csi-font);
+}
+
+.welcome-steps span {
+  color: var(--csi-muted);
+}
+
+.welcome-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--csi-s2);
+}
+
+/* Contact list */
+.sidebar {
+  background: var(--csi-paper);
+  border: var(--csi-border);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.view-edit .sidebar {
+  position: sticky;
+  top: var(--header);
+  height: calc(100vh - var(--header));
+  border-width: 0 1px 0 0;
+}
+
+.filters {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 140px);
+  gap: var(--csi-s2);
+  padding: var(--csi-s3);
+  border-bottom: var(--csi-border);
+}
+
+.view-edit .filters {
+  grid-template-columns: 1fr;
 }
 
 .contact-list {
   min-height: 0;
+  padding: var(--csi-s2);
+}
+
+.view-edit .contact-list {
   overflow-y: auto;
-  padding: 8px;
 }
 
 .list-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
-  padding: 6px 6px 10px;
-  color: var(--muted);
-  font-size: 12px;
+  gap: var(--csi-s3);
+  padding: 4px 6px 8px;
+  color: var(--csi-muted);
+  font: var(--csi-small);
 }
 
 .list-head strong {
-  color: var(--text);
-  font-size: 13px;
+  color: var(--csi-ink);
+  font: var(--csi-label);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 .contact-group {
   display: grid;
-  gap: 3px;
+  gap: 2px;
 }
 
 .letter-row {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  padding: 8px 7px 4px;
-  color: var(--muted);
-  background: var(--panel);
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0;
+  padding: var(--csi-s2) 6px var(--csi-s1);
+  color: var(--csi-muted);
+  font: var(--csi-label);
+  letter-spacing: 0.08em;
+  border-bottom: var(--csi-border);
 }
 
 .contact-row {
   width: 100%;
+  min-height: 56px;
   display: grid;
-  grid-template-columns: 48px 1fr;
-  gap: 10px;
+  grid-template-columns: 40px minmax(0, 1fr) auto;
+  gap: var(--csi-s3);
   align-items: center;
   border: 1px solid transparent;
-  border-radius: 8px;
-  padding: 8px;
-  color: var(--text);
+  border-left: 4px solid transparent;
+  padding: var(--csi-s1) var(--csi-s2);
+  color: var(--csi-text);
   background: transparent;
   text-align: left;
+  font: var(--csi-small);
+  cursor: pointer;
 }
 
 .contact-row:hover {
-  background: #f3f5f7;
+  background: var(--csi-surface);
 }
 
 .contact-row.active {
-  background: var(--accent-weak);
-  border-color: #a8d9cf;
+  background: var(--csi-turquoise-tint);
+  border-left-color: var(--csi-turquoise);
 }
 
 .contact-row img,
 .avatar-fallback {
-  width: 48px;
-  height: 48px;
-  border: 1px solid var(--line);
-  border-radius: 7px;
+  width: 40px;
+  height: 40px;
+  border: var(--csi-border);
   object-fit: cover;
-  background: #edf0f3;
+  background: var(--csi-surface);
+}
+
+.avatar-fallback {
+  display: grid;
+  place-items: center;
+  color: var(--csi-ink);
+  font: 700 16px/1 var(--csi-font);
+}
+
+.contact-text {
+  min-width: 0;
 }
 
 .contact-row strong,
@@ -275,77 +576,109 @@ textarea:focus {
   white-space: nowrap;
 }
 
+.contact-row strong {
+  color: var(--csi-ink);
+}
+
 .contact-row small {
-  color: var(--muted);
+  color: var(--csi-muted);
   margin-top: 2px;
 }
 
-.empty {
-  display: grid;
-  gap: 6px;
-  padding: 28px 16px;
-  color: var(--muted);
-  text-align: center;
+.row-flag {
+  padding: 1px var(--csi-s2);
+  color: var(--csi-copper);
+  background: var(--csi-copper-tint);
+  font: var(--csi-label);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
 
+/* Editor */
 .editor {
   min-width: 0;
-  overflow-y: auto;
+  background: var(--csi-paper);
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - var(--header));
 }
 
-.editor-empty {
-  min-height: 420px;
-  align-content: center;
+.editor-body {
+  flex: 1;
+}
+
+.phone-bar {
+  display: none;
 }
 
 .editor-head {
-  position: sticky;
-  top: 0;
-  z-index: 1;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 16px;
-  padding: 18px 22px;
-  background: rgba(255, 255, 255, 0.95);
-  border-bottom: 1px solid var(--line);
+  gap: var(--csi-s4);
+  padding: var(--csi-s3) var(--csi-s5);
+  border-bottom: var(--csi-border);
+}
+
+.editor-head h2,
+.editor-head p {
+  margin: 0;
 }
 
 .editor-head h2 {
-  font-size: 26px;
+  font: 700 22px/1.25 var(--csi-font);
+  color: var(--csi-ink);
+  overflow-wrap: anywhere;
 }
 
-.quick-links {
-  margin-top: 12px;
+.editor-head p {
+  color: var(--csi-muted);
+  font: var(--csi-small);
+}
+
+.head-flags {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--csi-s2);
+  margin-top: var(--csi-s2);
 }
 
 .review-chip {
-  display: inline-flex;
-  width: fit-content;
-  margin-top: 10px;
-  border: 1px solid #ead19b;
-  border-radius: 999px;
-  padding: 4px 9px;
-  color: #7a5209;
-  background: #fff7df;
-  font-size: 12px;
-  font-weight: 800;
+  padding: 2px var(--csi-s2);
+  color: var(--csi-copper);
+  background: var(--csi-copper-tint);
+  border-left: 4px solid var(--csi-copper);
+  font: 700 13px/1.5 var(--csi-font);
 }
 
 .confidence {
-  border-radius: 999px;
-  padding: 5px 10px;
-  color: var(--accent);
-  background: var(--accent-weak);
-  font-size: 12px;
-  font-weight: 800;
+  padding: 2px var(--csi-s2);
+  color: var(--csi-muted);
+  background: var(--csi-surface);
+  border: var(--csi-border);
+  font: var(--csi-label);
+  letter-spacing: 0.08em;
+}
+
+.quick-links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--csi-s2);
+}
+
+.quick-links a {
+  min-height: 32px;
+  padding: 0 var(--csi-s3);
+  font-size: 13px;
 }
 
 .form-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
-  padding: 18px 22px 0;
+  gap: var(--csi-s3) var(--csi-s4);
+  padding: var(--csi-s4) var(--csi-s5);
 }
 
 .form-grid .wide {
@@ -353,172 +686,342 @@ textarea:focus {
 }
 
 .actions {
-  padding: 18px 22px 28px;
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--csi-s2);
+  padding: var(--csi-s3) var(--csi-s5);
+  background: var(--csi-paper);
+  border-top: var(--csi-border);
 }
 
+.actions .danger {
+  margin-left: auto;
+}
+
+/* Card photo */
 .source-panel {
-  border-left: 1px solid var(--line);
+  position: sticky;
+  top: var(--header);
+  height: calc(100vh - var(--header));
+  background: var(--csi-paper);
+  border-left: var(--csi-border);
   display: flex;
   flex-direction: column;
 }
 
 .source-head {
-  min-height: 54px;
+  min-height: 48px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--line);
+  gap: var(--csi-s3);
+  padding: var(--csi-s2) var(--csi-s4);
+  border-bottom: var(--csi-border);
+}
+
+.source-head h2 {
+  margin: 0;
+  font: var(--csi-label);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--csi-muted);
 }
 
 .source-head a {
-  color: var(--accent);
-  text-decoration: none;
+  color: var(--csi-turquoise);
+  text-decoration: underline;
+  text-underline-offset: 3px;
 }
 
 .source-body {
   flex: 1;
   overflow: auto;
-  padding: 12px;
-  background: #e9edf1;
+  padding: var(--csi-s3);
+  background: var(--csi-surface);
 }
 
 .source-body img {
   display: block;
   width: 100%;
   height: auto;
-  border-radius: 8px;
-  box-shadow: var(--shadow);
-  background: white;
+  border: var(--csi-border);
+  background: var(--csi-paper);
+}
+
+/* Dialogs */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: grid;
+  place-items: center;
+  padding: var(--csi-s4);
+  background: rgba(21, 23, 26, 0.5);
 }
 
+.modal-panel {
+  width: min(100%, 440px);
+  max-height: 100%;
+  overflow: auto;
+  display: grid;
+  gap: var(--csi-s4);
+  padding: var(--csi-s5);
+  background: var(--csi-paper);
+  border: 1px solid var(--csi-ink);
+  border-top: var(--csi-bar) solid var(--csi-turquoise);
+}
+
+.modal-head,
+.modal-actions {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--csi-s3);
+}
+
+.modal-head h2,
+.modal-head p {
+  margin: 0;
+}
+
+.modal-head h2 {
+  font: var(--csi-h3);
+  color: var(--csi-ink);
+}
+
+.modal-head p {
+  color: var(--csi-muted);
+  font: var(--csi-small);
+}
+
+.modal-actions {
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.session-panel {
+  border-top-color: var(--csi-copper);
+}
+
+.session-body {
+  display: grid;
+  gap: var(--csi-s3);
+}
+
+.session-body p {
+  margin: 0;
+  max-width: var(--csi-measure);
+  font: var(--csi-body);
+  color: var(--csi-text);
+}
+
+.app-content[inert] {
+  opacity: 0.4;
+}
+
+/* Medium screens: photo moves under the form */
 @media (max-width: 1120px) {
-  .workspace {
-    grid-template-columns: 280px minmax(0, 1fr);
+  .view-edit {
+    grid-template-columns: 260px minmax(0, 1fr);
   }
 
   .source-panel {
+    position: static;
+    height: auto;
     grid-column: 2;
-    border-top: 1px solid var(--line);
     border-left: 0;
+    border-top: var(--csi-border);
   }
 
   .source-body {
-    max-height: 360px;
+    max-height: 420px;
+  }
+
+  .actions {
+    position: static;
   }
 }
 
+/* Phones: one task at a time */
 @media (max-width: 760px) {
+  .app-shell {
+    --header: 101px;
+  }
+
   .topbar {
-    align-items: flex-start;
+    position: static;
     flex-direction: column;
+    align-items: stretch;
+    gap: var(--csi-s2);
+    padding: var(--csi-s2) var(--csi-s3);
   }
 
-  .workspace {
-    display: flex;
-    flex-direction: column;
+  .toolbar {
+    flex-wrap: nowrap;
+    justify-content: stretch;
+    gap: 6px;
   }
 
-  .sidebar {
-    order: 1;
-    border-right: 0;
-    border-bottom: 1px solid var(--line);
+  .toolbar .btn {
+    white-space: nowrap;
   }
 
-  .source-panel {
-    order: 2;
-    border-bottom: 1px solid var(--line);
+  .toolbar > .btn.primary {
+    flex: 1 1 auto;
   }
 
-  .editor {
-    order: 3;
+  .toolbar .menu-button,
+  .toolbar > .btn:not(.primary) {
+    padding: 0 10px;
+    font-size: 13px;
   }
 
-  .contact-list {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    align-items: start;
-    max-height: none;
+  .view-loading,
+  .view-empty {
+    padding: var(--csi-s5) var(--csi-s3);
   }
 
-  .list-head {
-    grid-column: 1 / -1;
+  .welcome {
+    padding: var(--csi-s4);
   }
 
-  .letter-row {
-    position: static;
+  .welcome h2 {
+    font: var(--csi-h2);
+  }
+
+  .welcome-steps {
+    grid-template-columns: 1fr;
+    gap: var(--csi-s2);
+  }
+
+  .welcome-steps li {
+    grid-template-columns: auto 1fr;
+    align-items: baseline;
+    column-gap: var(--csi-s3);
+  }
+
+  .welcome-steps li span {
+    grid-column: 2;
+  }
+
+  .welcome-actions .btn {
+    flex: 1 1 100%;
+  }
+
+  .view-list {
+    padding: 0;
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .view-list .sidebar {
+    border-width: 0;
+  }
+
+  .view-edit {
+    display: block;
+  }
+
+  .view-edit .sidebar {
+    display: none;
+  }
+
+  .phone-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--csi-s2);
+    padding: var(--csi-s2) var(--csi-s3);
+    border-bottom: var(--csi-border);
+  }
+
+  .segmented {
+    display: flex;
+    border: 1px solid var(--csi-rule-strong);
+  }
+
+  .segmented button {
+    min-height: var(--ctl);
+    padding: 0 var(--csi-s3);
+    border: 0;
+    background: var(--csi-paper);
+    color: var(--csi-ink);
+    font: 700 14px/1 var(--csi-font);
+    cursor: pointer;
+  }
+
+  .segmented button[aria-pressed='true'] {
+    background: var(--csi-ink);
+    color: var(--csi-paper);
+  }
+
+  .segmented button + button {
+    border-left: 1px solid var(--csi-rule-strong);
+  }
+
+  .editor {
+    min-height: calc(100vh - var(--header) - 61px);
   }
 
   .form-grid {
     grid-template-columns: 1fr;
+    padding: var(--csi-s3);
   }
 
   .editor-head {
-    position: static;
+    flex-direction: column;
+    padding: var(--csi-s3);
   }
 
-  .source-body {
-    max-height: 260px;
+  .quick-links {
+    justify-content: flex-start;
   }
-}
 
-.turnstile-slot {
-  min-height: 65px;
-  margin: 8px 0;
-}
+  .quick-links a {
+    min-height: var(--ctl);
+  }
 
-.privacy-note {
-  font-size: 12px;
-  opacity: 0.7;
-  margin-top: 16px;
-}
+  .actions {
+    position: sticky;
+    padding: var(--csi-s3);
+  }
 
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 20;
-  display: grid;
-  place-items: center;
-  padding: 18px;
-  background: rgba(31, 37, 45, 0.34);
-}
+  .actions .btn {
+    flex: 1 1 auto;
+  }
 
-.modal-panel {
-  width: min(100%, 420px);
-  display: grid;
-  gap: 14px;
-  padding: 18px;
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  box-shadow: var(--shadow);
-}
+  .actions .danger {
+    margin-left: 0;
+  }
 
-.modal-head,
-.modal-actions {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-}
+  .view-edit .source-panel {
+    display: none;
+  }
 
-.modal-head h2,
-.modal-head p {
-  margin: 0;
-}
+  .view-edit.show-photo .source-panel {
+    display: flex;
+    position: static;
+    height: auto;
+    border-top: 0;
+  }
 
-.modal-head h2 {
-  font-size: 18px;
-}
+  .view-edit.show-photo .editor-body,
+  .view-edit.show-photo .actions {
+    display: none;
+  }
 
-.modal-head p {
-  color: var(--muted);
-  font-size: 13px;
+  .view-edit.show-photo .editor {
+    min-height: 0;
+  }
 }
 
-.modal-actions {
-  align-items: center;
-  justify-content: flex-start;
-  flex-wrap: wrap;
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
 }
diff --git a/src/App.tsx b/src/App.tsx
index 59f37f2..0073986 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import './App.css'
 import { LoginGate } from './components/LoginGate'
-import { apiGet, apiJson, apiUpload } from './lib/api'
+import { Menu } from './components/Menu'
+import { SessionPanel, type SessionProblem } from './components/SessionPanel'
+import { SignOutConfirm } from './components/SignOutConfirm'
+import { ApiError, apiGet, apiJson, apiUpload, relativeEdgeUrl } from './lib/api'
 import { contactDisplayName, groupContactsByInitial, sortContactsByName } from './shared/contacts'
 import { contactNeedsReview, reviewedContact } from './shared/review'
 import type { Contact, ContactStatus } from './shared/types'
@@ -16,11 +19,18 @@ function App() {
   const [busy, setBusy] = useState(false)
   const [authRequired, setAuthRequired] = useState(false)
   const [userEmail, setUserEmail] = useState('')
+  const [accessMode, setAccessMode] = useState(false)
+  const [photoTab, setPhotoTab] = useState(false)
+  const [confirmSignOut, setConfirmSignOut] = useState(false)
   const [passwordPanelOpen, setPasswordPanelOpen] = useState(false)
   const [accountPassword, setAccountPassword] = useState('')
   const [accountPasswordConfirm, setAccountPasswordConfirm] = useState('')
   const [notice, setNotice] = useState('')
   const [error, setError] = useState('')
+  const [sessionProblem, setSessionProblem] = useState<SessionProblem | null>(null)
+  const signedInRef = useRef(false)
+  const signedOutRef = useRef(false)
+  const draftRef = useRef<Contact | null>(null)
   const fileInput = useRef<HTMLInputElement | null>(null)
   const importInput = useRef<HTMLInputElement | null>(null)
   const selectedIdRef = useRef('')
@@ -29,6 +39,7 @@ function App() {
     const nextId = contact?.id || ''
     selectedIdRef.current = nextId
     setSelectedId(nextId)
+    setPhotoTab(false)
     setDraft(contact ? cloneContact(contact) : null)
   }, [])
 
@@ -38,23 +49,27 @@ function App() {
       setError('')
       try {
         const data = await apiGet<{ contacts: Contact[] }>('/api/contacts')
+        if (signedOutRef.current) return undefined // a slow load must not bring the screen back after sign out
         const sortedContacts = sortContactsByName(data.contacts)
         setContacts(sortedContacts)
         setAuthRequired(false)
         const nextId = preferredId || selectedIdRef.current
-        selectContact(sortedContacts.find((contact) => contact.id === nextId) || sortedContacts[0] || null)
+        selectContact(sortedContacts.find((contact) => contact.id === nextId) || null)
+        return sortedContacts
       } catch (err) {
-        const message = messageFrom(err)
-        if (message.includes('Sign in to continue')) {
+        if (signedInRef.current && err instanceof ApiError && (err.kind === 'session-ended' || err.kind === 'denied')) {
+          reportSessionProblem(err)
+        } else if (messageFrom(err).includes('Sign in to continue')) {
           setAuthRequired(true)
           setError('')
         } else {
-          setError(message)
+          setError(messageFrom(err))
         }
       } finally {
         setLoading(false)
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [selectContact],
   )
 
@@ -65,10 +80,20 @@ function App() {
         const me = await apiGet<{ email: string }>('/api/me')
         if (cancelled) return
         setUserEmail(me.email)
-        await loadContacts()
-      } catch {
+        signedInRef.current = true
+        // In Access mode the edge handles sign-in, so the password screens are not offered.
+        const config = await apiGet<{ mode?: string }>('/api/auth/config').catch(() => ({}) as { mode?: string })
+        if (!cancelled) setAccessMode(config.mode === 'access')
+        const loaded = await loadContacts()
+        if (loaded) restorePendingDraft(loaded)
+      } catch (err) {
         if (cancelled) return
-        setAuthRequired(true)
+        if (err instanceof ApiError && err.kind === 'denied') {
+          // Signed in at the edge but refused by CardCap: explain it instead of offering a sign-in form.
+          reportSessionProblem(err)
+        } else {
+          setAuthRequired(true)
+        }
         setLoading(false)
       }
     }
@@ -76,6 +101,7 @@ function App() {
     return () => {
       cancelled = true
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loadContacts])
 
   const filteredContacts = useMemo(() => {
@@ -105,6 +131,46 @@ function App() {
   const contactGroups = useMemo(() => groupContactsByInitial(filteredContacts), [filteredContacts])
   const reviewCount = useMemo(() => contacts.filter(contactNeedsReview).length, [contacts])
 
+  draftRef.current = draft
+
+  function reportSessionProblem(err: ApiError) {
+    if (err.kind === 'denied') {
+      // A 403 only comes from Access mode, where the edge logout path is the way out.
+      setSessionProblem({ kind: 'denied', message: err.message, logoutUrl: err.logoutUrl || '/cdn-cgi/access/logout' })
+      return
+    }
+    const pending = draftRef.current
+    const original = pending ? contacts.find((contact) => contact.id === pending.id) : null
+    const hasUnsavedEdits = Boolean(pending && original && JSON.stringify(pending) !== JSON.stringify(original))
+    if (pending && hasUnsavedEdits) writePendingDraft(pending)
+    setSessionProblem({ kind: 'ended', hasUnsavedEdits })
+  }
+
+  // One place decides how a failed request is shown: session ended, account refused, offline, or a plain message.
+  function fail(err: unknown) {
+    if (err instanceof ApiError && signedInRef.current && (err.kind === 'session-ended' || err.kind === 'denied')) {
+      reportSessionProblem(err)
+      return
+    }
+    setError(messageFrom(err))
+  }
+
+  function restorePendingDraft(loaded: Contact[]) {
+    const saved = readPendingDraft()
+    if (!saved) return
+    clearPendingDraft()
+    if (!loaded.some((contact) => contact.id === saved.id)) return
+    setSelectedId(saved.id)
+    selectedIdRef.current = saved.id
+    setDraft(saved)
+    setNotice('Welcome back. We restored the edits you had not saved. Review them, then save.')
+  }
+
+  function signInAgain() {
+    // Reloading this page sends the browser through Access sign-in and back to the same page.
+    window.location.reload()
+  }
+
   async function handleFiles(files: FileList | null) {
     if (!files || files.length === 0) return
     setBusy(true)
@@ -128,7 +194,7 @@ function App() {
           : 'Cards added. Review the extracted fields before follow-up.',
       )
     } catch (err) {
-      setError(messageFrom(err))
+      fail(err)
     } finally {
       setBusy(false)
       if (fileInput.current) fileInput.current.value = ''
@@ -155,7 +221,7 @@ function App() {
           `${data.created} new, ${data.merged} merged${data.skipped ? `, ${data.skipped} skipped` : ''}.`,
       )
     } catch (err) {
-      setError(messageFrom(err))
+      fail(err)
     } finally {
       setBusy(false)
       if (importInput.current) importInput.current.value = ''
@@ -163,14 +229,38 @@ function App() {
   }
 
   async function handleSignedIn() {
+    signedOutRef.current = false
+    signedInRef.current = true
     setAuthRequired(false)
     const me = await apiGet<{ email: string }>('/api/me').catch(() => null)
     setUserEmail(me?.email || '')
     await loadContacts()
   }
 
+  // In Access mode signing out ends the shared CSI sign-in (Blackboard too), so ask first; the old sign-in only ends this app's session.
+  function askSignOut() {
+    if (accessMode || sessionProblem?.kind === 'denied') setConfirmSignOut(true)
+    else void signOut()
+  }
+
+  function cancelSignOut() {
+    setConfirmSignOut(false)
+    // Put focus back on the Account button (when that is where the person came from).
+    requestAnimationFrame(() => document.querySelector<HTMLElement>('[aria-label^="Account menu"]')?.focus())
+  }
+
   async function signOut() {
-    await apiJson<{ ok: boolean }>('/api/auth/logout', 'POST').catch(() => undefined)
+    setConfirmSignOut(false)
+    const result = await apiJson<{ ok: boolean; logoutUrl?: string }>('/api/auth/logout', 'POST').catch(() => undefined)
+    const logoutUrl = relativeEdgeUrl(result?.logoutUrl) || (sessionProblem?.kind === 'denied' ? relativeEdgeUrl(sessionProblem.logoutUrl) : undefined)
+    if (logoutUrl) {
+      clearPendingDraft()
+      window.location.assign(logoutUrl)
+      return
+    }
+    signedOutRef.current = true
+    signedInRef.current = false
+    setSessionProblem(null)
     setUserEmail('')
     setContacts([])
     setPasswordPanelOpen(false)
@@ -194,7 +284,7 @@ function App() {
       setAccountPasswordConfirm('')
       setNotice('Password saved.')
     } catch (err) {
-      setError(messageFrom(err))
+      fail(err)
     } finally {
       setBusy(false)
     }
@@ -216,7 +306,7 @@ function App() {
       selectContact(data.contact)
       setNotice('Saved.')
     } catch (err) {
-      setError(messageFrom(err))
+      fail(err)
     } finally {
       setBusy(false)
     }
@@ -232,10 +322,10 @@ function App() {
       await apiJson<{ deleted: boolean }>(`/api/contacts/${encodeURIComponent(draft.id)}`, 'DELETE')
       const next = sortContactsByName(contacts.filter((contact) => contact.id !== draft.id))
       setContacts(next)
-      selectContact(next[0] || null)
+      selectContact(null)
       setNotice('Deleted.')
     } catch (err) {
-      setError(messageFrom(err))
+      fail(err)
     } finally {
       setBusy(false)
     }
@@ -258,7 +348,7 @@ function App() {
       selectContact(data.contact)
       setNotice('Marked reviewed.')
     } catch (err) {
-      setError(messageFrom(err))
+      fail(err)
     } finally {
       setBusy(false)
     }
@@ -272,65 +362,81 @@ function App() {
     window.location.href = path
   }
 
+  const view: 'loading' | 'empty' | 'list' | 'edit' =
+    contacts.length === 0 ? (loading ? 'loading' : 'empty') : draft ? 'edit' : 'list'
+
   return (
     <div className="app-shell">
+      <a className="skip-link" href="#main">
+        Skip to contacts
+      </a>
+      <div className="app-content" aria-busy={loading}>
+      <div className="brand-bar" aria-hidden="true" />
       <header className="topbar">
-        <div>
-          <h1>CardCap</h1>
-          <p>Business cards in. Follow-up CRM out.</p>
-        </div>
-        <div className="toolbar">
-          <button className="btn primary" type="button" onClick={() => fileInput.current?.click()} disabled={busy}>
-            Add Cards
-          </button>
-          <input
-            ref={fileInput}
-            className="hidden-input"
-            type="file"
-            accept="image/*"
-            capture="environment"
-            multiple
-            onChange={(event) => void handleFiles(event.currentTarget.files)}
-          />
-          <button className="btn" type="button" onClick={() => importInput.current?.click()} disabled={busy}>
-            Import
-          </button>
-          <input
-            ref={importInput}
-            className="hidden-input"
-            type="file"
-            accept=".csv,.vcf,.vcard,.json,text/csv,text/vcard,application/json"
-            onChange={(event) => void handleImport(event.currentTarget.files)}
-          />
-          <button className="btn" type="button" onClick={() => exportUrl('/api/export.csv')}>
-            CSV
-          </button>
-          <button className="btn" type="button" onClick={() => exportUrl('/api/export.vcf')}>
-            vCard
-          </button>
-          <button className="btn" type="button" onClick={() => exportUrl('/api/export.json')}>
-            JSON
-          </button>
-          <button className="btn" type="button" onClick={() => exportUrl('/api/export.html')}>
-            HTML
-          </button>
-          <button className="btn" type="button" onClick={() => exportUrl('/api/export.icontact.csv')}>
-            iContact CSV
-          </button>
-          {userEmail && (
-            <>
-              <button className="btn" type="button" onClick={() => setPasswordPanelOpen(true)} title={userEmail}>
-                Set password
-              </button>
-              <button className="btn" type="button" onClick={() => void signOut()} title={userEmail}>
-                Sign out
-              </button>
-            </>
-          )}
+        <div className="brand">
+          <picture>
+            <source srcSet="/brand/csi-monogram-dark.svg" media="(prefers-color-scheme: dark)" />
+            <img className="brand-mark" src="/brand/csi-monogram-light.svg" alt="" width="36" height="36" />
+          </picture>
+          <div className="brand-text">
+            <span className="brand-org">Copper State Intelligence</span>
+            <h1>CardCap</h1>
+          </div>
         </div>
+        {!authRequired && (
+          <div className="toolbar">
+            <button className="btn primary" type="button" onClick={() => fileInput.current?.click()} disabled={busy}>
+              Add cards
+            </button>
+            <input
+              ref={fileInput}
+              className="hidden-input"
+              type="file"
+              accept="image/*"
+              capture="environment"
+              multiple
+              onChange={(event) => void handleFiles(event.currentTarget.files)}
+            />
+            <button className="btn" type="button" onClick={() => importInput.current?.click()} disabled={busy}>
+              Import
+            </button>
+            <input
+              ref={importInput}
+              className="hidden-input"
+              type="file"
+              accept=".csv,.vcf,.vcard,.json,text/csv,text/vcard,application/json"
+              onChange={(event) => void handleImport(event.currentTarget.files)}
+            />
+            <Menu
+              label="Export"
+              items={[
+                { label: 'CSV', onSelect: () => exportUrl('/api/export.csv') },
+                { label: 'vCard', onSelect: () => exportUrl('/api/export.vcf') },
+                { label: 'JSON', onSelect: () => exportUrl('/api/export.json') },
+                { label: 'HTML', onSelect: () => exportUrl('/api/export.html') },
+                { label: 'iContact CSV', onSelect: () => exportUrl('/api/export.icontact.csv') },
+              ]}
+            />
+            {userEmail && (
+              <Menu
+                label="Account"
+                ariaLabel={`Account menu for ${userEmail}`}
+                items={[
+                  { heading: `Signed in as ${userEmail}` },
+                  ...(accessMode ? [] : [{ label: 'Set password', onSelect: () => setPasswordPanelOpen(true) }]),
+                  { label: 'Sign out', onSelect: askSignOut },
+                ]}
+              />
+            )}
+          </div>
+        )}
       </header>
 
-      {(notice || error) && <div className={error ? 'banner error' : 'banner'}>{error || notice}</div>}
+      {(notice || error) && (
+        <div className={error ? 'banner error' : 'banner'} role={error ? 'alert' : 'status'}>
+          {error || notice}
+        </div>
+      )}
 
       {passwordPanelOpen && (
         <div className="modal-backdrop" role="presentation" onClick={() => setPasswordPanelOpen(false)}>
@@ -391,201 +497,248 @@ function App() {
       {authRequired && <LoginGate onSignedIn={() => void handleSignedIn()} />}
 
       {!authRequired && (
-      <main className="workspace">
-        <aside className="sidebar">
-          <div className="filters">
-            <label>
-              Name Search
-              <input
-                type="search"
-                value={query}
-                placeholder="Search the main list"
-                onChange={(event) => setQuery(event.currentTarget.value)}
-              />
-            </label>
-            <label>
-              Status
-              <select value={statusFilter} onChange={(event) => setStatusFilter(event.currentTarget.value)}>
-                <option value="">All contacts</option>
-                <option value="__review__">Review queue</option>
-                <option value="New">New</option>
-                <option value="Follow up">Follow up</option>
-                <option value="Active">Active</option>
-                <option value="Archived">Archived</option>
-              </select>
-            </label>
-          </div>
-
-          <div className="contact-list">
-            <div className="list-head">
-              <strong>Main List</strong>
-              <span>
-                {filteredContacts.length} shown
-                {reviewCount > 0 ? ` / ${reviewCount} review` : ''}
-              </span>
-            </div>
-            {loading && <div className="empty">Loading contacts...</div>}
-            {!loading && filteredContacts.length === 0 && (
-              <div className="empty">
-                <strong>No contacts yet.</strong>
-                <span>Tap Add Cards to take a photo or upload from Photos.</span>
+        <main className={`workspace view-${view}${photoTab ? ' show-photo' : ''}`} id="main" tabIndex={-1}>
+          {view === 'loading' && <div className="empty">Loading contacts...</div>}
+
+          {view === 'empty' && (
+            <section className="welcome" aria-labelledby="welcome-title">
+              <h2 id="welcome-title">Add your first business cards</h2>
+              <p>Choose Add cards at the top to take a photo or pick pictures of business cards. CardCap reads each one, you check it, and then you save it to your list.</p>
+              <ol className="welcome-steps">
+                <li>
+                  <strong>Add</strong>
+                  <span>Photos of cards</span>
+                </li>
+                <li>
+                  <strong>Review</strong>
+                  <span>Fix anything it missed</span>
+                </li>
+                <li>
+                  <strong>Export</strong>
+                  <span>CSV, vCard or iContact</span>
+                </li>
+              </ol>
+              <div className="welcome-actions">
+                <button className="btn" type="button" onClick={() => importInput.current?.click()} disabled={busy}>
+                  Import a file
+                </button>
               </div>
-            )}
-            {contactGroups.map((group) => (
-              <section className="contact-group" key={group.letter} aria-label={`${group.letter} contacts`}>
-                <div className="letter-row">{group.letter}</div>
-                {group.contacts.map((contact) => (
-                  <button
-                    className={`contact-row ${contact.id === selectedId ? 'active' : ''}`}
-                    key={contact.id}
-                    type="button"
-                    onClick={() => selectContact(contact)}
-                  >
-                    {contact.sourceImageUrl ? <img src={contact.sourceImageUrl} alt="" /> : <span className="avatar-fallback" />}
-                    <span>
-                      <strong>{contactDisplayName(contact)}</strong>
-                      <small>{[contact.company, contact.role].filter(Boolean).join(' - ') || contact.email || 'Needs review'}</small>
-                    </span>
-                  </button>
-                ))}
-              </section>
-            ))}
-          </div>
-        </aside>
-
-        <section className="editor">
-          {!draft && (
-            <div className="empty editor-empty">
-              <strong>Ready for your first batch.</strong>
-              <span>Upload business card photos and CardCap will create editable contact drafts.</span>
-            </div>
+            </section>
           )}
-          {draft && (
-            <>
-              <div className="editor-head">
-                <div>
-                  <h2>{draft.name || 'Review Contact'}</h2>
-                  <p>{[draft.company, draft.role].filter(Boolean).join(' - ') || 'Extracted card draft'}</p>
-                  {contactNeedsReview(draft) && <div className="review-chip">Needs review</div>}
-                  <div className="quick-links">
-                    {draft.email && <a href={`mailto:${draft.email}`}>Email</a>}
-                    {draft.phones[0] && <a href={`tel:${phoneHref(draft.phones[0])}`}>Call</a>}
-                    {draft.website && (
-                      <a href={draft.website} target="_blank" rel="noreferrer">
-                        Website
-                      </a>
-                    )}
-                    {draft.address && (
-                      <a
-                        href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(draft.address)}`}
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        Map
-                      </a>
-                    )}
-                  </div>
-                </div>
-                <span className="confidence">{Math.round(draft.extractionConfidence * 100)}%</span>
-              </div>
 
-              <div className="form-grid">
+          {(view === 'list' || view === 'edit') && (
+            <aside className="sidebar" aria-label="Contacts">
+              <div className="filters">
                 <label>
-                  Name
-                  <input value={draft.name} onChange={(event) => updateDraft('name', event.currentTarget.value)} />
-                </label>
-                <label>
-                  Company
-                  <input value={draft.company} onChange={(event) => updateDraft('company', event.currentTarget.value)} />
-                </label>
-                <label>
-                  Role
-                  <input value={draft.role} onChange={(event) => updateDraft('role', event.currentTarget.value)} />
-                </label>
-                <label>
-                  Status
-                  <select
-                    value={draft.status}
-                    onChange={(event) => updateDraft('status', event.currentTarget.value as ContactStatus)}
-                  >
-                    <option>New</option>
-                    <option>Follow up</option>
-                    <option>Active</option>
-                    <option>Archived</option>
-                  </select>
-                </label>
-                <label>
-                  Email
-                  <input value={draft.email} onChange={(event) => updateDraft('email', event.currentTarget.value)} />
-                </label>
-                <label>
-                  Website
-                  <input value={draft.website} onChange={(event) => updateDraft('website', normalizeUrl(event.currentTarget.value))} />
-                </label>
-                <label>
-                  Phones
-                  <textarea
-                    value={draft.phones.join('\n')}
-                    onChange={(event) => updateDraft('phones', splitLines(event.currentTarget.value))}
+                  Search
+                  <input
+                    type="search"
+                    value={query}
+                    placeholder="Name, company, email"
+                    onChange={(event) => setQuery(event.currentTarget.value)}
                   />
                 </label>
                 <label>
-                  Tags
-                  <textarea
-                    value={draft.tags.join('\n')}
-                    onChange={(event) => updateDraft('tags', splitLines(event.currentTarget.value))}
-                  />
-                </label>
-                <label className="wide">
-                  Address
-                  <input value={draft.address} onChange={(event) => updateDraft('address', event.currentTarget.value)} />
-                </label>
-                <label className="wide">
-                  Next step
-                  <input value={draft.nextStep} onChange={(event) => updateDraft('nextStep', event.currentTarget.value)} />
-                </label>
-                <label className="wide">
-                  Notes
-                  <textarea value={draft.notes} onChange={(event) => updateDraft('notes', event.currentTarget.value)} />
+                  Show
+                  <select value={statusFilter} onChange={(event) => setStatusFilter(event.currentTarget.value)}>
+                    <option value="">All contacts</option>
+                    <option value="__review__">Needs review</option>
+                    <option value="New">New</option>
+                    <option value="Follow up">Follow up</option>
+                    <option value="Active">Active</option>
+                    <option value="Archived">Archived</option>
+                  </select>
                 </label>
               </div>
 
-              <div className="actions">
-                <button className="btn primary" type="button" onClick={() => void saveDraft()} disabled={busy}>
-                  Save Contact
-                </button>
-                {contactNeedsReview(draft) && (
-                  <button className="btn" type="button" onClick={() => void markReviewed()} disabled={busy}>
-                    Mark Reviewed
-                  </button>
+              <div className="contact-list">
+                <div className="list-head">
+                  <strong>Contacts</strong>
+                  <span>
+                    {filteredContacts.length} shown
+                    {reviewCount > 0 ? `, ${reviewCount} to review` : ''}
+                  </span>
+                </div>
+                {filteredContacts.length === 0 && (
+                  <div className="empty">
+                    <strong>No contacts match.</strong>
+                    <button
+                      className="btn"
+                      type="button"
+                      onClick={() => {
+                        setQuery('')
+                        setStatusFilter('')
+                      }}
+                    >
+                      Clear search
+                    </button>
+                  </div>
                 )}
-                <button className="btn danger" type="button" onClick={() => void deleteSelected()} disabled={busy}>
-                  Delete
-                </button>
+                {contactGroups.map((group) => (
+                  <section className="contact-group" key={group.letter} aria-label={`${group.letter} contacts`}>
+                    <div className="letter-row">{group.letter}</div>
+                    {group.contacts.map((contact) => (
+                      <button
+                        className={`contact-row ${contact.id === selectedId ? 'active' : ''}`}
+                        key={contact.id}
+                        type="button"
+                        aria-current={contact.id === selectedId ? 'true' : undefined}
+                        onClick={() => selectContact(contact)}
+                      >
+                        {contact.sourceImageUrl ? <img src={contact.sourceImageUrl} alt="" /> : <span className="avatar-fallback" aria-hidden="true">{contactDisplayName(contact).trim().charAt(0).toUpperCase()}</span>}
+                        <span className="contact-text">
+                          <strong>{contactDisplayName(contact)}</strong>
+                          <small>{[contact.company, contact.role].filter(Boolean).join(' - ') || contact.email || 'Needs review'}</small>
+                        </span>
+                        {contactNeedsReview(contact) && <span className="row-flag">Review</span>}
+                      </button>
+                    ))}
+                  </section>
+                ))}
               </div>
+            </aside>
+          )}
+
+          {view === 'edit' && draft && (
+            <>
+              <section className="editor" aria-label="Edit contact">
+                <div className="phone-bar">
+                  <button className="btn back-button" type="button" onClick={() => selectContact(null)}>
+                    All contacts
+                  </button>
+                  <div className="segmented" role="group" aria-label="Show">
+                    <button type="button" aria-pressed={!photoTab} onClick={() => setPhotoTab(false)}>
+                      Details
+                    </button>
+                    <button type="button" aria-pressed={photoTab} onClick={() => setPhotoTab(true)}>
+                      Card photo
+                    </button>
+                  </div>
+                </div>
+                <div className="editor-body">
+                  <div className="editor-head">
+                    <div>
+                      <h2>{draft.name || 'Review contact'}</h2>
+                      <p>{[draft.company, draft.role].filter(Boolean).join(' - ') || 'Extracted card draft'}</p>
+                      <div className="head-flags">
+                        {contactNeedsReview(draft) && <span className="review-chip">Needs review</span>}
+                        <span className="confidence" title="How sure CardCap is about what it read">
+                          {Math.round(draft.extractionConfidence * 100)}%
+                        </span>
+                      </div>
+                    </div>
+                    <div className="quick-links">
+                      {draft.email && <a href={`mailto:${draft.email}`}>Email</a>}
+                      {draft.phones[0] && <a href={`tel:${phoneHref(draft.phones[0])}`}>Call</a>}
+                      {draft.website && (
+                        <a href={draft.website} target="_blank" rel="noreferrer">
+                          Website
+                        </a>
+                      )}
+                      {draft.address && (
+                        <a
+                          href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(draft.address)}`}
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          Map
+                        </a>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="form-grid">
+                    <label>
+                      Name
+                      <input value={draft.name} onChange={(event) => updateDraft('name', event.currentTarget.value)} />
+                    </label>
+                    <label>
+                      Company
+                      <input value={draft.company} onChange={(event) => updateDraft('company', event.currentTarget.value)} />
+                    </label>
+                    <label>
+                      Role
+                      <input value={draft.role} onChange={(event) => updateDraft('role', event.currentTarget.value)} />
+                    </label>
+                    <label>
+                      Status
+                      <select value={draft.status} onChange={(event) => updateDraft('status', event.currentTarget.value as ContactStatus)}>
+                        <option>New</option>
+                        <option>Follow up</option>
+                        <option>Active</option>
+                        <option>Archived</option>
+                      </select>
+                    </label>
+                    <label>
+                      Email
+                      <input value={draft.email} onChange={(event) => updateDraft('email', event.currentTarget.value)} />
+                    </label>
+                    <label>
+                      Website
+                      <input value={draft.website} onChange={(event) => updateDraft('website', normalizeUrl(event.currentTarget.value))} />
+                    </label>
+                    <label>
+                      Phones
+                      <textarea value={draft.phones.join('\n')} onChange={(event) => updateDraft('phones', splitLines(event.currentTarget.value))} />
+                    </label>
+                    <label>
+                      Tags
+                      <textarea value={draft.tags.join('\n')} onChange={(event) => updateDraft('tags', splitLines(event.currentTarget.value))} />
+                    </label>
+                    <label className="wide">
+                      Address
+                      <input value={draft.address} onChange={(event) => updateDraft('address', event.currentTarget.value)} />
+                    </label>
+                    <label className="wide">
+                      Next step
+                      <input value={draft.nextStep} onChange={(event) => updateDraft('nextStep', event.currentTarget.value)} />
+                    </label>
+                    <label className="wide">
+                      Notes
+                      <textarea value={draft.notes} onChange={(event) => updateDraft('notes', event.currentTarget.value)} />
+                    </label>
+                  </div>
+                </div>
+
+                <div className="actions">
+                  <button className="btn primary" type="button" onClick={() => void saveDraft()} disabled={busy}>
+                    Save contact
+                  </button>
+                  {contactNeedsReview(draft) && (
+                    <button className="btn" type="button" onClick={() => void markReviewed()} disabled={busy}>
+                      Mark reviewed
+                    </button>
+                  )}
+                  <button className="btn danger" type="button" onClick={() => void deleteSelected()} disabled={busy}>
+                    Delete
+                  </button>
+                </div>
+              </section>
+
+              <aside className="source-panel" aria-label="Card photo">
+                <div className="source-head">
+                  <h2>Card photo</h2>
+                  {draft.sourceImageUrl && (
+                    <a href={draft.sourceImageUrl} target="_blank" rel="noreferrer">
+                      Open full size
+                    </a>
+                  )}
+                </div>
+                <div className="source-body">
+                  {draft.sourceImageUrl ? (
+                    <img src={draft.sourceImageUrl} alt={`Business card for ${draft.name || 'contact'}`} />
+                  ) : (
+                    <div className="empty">This contact has no card photo.</div>
+                  )}
+                </div>
+              </aside>
             </>
           )}
-        </section>
-
-        <aside className="source-panel">
-          <div className="source-head">
-            <h2>Card Photo</h2>
-            {draft?.sourceImageUrl && (
-              <a href={draft.sourceImageUrl} target="_blank" rel="noreferrer">
-                Open
-              </a>
-            )}
-          </div>
-          <div className="source-body">
-            {draft?.sourceImageUrl ? (
-              <img src={draft.sourceImageUrl} alt={`Business card for ${draft.name || 'contact'}`} />
-            ) : (
-              <div className="empty">Source images appear here after upload.</div>
-            )}
-          </div>
-        </aside>
-      </main>
+        </main>
       )}
+      </div>
+      {confirmSignOut && <SignOutConfirm onConfirm={() => void signOut()} onCancel={cancelSignOut} />}
+      {sessionProblem && !confirmSignOut && <SessionPanel problem={sessionProblem} onSignInAgain={signInAgain} onSignOut={askSignOut} />}
     </div>
   )
 }
@@ -612,6 +765,34 @@ function phoneHref(value: string): string {
   return value.replace(/[^\d+]/g, '')
 }
 
+const PENDING_DRAFT_KEY = 'cardcap:pending-draft'
+
+// Edits are kept only in this browser tab's session storage, only while the sign-in page is visited, and cleared after restore.
+function writePendingDraft(contact: Contact) {
+  try {
+    sessionStorage.setItem(PENDING_DRAFT_KEY, JSON.stringify(contact))
+  } catch {
+    // Storage can be unavailable (private windows); edits simply are not kept.
+  }
+}
+
+function readPendingDraft(): Contact | null {
+  try {
+    const raw = sessionStorage.getItem(PENDING_DRAFT_KEY)
+    return raw ? (JSON.parse(raw) as Contact) : null
+  } catch {
+    return null
+  }
+}
+
+function clearPendingDraft() {
+  try {
+    sessionStorage.removeItem(PENDING_DRAFT_KEY)
+  } catch {
+    // ignore
+  }
+}
+
 function messageFrom(error: unknown): string {
   return error instanceof Error ? error.message : String(error)
 }
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
new file mode 100644
index 0000000..5a311d4
--- /dev/null
+++ b/src/components/Menu.tsx
@@ -0,0 +1,119 @@
+import { useEffect, useId, useRef, useState } from 'react'
+
+export type MenuItem = {
+  label: string
+  onSelect: () => void
+  /** small non-interactive line shown above the items (for example who is signed in) */
+  heading?: never
+}
+
+type Props = {
+  /** visible button text */
+  label: string
+  /** accessible name when it should say more than the visible text */
+  ariaLabel?: string
+  items: Array<MenuItem | { heading: string }>
+  disabled?: boolean
+}
+
+// A button that opens a short list of actions. Keyboard: Enter/Space/ArrowDown open, arrows/Home/End move,
+// Escape closes and returns focus to the button, Tab or a click elsewhere closes.
+export function Menu({ label, ariaLabel, items, disabled }: Props) {
+  const [open, setOpen] = useState(false)
+  const root = useRef<HTMLDivElement | null>(null)
+  const button = useRef<HTMLButtonElement | null>(null)
+  const panelId = useId()
+  const actions = items.filter((item): item is MenuItem => 'onSelect' in item)
+
+  useEffect(() => {
+    if (!open) return
+    root.current?.querySelector<HTMLElement>('[role="menuitem"]')?.focus()
+    function onPointerDown(event: MouseEvent | TouchEvent) {
+      if (root.current && !root.current.contains(event.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onPointerDown)
+    document.addEventListener('touchstart', onPointerDown)
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown)
+      document.removeEventListener('touchstart', onPointerDown)
+    }
+  }, [open])
+
+  function close(returnFocus: boolean) {
+    setOpen(false)
+    if (returnFocus) button.current?.focus()
+  }
+
+  function onPanelKeyDown(event: React.KeyboardEvent) {
+    const entries = Array.from(root.current?.querySelectorAll<HTMLElement>('[role="menuitem"]') || [])
+    const index = entries.indexOf(document.activeElement as HTMLElement)
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      close(true)
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      entries[(index + 1) % entries.length]?.focus()
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      entries[(index - 1 + entries.length) % entries.length]?.focus()
+    } else if (event.key === 'Home') {
+      event.preventDefault()
+      entries[0]?.focus()
+    } else if (event.key === 'End') {
+      event.preventDefault()
+      entries[entries.length - 1]?.focus()
+    } else if (event.key === 'Tab') {
+      setOpen(false)
+    }
+  }
+
+  return (
+    <div className="menu" ref={root}>
+      <button
+        ref={button}
+        className="btn menu-button"
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-controls={open ? panelId : undefined}
+        aria-label={ariaLabel}
+        disabled={disabled}
+        onClick={() => setOpen((value) => !value)}
+        onKeyDown={(event) => {
+          if (event.key === 'ArrowDown' && !open) {
+            event.preventDefault()
+            setOpen(true)
+          }
+        }}
+      >
+        {label}
+        <span className="menu-caret" aria-hidden="true" />
+      </button>
+      {open && actions.length > 0 && (
+        <div className="menu-panel" id={panelId} role="menu" aria-label={ariaLabel || label} onKeyDown={onPanelKeyDown}>
+          {items.map((item, index) =>
+            'onSelect' in item ? (
+              <button
+                key={`${item.label}-${index}`}
+                className="menu-item"
+                type="button"
+                role="menuitem"
+                tabIndex={-1}
+                onClick={() => {
+                  close(true)
+                  item.onSelect()
+                }}
+              >
+                {item.label}
+              </button>
+            ) : (
+              <div key={`${item.heading}-${index}`} className="menu-heading" role="presentation">
+                {item.heading}
+              </div>
+            ),
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/SessionPanel.tsx b/src/components/SessionPanel.tsx
new file mode 100644
index 0000000..769c2e6
--- /dev/null
+++ b/src/components/SessionPanel.tsx
@@ -0,0 +1,98 @@
+import { useEffect, useRef } from 'react'
+
+export type SessionProblem =
+  | { kind: 'ended'; hasUnsavedEdits: boolean }
+  | { kind: 'denied'; message: string; logoutUrl?: string }
+
+type Props = {
+  problem: SessionProblem
+  onSignInAgain: () => void
+  onSignOut: () => void
+}
+
+// Shown over the app when the sign-in session ends or the account is refused.
+// It is a modal alert dialog: focus moves in, Tab stays inside, and the page behind it is inert.
+export function SessionPanel({ problem, onSignInAgain, onSignOut }: Props) {
+  const primary = useRef<HTMLButtonElement | null>(null)
+  const panel = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    primary.current?.focus()
+    const app = document.querySelector<HTMLElement>('.app-shell > .app-content')
+    app?.setAttribute('inert', '')
+    return () => app?.removeAttribute('inert')
+  }, [])
+
+  function trapTab(event: React.KeyboardEvent) {
+    if (event.key !== 'Tab' || !panel.current) return
+    const focusable = Array.from(panel.current.querySelectorAll<HTMLElement>('button, a[href]'))
+    if (focusable.length === 0) return
+    const first = focusable[0]
+    const last = focusable[focusable.length - 1]
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault()
+      last.focus()
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault()
+      first.focus()
+    }
+  }
+
+  const ended = problem.kind === 'ended'
+
+  return (
+    <div className="modal-backdrop" role="presentation">
+      <div
+        ref={panel}
+        className="modal-panel session-panel"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="session-panel-title"
+        aria-describedby="session-panel-body"
+        onKeyDown={trapTab}
+      >
+        <div className="modal-head">
+          <div>
+            <h2 id="session-panel-title">{ended ? 'Your session ended' : 'This account cannot use CardCap'}</h2>
+          </div>
+        </div>
+        <div id="session-panel-body" className="session-body">
+          {ended ? (
+            <>
+              <p>For your security, CardCap signs you out after a while. Sign in again to keep working.</p>
+              <p>
+                {problem.hasUnsavedEdits
+                  ? 'Your contacts are saved. We kept the edits you had not saved yet and will put them back when you return.'
+                  : 'Your contacts are saved.'}
+              </p>
+            </>
+          ) : (
+            <>
+              <p>{problem.message}</p>
+              <p>
+                If you think this is a mistake, email <a href="mailto:cody@copperstateit.com">cody@copperstateit.com</a> from the address you
+                signed in with.
+              </p>
+            </>
+          )}
+        </div>
+        <div className="modal-actions">
+          {ended ? (
+            <>
+              <button ref={primary} className="btn primary" type="button" onClick={onSignInAgain}>
+                Sign in again
+              </button>
+              <button className="btn" type="button" onClick={onSignOut}>
+                Sign out
+              </button>
+            </>
+          ) : (
+            <button ref={primary} className="btn primary" type="button" onClick={onSignOut}>
+              Sign out and use another account
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/SignOutConfirm.tsx b/src/components/SignOutConfirm.tsx
new file mode 100644
index 0000000..570331b
--- /dev/null
+++ b/src/components/SignOutConfirm.tsx
@@ -0,0 +1,71 @@
+import { useEffect, useRef } from 'react'
+
+type Props = {
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+// Signing out through Cloudflare Access ends the person's sign-in for every CSI app that uses it, not just CardCap.
+// Cloudflare documents that (and a 20 to 30 second delay), so this asks first and names Blackboard.
+export function SignOutConfirm({ onConfirm, onCancel }: Props) {
+  const stay = useRef<HTMLButtonElement | null>(null)
+  const panel = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    stay.current?.focus()
+    const app = document.querySelector<HTMLElement>('.app-shell > .app-content')
+    app?.setAttribute('inert', '')
+    return () => app?.removeAttribute('inert')
+  }, [])
+
+  function onKeyDown(event: React.KeyboardEvent) {
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      onCancel()
+      return
+    }
+    if (event.key !== 'Tab' || !panel.current) return
+    const focusable = Array.from(panel.current.querySelectorAll<HTMLElement>('button'))
+    const first = focusable[0]
+    const last = focusable[focusable.length - 1]
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault()
+      last.focus()
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault()
+      first.focus()
+    }
+  }
+
+  return (
+    <div className="modal-backdrop" role="presentation">
+      <div
+        ref={panel}
+        className="modal-panel session-panel"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="signout-title"
+        aria-describedby="signout-body"
+        onKeyDown={onKeyDown}
+      >
+        <div className="modal-head">
+          <div>
+            <h2 id="signout-title">Sign out of CardCap and Blackboard?</h2>
+          </div>
+        </div>
+        <div id="signout-body" className="session-body">
+          <p>This also signs you out of Blackboard and any other CSI app you have open. They all use the same CSI sign-in.</p>
+          <p>It can take up to 30 seconds to finish everywhere.</p>
+        </div>
+        <div className="modal-actions">
+          <button ref={stay} className="btn primary" type="button" onClick={onCancel}>
+            Cancel
+          </button>
+          <button className="btn" type="button" onClick={onConfirm}>
+            Sign out
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/csi.css b/src/csi.css
new file mode 100644
index 0000000..ec833e3
--- /dev/null
+++ b/src/csi.css
@@ -0,0 +1,137 @@
+/* CSI — Copper State Intelligence · shared brand stylesheet v1.0
+   Direction: Ledger (2c) · Type: Atkinson Hyperlegible Next + Mono
+   Load fonts first:
+   <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;500;700;800&family=Atkinson+Hyperlegible+Mono:wght@400;500&display=swap" rel="stylesheet">
+*/
+:root {
+  /* Core */
+  --csi-paper: #FFFFFF;
+  --csi-surface: #F7F7F5;
+  --csi-ink: #15171A;
+  --csi-text: #2E3237;
+  --csi-muted: #60656B;
+  --csi-rule: #E3E3DE;
+  --csi-rule-strong: #CFCFC9;
+  /* Primary: turquoise (actions, links, status) */
+  --csi-turquoise: #0F7C7A;
+  --csi-turquoise-deep: #0B5F5D;
+  --csi-turquoise-tint: #E1F1F0;
+  --csi-on-turquoise: #FFFFFF;
+  /* Secondary: copper (rules, notes, highlights) */
+  --csi-copper: #8C4A2B;
+  --csi-copper-tint: #F6EEE9;
+  /* Secondary: desert rose (attention, errors, critical) */
+  --csi-rose: #B2426A;
+  --csi-rose-tint: #F8E9EE;
+
+  /* Type */
+  --csi-font: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
+  --csi-mono: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;
+  --csi-display: 700 48px/1.1 var(--csi-font);
+  --csi-h1: 700 34px/1.15 var(--csi-font);
+  --csi-h2: 700 24px/1.25 var(--csi-font);
+  --csi-h3: 700 19px/1.35 var(--csi-font);
+  --csi-body: 400 17px/1.6 var(--csi-font);
+  --csi-small: 400 14px/1.5 var(--csi-font);
+  --csi-label: 500 12px/1.4 var(--csi-mono);
+
+  /* Space (4px base) */
+  --csi-s1: 4px; --csi-s2: 8px; --csi-s3: 12px; --csi-s4: 16px;
+  --csi-s5: 24px; --csi-s6: 32px; --csi-s7: 48px; --csi-s8: 64px;
+
+  /* Shape: square corners, 1px rules, 4px brand bar */
+  --csi-radius: 0;
+  --csi-border: 1px solid var(--csi-rule);
+  --csi-bar: 4px;
+  --csi-measure: 68ch;
+  --csi-focus: 0 0 0 3px var(--csi-paper), 0 0 0 5px var(--csi-turquoise);
+}
+
+[data-theme="dark"], .csi-dark {
+  --csi-paper: #111315;
+  --csi-surface: #181B1E;
+  --csi-ink: #ECEDEE;
+  --csi-text: #C9CCD0;
+  --csi-muted: #979CA2;
+  --csi-rule: #2A2E33;
+  --csi-rule-strong: #3A3F45;
+  --csi-turquoise: #4CC3BC;
+  --csi-turquoise-deep: #7AD6D0;
+  --csi-turquoise-tint: #132726;
+  --csi-on-turquoise: #111315;
+  --csi-copper: #C98663;
+  --csi-copper-tint: #221A16;
+  --csi-rose: #E0668C;
+  --csi-rose-tint: #2A1820;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .csi-auto { color-scheme: dark; }
+}
+
+/* Base */
+.csi, .csi-page {
+  background: var(--csi-paper);
+  color: var(--csi-text);
+  font: var(--csi-body);
+  -webkit-font-smoothing: antialiased;
+}
+.csi *, .csi-page * { border-radius: 0; box-sizing: border-box; }
+.csi h1, .csi h2, .csi h3, .csi-page h1, .csi-page h2, .csi-page h3 { color: var(--csi-ink); margin: 0; text-wrap: balance; }
+.csi p, .csi-page p { margin: 0; max-width: var(--csi-measure); text-wrap: pretty; }
+.csi a, .csi-page a { color: var(--csi-turquoise); text-decoration: underline; text-underline-offset: 3px; }
+.csi a:hover, .csi-page a:hover { color: var(--csi-ink); }
+.csi :focus-visible, .csi-page :focus-visible { outline: none; box-shadow: var(--csi-focus); }
+.csi code, .csi-page code { font-family: var(--csi-mono); font-size: .9em; background: var(--csi-surface); padding: 1px 5px; }
+
+/* Type roles */
+.csi-display { font: var(--csi-display); letter-spacing: -.015em; color: var(--csi-ink); }
+.csi-h1 { font: var(--csi-h1); letter-spacing: -.01em; color: var(--csi-ink); }
+.csi-h2 { font: var(--csi-h2); color: var(--csi-ink); }
+.csi-h3 { font: var(--csi-h3); color: var(--csi-ink); }
+.csi-small { font: var(--csi-small); }
+.csi-muted { color: var(--csi-muted); }
+.csi-label { font: var(--csi-label); letter-spacing: .08em; text-transform: uppercase; color: var(--csi-muted); }
+.csi-label--accent { color: var(--csi-turquoise); }
+
+/* Brand bar (turquoise + copper) */
+.csi-bar { display: flex; height: 2px; width: 56px; }
+.csi-bar::before { content: ""; flex: 1; background: var(--csi-turquoise); }
+.csi-bar::after { content: ""; flex: 1; background: var(--csi-copper); }
+.csi-topbar { height: var(--csi-bar); background: var(--csi-turquoise); }
+
+/* Buttons */
+.csi-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; font: 700 15px/1 var(--csi-font); border: 1px solid transparent; cursor: pointer; text-decoration: none; }
+.csi-btn--primary { background: var(--csi-turquoise); color: var(--csi-on-turquoise); }
+.csi-btn--primary:hover { background: var(--csi-turquoise-deep); }
+.csi-btn--secondary { background: var(--csi-paper); color: var(--csi-ink); border-color: var(--csi-rule-strong); }
+.csi-btn--secondary:hover { border-color: var(--csi-ink); }
+.csi-btn--danger { background: var(--csi-rose); color: #FFFFFF; }
+
+/* Inputs */
+.csi-input { min-height: 44px; padding: 0 12px; font: var(--csi-body); color: var(--csi-ink); background: var(--csi-paper); border: 1px solid var(--csi-rule-strong); }
+.csi-input::placeholder { color: var(--csi-muted); }
+.csi-input:focus { border-color: var(--csi-turquoise); outline: none; box-shadow: var(--csi-focus); }
+
+/* Badges */
+.csi-badge { display: inline-block; font: 500 12px/1.5 var(--csi-font); padding: 2px 8px; }
+.csi-badge--ok { color: var(--csi-turquoise-deep); background: var(--csi-turquoise-tint); }
+.csi-badge--note { color: var(--csi-copper); background: var(--csi-copper-tint); }
+.csi-badge--alert { color: var(--csi-rose); background: var(--csi-rose-tint); }
+.csi-badge--neutral { color: var(--csi-muted); background: var(--csi-surface); }
+
+/* Callouts */
+.csi-callout { padding: 12px 16px; font: var(--csi-small); color: var(--csi-text); background: var(--csi-copper-tint); }
+.csi-callout strong { color: var(--csi-copper); }
+.csi-callout--alert { background: var(--csi-rose-tint); }
+.csi-callout--alert strong { color: var(--csi-rose); }
+
+/* Cards & tables */
+.csi-card { background: var(--csi-paper); border: var(--csi-border); padding: var(--csi-s5); }
+.csi-table { width: 100%; border-collapse: collapse; font: var(--csi-small); }
+.csi-table th { font: var(--csi-label); letter-spacing: .08em; text-transform: uppercase; color: var(--csi-muted); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--csi-rule-strong); }
+.csi-table td { padding: 12px; border-bottom: var(--csi-border); color: var(--csi-text); }
+
+/* Monogram */
+.csi-mono-tile { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--csi-ink); color: var(--csi-paper); font: 800 19px/1 var(--csi-font); letter-spacing: -.02em; }
+.csi-mono-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #0F7C7A; }
diff --git a/src/fonts.css b/src/fonts.css
new file mode 100644
index 0000000..dd08072
--- /dev/null
+++ b/src/fonts.css
@@ -0,0 +1,38 @@
+/* Atkinson Hyperlegible Next and Mono, served from this app (SIL Open Font License 1.1, see /fonts/OFL.txt).
+   The files are the variable-weight WOFF2 subsets Google Fonts serves; no request leaves this site for fonts. */
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible Mono';
+  font-style: normal;
+  font-weight: 400 500;
+  font-display: swap;
+  src: url('/fonts/atkinson-mono-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible Mono';
+  font-style: normal;
+  font-weight: 400 500;
+  font-display: swap;
+  src: url('/fonts/atkinson-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;
+}
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible Next';
+  font-style: normal;
+  font-weight: 400 800;
+  font-display: swap;
+  src: url('/fonts/atkinson-next-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible Next';
+  font-style: normal;
+  font-weight: 400 800;
+  font-display: swap;
+  src: url('/fonts/atkinson-next-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;
+}
diff --git a/src/index.css b/src/index.css
index 8eaeac5..76dfd17 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,7 +10,14 @@ body,
 
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-size: 14px;
-  background: #f5f6f8;
+  background: var(--csi-surface);
+  color: var(--csi-text);
+  font: var(--csi-small);
+  -webkit-font-smoothing: antialiased;
+  text-size-adjust: 100%;
+}
+
+a {
+  color: var(--csi-turquoise);
+  text-underline-offset: 3px;
 }
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 454152b..fbc1d82 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,10 +1,34 @@
+// API client. Errors carry what the screen needs to tell people the truth:
+//  - 'session-ended': the server said 401, or an edge login redirect came back instead of JSON
+//  - 'denied': the server said 403
+//  - 'network': the request never got an answer
+//  - 'http': any other failure
+export type ApiErrorKind = 'session-ended' | 'denied' | 'network' | 'http'
+
+export class ApiError extends Error {
+  readonly status: number
+  readonly kind: ApiErrorKind
+  readonly path: string
+  readonly loginUrl?: string
+  readonly logoutUrl?: string
+
+  constructor(message: string, init: { status: number; kind: ApiErrorKind; path: string; loginUrl?: string; logoutUrl?: string }) {
+    super(message)
+    this.name = 'ApiError'
+    this.status = init.status
+    this.kind = init.kind
+    this.path = init.path
+    this.loginUrl = init.loginUrl
+    this.logoutUrl = init.logoutUrl
+  }
+}
+
 export async function apiGet<T>(path: string): Promise<T> {
-  const response = await fetch(path, { headers: { accept: 'application/json' } })
-  return parseResponse<T>(response)
+  return parseResponse<T>(path, await send(path, { headers: { accept: 'application/json' } }))
 }
 
 export async function apiJson<T>(path: string, method: 'POST' | 'PUT' | 'DELETE', body?: unknown): Promise<T> {
-  const response = await fetch(path, {
+  const response = await send(path, {
     method,
     headers: {
       accept: 'application/json',
@@ -12,25 +36,56 @@ export async function apiJson<T>(path: string, method: 'POST' | 'PUT' | 'DELETE'
     },
     body: body === undefined ? undefined : JSON.stringify(body),
   })
-  return parseResponse<T>(response)
+  return parseResponse<T>(path, response)
 }
 
 export async function apiUpload<T>(path: string, file: File): Promise<T> {
   const form = new FormData()
   form.append('file', file)
-  const response = await fetch(path, {
-    method: 'POST',
-    body: form,
-  })
-  return parseResponse<T>(response)
+  return parseResponse<T>(path, await send(path, { method: 'POST', body: form }))
 }
 
-async function parseResponse<T>(response: Response): Promise<T> {
+// Never follow redirects: an expired edge session answers with a redirect to the login provider, which the browser
+// would block with an unreadable network error. With redirect: 'manual' it arrives as an "opaque redirect" we can name.
+async function send(path: string, init: RequestInit): Promise<Response> {
+  try {
+    return await fetch(path, { ...init, redirect: 'manual' })
+  } catch {
+    throw new ApiError("Can't reach CardCap. Check your connection and try again.", { status: 0, kind: 'network', path })
+  }
+}
+
+async function parseResponse<T>(path: string, response: Response): Promise<T> {
+  if (response.type === 'opaqueredirect') {
+    throw new ApiError('Your session ended. Sign in again to keep working.', { status: 0, kind: 'session-ended', path })
+  }
   const text = await response.text()
-  const data = text ? JSON.parse(text) : {}
+  let data: Record<string, unknown> = {}
+  if (text) {
+    try {
+      data = JSON.parse(text)
+    } catch {
+      // A sign-in page or proxy error page came back instead of JSON.
+      if (response.ok) {
+        throw new ApiError('Your session ended. Sign in again to keep working.', { status: response.status, kind: 'session-ended', path })
+      }
+    }
+  }
   if (!response.ok) {
     const message = typeof data.error === 'string' ? data.error : `HTTP ${response.status}`
-    throw new Error(message)
+    const kind: ApiErrorKind = response.status === 401 ? 'session-ended' : response.status === 403 ? 'denied' : 'http'
+    throw new ApiError(message, {
+      status: response.status,
+      kind,
+      path,
+      loginUrl: relativeEdgeUrl(data.loginUrl),
+      logoutUrl: relativeEdgeUrl(data.logoutUrl),
+    })
   }
   return data as T
 }
+
+// Only same-site Access paths are ever followed; anything else (for example an absolute URL) is ignored.
+export function relativeEdgeUrl(value: unknown): string | undefined {
+  return typeof value === 'string' && /^\/cdn-cgi\/access\/[A-Za-z0-9/_-]*$/.test(value) ? value : undefined
+}
diff --git a/src/main.tsx b/src/main.tsx
index bef5202..06aa49b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,5 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import './fonts.css'
+import './csi.css'
 import './index.css'
 import App from './App.tsx'
 
diff --git a/src/worker/access.ts b/src/worker/access.ts
new file mode 100644
index 0000000..79e7eff
--- /dev/null
+++ b/src/worker/access.ts
@@ -0,0 +1,76 @@
+import { createRemoteJWKSet, jwtVerify } from 'jose'
+import { envValue } from './config'
+import type { CurrentUser } from './auth'
+
+export class AccessConfigurationError extends Error {}
+export class AccessAccountConflictError extends Error {}
+
+export function authenticationMode(env: Env): 'legacy' | 'access' {
+  const mode = envValue(env, 'AUTH_MODE') || 'legacy'
+  if (mode !== 'legacy' && mode !== 'access') throw new AccessConfigurationError('Invalid authentication mode')
+  return mode
+}
+
+const keySets = new Map<string, ReturnType<typeof createRemoteJWKSet>>()
+
+export async function accessIdentity(request: Request, env: Env): Promise<{ issuer: string; subject: string; email: string } | null> {
+  const issuer = envValue(env, 'ACCESS_ISSUER')
+  const audience = envValue(env, 'ACCESS_AUDIENCE')
+  const hosts = envValue(env, 'ACCESS_ALLOWED_HOSTS').split(',').map(host => host.trim().toLowerCase()).filter(Boolean)
+  if (!/^https:\/\/[a-z0-9-]+\.cloudflareaccess\.com$/.test(issuer) || !audience || !hosts.length ||
+      hosts.some(host => !/^[a-z0-9.-]+(?::[0-9]+)?$/.test(host))) {
+    throw new AccessConfigurationError('Access is not configured')
+  }
+  const url = new URL(request.url)
+  if (!hosts.includes(url.host.toLowerCase())) return null
+  const hostHeader = request.headers.get('host')
+  if (hostHeader && hostHeader.toLowerCase() !== url.host.toLowerCase()) return null
+  const token = request.headers.get('Cf-Access-Jwt-Assertion')
+  if (!token || token.length > 16384) return null
+  let keySet = keySets.get(issuer)
+  if (!keySet) {
+    keySet = createRemoteJWKSet(new URL(`${issuer}/cdn-cgi/access/certs`), { timeoutDuration: 5000 })
+    keySets.set(issuer, keySet)
+  }
+  try {
+    const { payload } = await jwtVerify(token, keySet, {
+      issuer, audience, algorithms: ['RS256'], requiredClaims: ['iss', 'aud', 'exp', 'iat', 'sub'],
+    })
+    const now = Math.floor(Date.now() / 1000)
+    if (payload.type !== 'app' || typeof payload.iat !== 'number' || payload.iat > now ||
+        typeof payload.sub !== 'string' || !payload.sub.trim() || payload.sub.length > 512 ||
+        typeof payload.email !== 'string' || payload.email.length > 254) return null
+    const email = payload.email.trim().toLowerCase()
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return null
+    return { issuer, subject: payload.sub, email }
+  } catch {
+    return null
+  }
+}
+
+export async function resolveAccessUser(db: D1Database, identity: { issuer: string; subject: string; email: string }): Promise<CurrentUser> {
+  const { issuer, subject, email } = identity
+  const readMapping = () => db.prepare(`SELECT users.id, users.email FROM access_identities
+    JOIN users ON users.id = access_identities.user_id WHERE issuer = ? AND subject = ?`).bind(issuer, subject).first<CurrentUser>()
+  const existing = await readMapping()
+  const candidates = await db.prepare('SELECT id FROM users WHERE lower(trim(email)) = ? LIMIT 2').bind(email).all<{ id: string }>()
+  if (candidates.results.length > 1 || (existing && existing.email.trim().toLowerCase() !== email)) {
+    throw new AccessAccountConflictError('Account mapping requires review')
+  }
+  if (existing) return existing
+  const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(`${issuer}\0${subject}`))
+  const id = `access:${Array.from(new Uint8Array(digest), byte => byte.toString(16).padStart(2, '0')).join('')}`
+  const now = new Date().toISOString()
+  // D1 batches are transactional; a concurrent first login cannot replace an owner ID.
+  await db.batch([
+    db.prepare(`INSERT OR IGNORE INTO users (id, email, name, auth_provider, created_at, updated_at)
+      SELECT ?, ?, ?, 'access', ?, ? WHERE NOT EXISTS (SELECT 1 FROM users WHERE lower(trim(email)) = ?)`)
+      .bind(id, email, email.split('@')[0], now, now, email),
+    db.prepare(`INSERT OR IGNORE INTO access_identities (issuer, subject, user_id, created_at)
+      SELECT ?, ?, id, ? FROM users WHERE lower(trim(email)) = ?
+      AND (SELECT count(*) FROM users WHERE lower(trim(email)) = ?) = 1`).bind(issuer, subject, now, email, email),
+  ])
+  const mapped = await readMapping()
+  if (!mapped || mapped.email.trim().toLowerCase() !== email) throw new AccessAccountConflictError('Account mapping requires review')
+  return mapped
+}
diff --git a/src/worker/auth.ts b/src/worker/auth.ts
index 9e6d4c3..e49a902 100644
--- a/src/worker/auth.ts
+++ b/src/worker/auth.ts
@@ -1,7 +1,7 @@
 import { envValue } from './config'
 import { sendLoginEmail } from './email'
 import { hashPassword, validatePassword, verifyPassword } from './password'
-import { consumeLoginToken, createLoginToken, getUserByEmail, setUserPasswordHash, upsertUser } from './repository'
+import { consumeLoginToken, createLoginToken, getUserByEmail, magicLinkUser, setUserPasswordHash } from './repository'
 import {
   createSessionCookieValue,
   sessionClearCookieHeader,
@@ -131,9 +131,9 @@ export async function verifyLogin(env: Env, url: URL): Promise<Response> {
   const email = await consumeLoginToken(env.DB, await sha256Hex(rawToken))
   if (!email) return expiredLinkPage()
 
-  const userId = `email:${email}`
-  await upsertUser(env.DB, userId, email, 'magic-link')
-  const cookie = await createSessionCookieValue(userId, secret)
+  const user = await magicLinkUser(env.DB, email)
+  if (!user) return expiredLinkPage()
+  const cookie = await createSessionCookieValue(user.id, secret)
   return new Response(null, {
     status: 302,
     headers: {
diff --git a/src/worker/index.ts b/src/worker/index.ts
index 2741af1..9bc051d 100644
--- a/src/worker/index.ts
+++ b/src/worker/index.ts
@@ -22,6 +22,7 @@ import {
   verifyLogin,
 } from './auth'
 import { extractCard } from './extract'
+import { accessIdentity, authenticationMode, resolveAccessUser, AccessAccountConflictError, AccessConfigurationError } from './access'
 import {
   ContactConflictError,
   countExtractionJobsSince,
@@ -47,6 +48,8 @@ export default {
       ctx.waitUntil(Promise.resolve())
       return response
     } catch (error) {
+      if (error instanceof AccessConfigurationError) return json({ error: 'Sign-in is temporarily unavailable.' }, 503)
+      if (error instanceof AccessAccountConflictError) return json({ error: 'Account access requires review.' }, 403)
       if (error instanceof ContactConflictError) return json({ error: 'Contact id is not available' }, 409)
       console.error(JSON.stringify({ level: 'error', errorType: error instanceof Error ? error.name : 'UnknownError', path: url.pathname }))
       return json({ error: 'Unable to complete this request. Please try again.' }, 500)
@@ -55,6 +58,25 @@ export default {
 } satisfies ExportedHandler<Env>
 
 async function route(request: Request, env: Env, url: URL): Promise<Response> {
+  const mode = authenticationMode(env)
+  let accessUser = null
+  if (mode === 'access') {
+    const identity = await accessIdentity(request, env)
+    if (!identity) return json({ error: 'Sign in to continue.', loginUrl: '/cdn-cgi/access/login' }, 401)
+    if (request.method === 'POST' && url.pathname === '/api/auth/logout') {
+      const response = logout()
+      return new Response(JSON.stringify({ logoutUrl: '/cdn-cgi/access/logout' }), {
+        headers: response.headers,
+      })
+    }
+    accessUser = await resolveAccessUser(env.DB, identity)
+    if (['/api/auth/request-link', '/api/auth/password-login', '/api/auth/verify', '/api/auth/set-password'].includes(url.pathname)) {
+      return json({ error: 'Use Access to sign in.' }, 410)
+    }
+    if (request.method === 'GET' && url.pathname === '/api/auth/config') {
+      return json({ mode: 'access', loginUrl: '/cdn-cgi/access/login', logoutUrl: '/cdn-cgi/access/logout' })
+    }
+  }
   if (request.method === 'GET' && url.pathname === '/api/health') {
     return json({ ok: true, extractor: env.AI_EXTRACTOR })
   }
@@ -79,7 +101,7 @@ async function route(request: Request, env: Env, url: URL): Promise<Response> {
     return logout()
   }
 
-  const user = await currentUser(request, env)
+  const user = accessUser ?? await currentUser(request, env)
   if (!user) {
     return json({ error: 'Sign in to continue.' }, 401)
   }
diff --git a/src/worker/repository.ts b/src/worker/repository.ts
index a2c2f91..ac1a6b6 100644
--- a/src/worker/repository.ts
+++ b/src/worker/repository.ts
@@ -366,6 +366,19 @@ export async function upsertUser(db: D1Database, userId: string, email: string,
   await ensureUser(db, userId, email, email, authProvider, now)
 }
 
+export async function magicLinkUser(db: D1Database, email: string): Promise<{ id: string; email: string } | null> {
+  await ensureSchema(db)
+  const normalized = email.trim().toLowerCase()
+  const now = new Date().toISOString()
+  // Preserve Access and older opaque owner IDs; never create a duplicate by email.
+  await db.prepare(`INSERT OR IGNORE INTO users (id,email,name,auth_provider,created_at,updated_at)
+    SELECT ?, ?, ?, 'magic-link', ?, ? WHERE NOT EXISTS (SELECT 1 FROM users WHERE lower(trim(email)) = ?)`)
+    .bind(`email:${normalized}`, normalized, normalized, now, now, normalized).run()
+  const rows = await db.prepare('SELECT id,email FROM users WHERE lower(trim(email)) = ? LIMIT 2')
+    .bind(normalized).all<{ id: string; email: string }>()
+  return rows.results.length === 1 ? rows.results[0] : null
+}
+
 function emailFromUserId(userId: string): string {
   return userId.startsWith('email:') ? userId.slice('email:'.length) : ''
 }
diff --git a/tests/access-account.test.ts b/tests/access-account.test.ts
new file mode 100644
index 0000000..b713428
--- /dev/null
+++ b/tests/access-account.test.ts
@@ -0,0 +1,101 @@
+import { DatabaseSync } from 'node:sqlite'
+import { readFileSync } from 'node:fs'
+import { describe, expect, it } from 'vitest'
+import { authenticationMode, resolveAccessUser } from '../src/worker/access'
+import { magicLinkUser } from '../src/worker/repository'
+
+function database() {
+  const sqlite = new DatabaseSync(':memory:')
+  sqlite.exec('PRAGMA foreign_keys = ON')
+  for (const name of ['0001_initial.sql', '0002_login_tokens.sql', '0003_password_auth.sql', '0004_access_identities.sql']) {
+    sqlite.exec(readFileSync(new URL(`../migrations/${name}`, import.meta.url), 'utf8'))
+  }
+  const db = {
+    prepare(sql: string) {
+      let args: unknown[] = []
+      const statement = {
+        bind(...values: unknown[]) { args = values; return statement },
+        async run() { return sqlite.prepare(sql).run(...args as []) },
+        async all() { return { results: sqlite.prepare(sql).all(...args as []) } },
+        async first() { return sqlite.prepare(sql).get(...args as []) ?? null },
+      }
+      return statement
+    },
+    async batch(statements: Array<{ run(): Promise<unknown> }>) {
+      sqlite.exec('BEGIN')
+      try {
+        const results = []
+        for (const statement of statements) results.push(await statement.run())
+        sqlite.exec('COMMIT')
+        return results
+      } catch (error) { sqlite.exec('ROLLBACK'); throw error }
+    },
+  } as unknown as D1Database
+  function user(id: string, email: string) {
+    sqlite.prepare("INSERT INTO users VALUES (?, ?, 'Owner', 'local', 'before', 'before')").run(id, email)
+  }
+  return { db, sqlite, user }
+}
+
+const identity = { issuer: 'https://test.cloudflareaccess.com', subject: 'google-subject', email: 'owner@example.invalid' }
+
+describe('Access account compatibility using real migrations', () => {
+  it('legacy login rejects duplicate normalized email owners without issuing an identity', async () => {
+    const { db, sqlite, user } = database()
+    user('one', 'owner@example.invalid'); user('two', ' Owner@Example.invalid ')
+    expect(await magicLinkUser(db, identity.email)).toBeNull()
+    expect(sqlite.prepare('SELECT count(*) AS count FROM users WHERE lower(trim(email)) = ?').get(identity.email)).toEqual({ count: 2 })
+  })
+
+  it('legacy login preserves an opaque owner ID and does not rewrite the account', async () => {
+    const { db, sqlite, user } = database()
+    user('opaque-owner', ' Owner@Example.invalid ')
+    expect(await magicLinkUser(db, identity.email)).toEqual({ id: 'opaque-owner', email: ' Owner@Example.invalid ' })
+    expect(sqlite.prepare("SELECT auth_provider,updated_at FROM users WHERE id = 'opaque-owner'").get()).toEqual({ auth_provider: 'local', updated_at: 'before' })
+  })
+  it('preserves noncanonical ownership and credentials across Google and PIN identities', async () => {
+    const { db, sqlite, user } = database()
+    user('old-opaque-id', 'Owner@Example.invalid')
+    sqlite.prepare("INSERT INTO user_passwords VALUES ('old-opaque-id', 'preserved-hash', 'before')").run()
+    sqlite.prepare("INSERT INTO contacts (id,user_id,name,source_image_key,created_at,updated_at) VALUES ('private-contact','old-opaque-id','Private name','private/image.png','before','before')").run()
+    expect(await resolveAccessUser(db, identity)).toEqual({ id: 'old-opaque-id', email: 'Owner@Example.invalid' })
+    expect((await resolveAccessUser(db, { ...identity, subject: 'pin-subject' })).id).toBe('old-opaque-id')
+    expect(sqlite.prepare('SELECT user_id,name,source_image_key FROM contacts').get()).toEqual({ user_id: 'old-opaque-id', name: 'Private name', source_image_key: 'private/image.png' })
+    expect(sqlite.prepare('SELECT password_hash FROM user_passwords').get()).toEqual({ password_hash: 'preserved-hash' })
+    expect(sqlite.prepare('SELECT count(*) AS count FROM users').get()).toEqual({ count: 1 })
+  })
+
+  it('creates one stable account on repeated first login without a password row', async () => {
+    const { db, sqlite } = database()
+    const first = await resolveAccessUser(db, identity)
+    expect(first.email).toBe('owner@example.invalid')
+    expect(first.id).toMatch(/^access:[a-f0-9]{64}$/)
+    expect(await resolveAccessUser(db, identity)).toEqual(first)
+    expect(sqlite.prepare('SELECT count(*) AS count FROM users').get()).toEqual({ count: 1 })
+    expect(sqlite.prepare('SELECT count(*) AS count FROM user_passwords').get()).toEqual({ count: 0 })
+  })
+
+  it('rejects ambiguous normalized emails without claiming either account', async () => {
+    const { db, sqlite, user } = database()
+    user('one', 'owner@example.invalid'); user('two', ' Owner@Example.invalid ')
+    await expect(resolveAccessUser(db, identity)).rejects.toThrow('Account mapping requires review')
+    expect(sqlite.prepare('SELECT count(*) AS count FROM access_identities').get()).toEqual({ count: 0 })
+  })
+
+  it('rejects a subject whose email changes instead of silently remapping data', async () => {
+    const { db, user } = database()
+    user('original', identity.email); user('other', 'other@example.invalid')
+    await resolveAccessUser(db, identity)
+    await expect(resolveAccessUser(db, { ...identity, email: 'other@example.invalid' })).rejects.toThrow('Account mapping requires review')
+  })
+
+  it('does not quietly create a missing migration or fall back to legacy auth', async () => {
+    const { db, sqlite } = database()
+    sqlite.exec('DROP TABLE access_identities')
+    await expect(resolveAccessUser(db, identity)).rejects.toThrow('no such table')
+    expect(authenticationMode({} as Env)).toBe('legacy')
+    expect(() => authenticationMode({ AUTH_MODE: 'typo' } as unknown as Env)).toThrow('Invalid authentication mode')
+  })
+})
+
+
diff --git a/tests/access-token.test.ts b/tests/access-token.test.ts
new file mode 100644
index 0000000..91410f4
--- /dev/null
+++ b/tests/access-token.test.ts
@@ -0,0 +1,57 @@
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
+import { exportJWK, generateKeyPair, SignJWT } from 'jose'
+import { accessIdentity } from '../src/worker/access'
+
+const issuer = 'https://crypto-test.cloudflareaccess.com'
+const audience = 'test-app-audience'
+const env = { ACCESS_ISSUER: issuer, ACCESS_AUDIENCE: audience, ACCESS_ALLOWED_HOSTS: 'cardcap.test' } as unknown as Env
+let keys: Awaited<ReturnType<typeof generateKeyPair>>
+let foreignKeys: Awaited<ReturnType<typeof generateKeyPair>>
+
+beforeAll(async () => {
+  keys = await generateKeyPair('RS256', { extractable: true })
+  foreignKeys = await generateKeyPair('RS256')
+  const jwk = { ...await exportJWK(keys.publicKey), kid: 'test-key', alg: 'RS256', use: 'sig' }
+  vi.stubGlobal('fetch', async (input: string | URL | Request) => {
+    const url = input instanceof Request ? input.url : String(input)
+    if (url !== `${issuer}/cdn-cgi/access/certs`) throw new Error('Unexpected key source')
+    return Response.json({ keys: [jwk] })
+  })
+})
+afterAll(() => vi.unstubAllGlobals())
+
+async function token(changes: Record<string, unknown> = {}, foreign = false) {
+  const now = Math.floor(Date.now() / 1000)
+  return new SignJWT({ iss: issuer, aud: audience, sub: 'human-123', email: 'Owner@Example.invalid', type: 'app', iat: now, exp: now + 3600, ...changes })
+    .setProtectedHeader({ alg: 'RS256', kid: 'test-key' }).sign(foreign ? foreignKeys.privateKey : keys.privateKey)
+}
+function request(jwt?: string, url = 'https://cardcap.test/api/me', headers: Record<string, string> = {}) {
+  return new Request(url, { headers: { ...(jwt ? { 'Cf-Access-Jwt-Assertion': jwt } : {}), ...headers } })
+}
+
+describe('signed Access identity verification', () => {
+  it('accepts a real RSA signature and normalizes the signed email', async () => {
+    expect(await accessIdentity(request(await token()), env)).toEqual({ issuer, subject: 'human-123', email: 'owner@example.invalid' })
+  })
+  it.each([
+    { iss: 'https://attacker.cloudflareaccess.com' }, { aud: 'other-app' },
+    { exp: 1 }, { iat: 9999999999 }, { nbf: 9999999999 },
+    { sub: '' }, { email: null }, { email: 'not-an-email' }, { type: 'org' },
+    { exp: undefined }, { iat: undefined },
+  ])('rejects invalid signed claims %j', async changes => {
+    expect(await accessIdentity(request(await token(changes)), env)).toBeNull()
+  })
+  it('rejects a signature from an unrelated key', async () => {
+    expect(await accessIdentity(request(await token({}, true)), env)).toBeNull()
+  })
+  it('rejects an unsigned token and header-only identity', async () => {
+    const encoded = btoa(JSON.stringify({ email: 'owner@example.invalid', sub: 'human-123' }))
+    expect(await accessIdentity(request(`eyJhbGciOiJub25lIn0.${encoded}.`), env)).toBeNull()
+    expect(await accessIdentity(request(undefined, undefined, { 'Cf-Access-Authenticated-User-Email': 'owner@example.invalid', Cookie: 'cardcap_session=forged; CF_Authorization=forged' }), env)).toBeNull()
+  })
+  it('rejects alternate hosts even with a valid signed token and forwarded host', async () => {
+    const jwt = await token()
+    expect(await accessIdentity(request(jwt, 'https://alternate.workers.dev/api/me', { 'X-Forwarded-Host': 'cardcap.test' }), env)).toBeNull()
+    expect(await accessIdentity(request(jwt, undefined, { Host: 'alternate.workers.dev' }), env)).toBeNull()
+  })
+})