<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MultiMail: Email for AI Agents</title>
  <meta name="description" content="Email infrastructure for AI agents with verifiable identity. Every address publishes its operator, oversight mode, and reputation.">
  <link rel="canonical" href="https://multimail.dev/">

  <!-- Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://multimail.dev/">
  <meta property="og:title" content="MultiMail: Email for AI Agents">
  <meta property="og:description" content="Email infrastructure for AI agents with verifiable identity. Every address publishes its operator, oversight mode, and reputation.">
  <meta property="og:image" content="https://multimail.dev/og-image.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="MultiMail: Email for AI Agents">
  <meta name="twitter:description" content="Email infrastructure for AI agents with verifiable identity. Every address publishes its operator, oversight mode, and reputation.">
  <meta name="twitter:image" content="https://multimail.dev/og-image.png">

  <!-- JSON-LD Structured Data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "MultiMail",
    "url": "https://multimail.dev",
    "description": "Email infrastructure for AI agents with graduated oversight modes, verifiable identity, and 40-tool MCP server.",
    "applicationCategory": "DeveloperApplication",
    "operatingSystem": "Web",
    "offers": {
      "@type": "AggregateOffer",
      "lowPrice": "0",
      "highPrice": "99",
      "priceCurrency": "USD"
    }
  }
  </script>

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <link href="/fonts/fonts.css" rel="stylesheet">
  <style>
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --bg: #faf6f1;
      --bg-warm: #f3ece3;
      --bg-code: #2c2825;
      --border: #d6cdc0;
      --border-light: #e5ddd2;
      --text: #2c2421;
      --text-secondary: #6b5d52;
      --text-muted: #9a8b7d;
      --terracotta: #b8593b;
      --terracotta-dark: #943e24;
      --terracotta-light: #d4795c;
      --terracotta-bg: #f7ebe5;
      --olive: #5a6b3c;
      --olive-bg: #eef1e8;
      --charcoal: #3a3330;
      --font-display: 'Cormorant Garamond', 'Georgia', serif;
      --font-body: 'Instrument Sans', system-ui, sans-serif;
      --font-mono: 'IBM Plex Mono', 'Menlo', monospace;
    }

    html {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      font-size: 16px;
    }

    body { overflow-x: hidden; }

    /* --- Header --- */
    .header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      padding: 0 2.5rem 0 1.5rem;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      text-decoration: none;
      color: var(--text);
    }

    .verified-indicator {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.22rem 0.6rem;
      font-family: var(--font-mono);
      font-size: 0.62rem;
      color: var(--text-secondary);
      text-decoration: none;
      letter-spacing: 0.01em;
      transition: color 0.2s;
      border-left: 1px solid var(--border);
      margin-left: 0.4rem;
      padding-left: 1rem;
    }

    .verified-indicator:hover { color: var(--text); }

    .verified-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4a7c59;
      animation: pulse-dot 4s ease-in-out infinite;
    }

    @keyframes pulse-dot {
      0%, 100% { opacity: 0.6; box-shadow: 0 0 0 0 rgba(74, 124, 89, 0); }
      50% { opacity: 1; box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.15); }
    }

    .logo-mark {
      font-family: 'Press Start 2P', monospace;
      font-weight: 400;
      font-size: 1.34rem;
      color: var(--terracotta);
      letter-spacing: -0.02em;
      line-height: 1;
      align-self: flex-end;
      margin-bottom: -0.08rem;
    }

    .logo-text {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.95rem;
      letter-spacing: -0.02em;
    }

    .header-nav {
      display: flex;
      align-items: center;
      gap: 2.2rem;
    }

    .header-nav a {
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 0.85rem;
      font-weight: 500;
      transition: color 0.2s;
    }

    .header-nav a:hover { color: var(--text); }

    .btn-header {
      padding: 0.42rem 1rem;
      font-size: 0.82rem;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.15s;
      font-family: var(--font-body);
      border: 1.5px solid var(--terracotta);
      color: var(--terracotta);
      background: transparent;
    }

    .btn-header:hover {
      background: var(--terracotta);
      color: #fff;
    }

    /* --- Hero --- */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 7rem 2rem 5rem;
      max-width: 900px;
      margin: 0 auto;
    }

    .hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2.8rem, 6.5vw, 4.8rem);
      font-weight: 400;
      line-height: 1.1;
      letter-spacing: -0.025em;
      margin-bottom: 2rem;
      color: var(--text);
      max-width: 780px;
    }

    .hero h1 em {
      font-style: italic;
      font-weight: 500;
    }

    .hero-sub {
      font-size: 1.15rem;
      color: var(--text-secondary);
      max-width: 580px;
      line-height: 1.7;
      font-weight: 400;
      margin-bottom: 2.5rem;
    }


    .scroll-hint {
      margin-top: 4.5rem;
    }

    .scroll-hint a {
      display: inline-block;
      color: var(--text-muted);
      text-decoration: none;
      font-size: 1.1rem;
      transition: color 0.2s;
      animation: gentleBounce 3s ease-in-out infinite;
    }

    .scroll-hint a:hover { color: var(--terracotta); }

    @keyframes gentleBounce {
      0%, 100% { transform: translateY(0); opacity: 0.4; }
      50% { transform: translateY(6px); opacity: 0.9; }
    }

    /* --- Code windows --- */
    .code-window {
      border: 1px solid var(--border);
      background: var(--bg-code);
      overflow: hidden;
      text-align: left;
    }

    .code-titlebar {
      display: flex;
      align-items: center;
      padding: 0.65rem 1rem;
      border-bottom: 1px solid #3d3835;
      background: #342f2c;
    }

    .code-title {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      color: #8a7e76;
    }

    .code-body {
      padding: 1.2rem 1.4rem;
      font-family: var(--font-mono);
      font-size: 0.8rem;
      line-height: 1.8;
      overflow-x: auto;
      color: #d4c8be;
    }

    .code-body .c-keyword { color: #c9937a; }
    .code-body .c-string { color: #a3b87c; }
    .code-body .c-method { color: #d4a96a; }
    .code-body .c-prop { color: #d4c8be; }
    .code-body .c-punct { color: #8a7e76; }

    /* --- Divider --- */
    .divider {
      max-width: 1100px;
      margin: 0 auto;
      border: none;
      border-top: 1px solid var(--border);
    }

    /* --- Sections --- */
    section { padding: 6rem 2rem; }

    .section-inner {
      max-width: 1000px;
      margin: 0 auto;
    }

    .section-label {
      font-family: var(--font-mono);
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--terracotta);
      margin-bottom: 1.2rem;
      font-weight: 500;
    }

    .section-title {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 2.8rem);
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin-bottom: 1rem;
      max-width: 550px;
    }

    .section-desc {
      font-size: 1rem;
      color: var(--text-secondary);
      max-width: 480px;
      line-height: 1.7;
      margin-bottom: 3.5rem;
    }

    /* --- Agent Identity (position 2 - dark section) --- */
    .identity-section {
      background: var(--charcoal);
      color: #e8ddd3;
      position: relative;
      overflow: hidden;
    }

    .identity-section::before {
      content: '';
      position: absolute;
      top: -80px;
      right: -120px;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(184,89,59,0.12) 0%, transparent 70%);
      pointer-events: none;
    }

    .identity-section .section-inner {
      position: relative;
      z-index: 1;
    }

    .identity-section .section-label {
      color: var(--terracotta-light);
    }

    .identity-section .section-title {
      color: #f0e6dc;
      max-width: 620px;
    }

    .identity-section .section-desc {
      color: #b3a698;
    }

    .identity-layout {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 3.5rem;
      align-items: start;
    }

    .identity-text h3 {
      font-family: var(--font-display);
      font-size: 1.3rem;
      font-weight: 500;
      font-style: italic;
      color: #f0e6dc;
      margin-bottom: 0.6rem;
    }

    .identity-text p {
      font-size: 0.88rem;
      color: #b3a698;
      line-height: 1.65;
      margin-bottom: 1.6rem;
    }

    .identity-text p strong {
      color: #e8ddd3;
      font-weight: 500;
    }

    .identity-code .code-window {
      border-color: #4a4340;
    }

    .identity-code .code-titlebar {
      background: #3a3532;
      border-bottom-color: #4a4340;
    }

    .identity-code .code-body {
      font-size: 0.78rem;
      line-height: 1.75;
      padding: 1rem 1.2rem;
    }

    .identity-code .code-body .c-key {
      color: #c9937a;
    }

    .identity-code .code-body .c-str {
      color: #a3b87c;
    }

    .identity-code .code-body .c-bool {
      color: #d4a96a;
    }

    .identity-code .code-body .c-bracket {
      color: #8a7e76;
    }

    .identity-endpoint {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--terracotta-light);
      margin-top: 1rem;
      opacity: 0.8;
    }

    .identity-endpoint a {
      color: var(--terracotta-light);
      text-decoration: none;
      border-bottom: 1px solid rgba(212,121,92,0.3);
      transition: border-color 0.15s;
    }

    .identity-endpoint a:hover {
      border-color: var(--terracotta-light);
    }

    @media (max-width: 900px) {
      .identity-layout { grid-template-columns: 1fr; }
      .verified-indicator { display: none; }
    }

    /* --- How it works --- */
    .steps-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
    }

    .step {
      padding: 2.5rem 2rem 2.5rem 0;
      border-top: 2px solid var(--terracotta);
    }

    .step:not(:last-child) {
      margin-right: 2rem;
    }

    .step-number {
      font-family: var(--font-display);
      font-size: 2.2rem;
      font-weight: 400;
      color: var(--terracotta-light);
      margin-bottom: 1rem;
      line-height: 1;
    }

    .step h3 {
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 0.7rem;
      color: var(--text);
    }

    .step p {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.65;
    }

    .step code {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      background: var(--bg-warm);
      padding: 0.15rem 0.4rem;
      color: var(--terracotta-dark);
    }

    /* --- Oversight --- */
    .oversight-layout {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 4rem;
      align-items: start;
    }

    .oversight-modes {
      display: flex;
      flex-direction: column;
      gap: 0;
      border-top: 1px solid var(--border);
    }

    .oversight-mode {
      padding: 1.1rem 0;
      border-bottom: 1px solid var(--border);
      cursor: default;
    }

    .oversight-mode-name {
      font-family: var(--font-mono);
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 0.25rem;
    }

    .oversight-mode-desc {
      font-size: 0.85rem;
      color: var(--text-muted);
      line-height: 1.55;
    }

    .oversight-mode.highlighted {
      background: var(--terracotta-bg);
      padding: 1.1rem 1rem;
      margin: 0 -1rem;
      border-color: transparent;
    }

    .oversight-mode.highlighted + .oversight-mode {
      border-top: none;
    }

    .oversight-mode.highlighted .oversight-mode-name {
      color: var(--terracotta-dark);
    }

    /* --- Features --- */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0;
      border-top: 1px solid var(--border);
      border-left: 1px solid var(--border);
    }

    .feature-card {
      padding: 2.2rem 2rem;
      border-bottom: 1px solid var(--border);
      border-right: 1px solid var(--border);
      transition: background 0.2s;
    }

    .feature-card:hover { background: var(--bg-warm); }

    .feature-label {
      font-family: var(--font-mono);
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text-muted);
      margin-bottom: 0.7rem;
      font-weight: 500;
    }

    .feature-card h3 {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 500;
      margin-bottom: 0.6rem;
      color: var(--text);
      font-style: italic;
    }

    .feature-card p {
      font-size: 0.88rem;
      color: var(--text-secondary);
      line-height: 1.65;
    }

    /* --- Deliverability --- */
    .trust-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-top: 1px solid var(--border);
    }

    .trust-item {
      padding: 2rem 2rem 2rem 0;
      border-bottom: 1px solid var(--border);
    }

    .trust-item:not(:nth-child(3n+1)) {
      padding-left: 2rem;
      border-left: 1px solid var(--border);
    }

    .trust-item h3 {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 500;
      font-style: italic;
      color: var(--text);
      margin-bottom: 0.5rem;
    }

    .trust-item p {
      font-size: 0.88rem;
      color: var(--text-secondary);
      line-height: 1.65;
    }

    @media (max-width: 900px) {
      .trust-grid { grid-template-columns: 1fr; }
      .trust-item:not(:nth-child(3n+1)) { padding-left: 0; border-left: none; }
    }

    /* --- API --- */
    .api-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border-top: 1px solid var(--border);
    }

    .api-endpoint {
      padding: 1.4rem 1.6rem 1.4rem 0;
      border-bottom: 1px solid var(--border);
    }

    .api-endpoint:nth-child(even) {
      padding-left: 1.6rem;
      border-left: 1px solid var(--border);
    }

    .api-method {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      display: inline-block;
      margin-bottom: 0.4rem;
    }

    .api-method.get { color: var(--olive); }
    .api-method.post { color: var(--terracotta); }
    .api-method.patch { color: var(--terracotta-light); }
    .api-method.delete { color: #a04030; }

    .api-path {
      font-family: var(--font-mono);
      font-size: 0.82rem;
      color: var(--text);
      margin-bottom: 0.3rem;
    }

    .api-desc {
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.55;
    }

    /* --- MCP --- */
    .mcp-section {
      background: var(--olive-bg);
      position: relative;
      overflow: hidden;
    }

    .mcp-section::before {
      content: '';
      position: absolute;
      bottom: -100px;
      left: -80px;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(90,107,60,0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .mcp-section .section-inner {
      position: relative;
      z-index: 1;
    }

    .mcp-section .section-label {
      color: var(--olive);
    }

    .mcp-layout {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 3.5rem;
      align-items: start;
    }

    .mcp-text h3 {
      font-family: var(--font-display);
      font-size: 1.3rem;
      font-weight: 500;
      font-style: italic;
      color: var(--text);
      margin-bottom: 0.6rem;
    }

    .mcp-text p {
      font-size: 0.88rem;
      color: var(--text-secondary);
      line-height: 1.65;
      margin-bottom: 1.4rem;
    }

    .pricing-table {
      width: 100%;
      border-collapse: collapse;
      margin: 1.2rem 0;
    }

    .pricing-table th {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      text-align: left;
      padding: 0 0.8rem 0.5rem 0;
      border-bottom: 1px solid var(--border);
      font-weight: 500;
    }

    .pricing-table td {
      font-size: 0.82rem;
      color: var(--text-secondary);
      padding: 0.6rem 0.8rem 0.6rem 0;
      border-bottom: 1px solid var(--border-light);
      line-height: 1.5;
    }

    .pricing-table td:first-child {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      color: var(--text);
      font-weight: 500;
    }

    .pricing-table td:nth-child(2) {
      color: var(--accent);
      font-weight: 500;
    }

    .mcp-env-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1rem;
    }

    .mcp-env-table th {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      text-align: left;
      padding: 0 0 0.5rem;
      border-bottom: 1px solid var(--border);
      font-weight: 500;
    }

    .mcp-env-table td {
      font-size: 0.82rem;
      color: var(--text-secondary);
      padding: 0.6rem 0.8rem 0.6rem 0;
      border-bottom: 1px solid var(--border-light);
      line-height: 1.5;
      vertical-align: top;
    }

    .mcp-env-table td:first-child {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      color: var(--text);
      white-space: nowrap;
    }

    .mcp-env-table td:last-child {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--text-muted);
    }

    .mcp-tools-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0;
      border-top: 1px solid var(--border);
      border-left: 1px solid var(--border);
      margin-top: 2.5rem;
    }

    .mcp-tool {
      padding: 1.4rem 1.4rem;
      border-bottom: 1px solid var(--border);
      border-right: 1px solid var(--border);
      transition: background 0.2s;
    }

    .mcp-tool:hover {
      background: rgba(255,255,255,0.5);
    }

    .mcp-tool-name {
      font-family: var(--font-mono);
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--olive);
      margin-bottom: 0.3rem;
    }

    .mcp-tool-desc {
      font-size: 0.82rem;
      color: var(--text-secondary);
      line-height: 1.55;
      margin-bottom: 0.5rem;
    }

    .mcp-tool-args {
      font-family: var(--font-mono);
      font-size: 0.68rem;
      color: var(--text-muted);
      line-height: 1.7;
    }

    .mcp-tool-args span {
      color: var(--text-secondary);
    }

    .mcp-code .code-window {
      border-color: var(--border);
    }

    .mcp-code .code-body {
      font-size: 0.76rem;
      line-height: 1.75;
      padding: 1rem 1.2rem;
    }

    @media (max-width: 900px) {
      .mcp-layout { grid-template-columns: 1fr; }
      .mcp-tools-grid { grid-template-columns: 1fr; }
    }

    /* --- CTA --- */
    .cta-section {
      text-align: center;
      padding: 7rem 2rem;
      background: var(--bg-warm);
    }

    .cta-section .section-title {
      max-width: 600px;
      margin: 0 auto 1rem;
    }

    .cta-section .section-desc {
      max-width: 440px;
      margin: 0 auto 2.5rem;
    }


    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.8rem 1.8rem;
      font-size: 0.9rem;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.15s;
      font-family: var(--font-body);
      cursor: pointer;
      border: none;
    }

    .btn-primary {
      background: var(--terracotta);
      color: #fff;
      border: 1.5px solid var(--terracotta);
    }

    .btn-primary:hover {
      background: var(--terracotta-dark);
      border-color: var(--terracotta-dark);
    }

    .btn .arrow { transition: transform 0.15s; }
    .btn:hover .arrow { transform: translateX(3px); }

    /* --- Footer --- */
    .footer {
      border-top: 1px solid var(--border);
      padding: 2.5rem 2.5rem;
    }

    .footer-inner {
      max-width: 1000px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .footer-left {
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }

    .footer-copy {
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    .footer-links {
      display: flex;
      gap: 1.5rem;
    }

    .footer-links a {
      font-size: 0.78rem;
      color: var(--text-muted);
      text-decoration: none;
      transition: color 0.15s;
    }

    .footer-links a:hover { color: var(--text-secondary); }

    /* --- Animations --- */
    .fade-up {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .stagger-1 { transition-delay: 0.04s; }
    .stagger-2 { transition-delay: 0.08s; }
    .stagger-3 { transition-delay: 0.12s; }
    .stagger-4 { transition-delay: 0.16s; }
    .stagger-5 { transition-delay: 0.2s; }
    .stagger-6 { transition-delay: 0.24s; }

    .hero .fade-up {
      opacity: 0;
      transform: translateY(14px);
      animation: fadeUpIn 0.7s ease forwards;
    }
    .hero .stagger-1 { animation-delay: 0.08s; }
    .hero .stagger-2 { animation-delay: 0.22s; }
    .hero .stagger-3 { animation-delay: 0.4s; }

    @keyframes fadeUpIn {
      to { opacity: 1; transform: translateY(0); }
    }

    /* --- Agent markdown view --- */
    .agent-view {
      display: none;
      max-width: 700px;
      margin: 0 auto;
      padding: 3rem 2rem;
      font-family: var(--font-mono);
      font-size: 0.88rem;
      line-height: 1.8;
      color: var(--text);
    }

    .agent-view.active { display: block; }

    body.agent-mode .header,
    body.agent-mode .hero,
    body.agent-mode .divider,
    body.agent-mode .identity-section,
    body.agent-mode .how-it-works,
    body.agent-mode .oversight-section,
    body.agent-mode .features-section,
    body.agent-mode .stack-section,
    body.agent-mode .api-section,
    body.agent-mode .mcp-section,
    body.agent-mode .cta-section,
    body.agent-mode .footer { display: none; }

    .agent-view h1 {
      font-family: var(--font-mono);
      font-size: 1.2rem;
      font-weight: 500;
      margin-bottom: 0.5rem;
      color: var(--text);
    }

    .agent-view h2 {
      font-family: var(--font-mono);
      font-size: 0.95rem;
      font-weight: 500;
      margin: 2rem 0 0.8rem;
      color: var(--terracotta-dark);
      border-bottom: 1px solid var(--border);
      padding-bottom: 0.4rem;
    }

    .agent-view h3 {
      font-family: var(--font-mono);
      font-size: 0.88rem;
      font-weight: 500;
      margin: 1.5rem 0 0.5rem;
      color: var(--text);
    }

    .agent-view p { margin-bottom: 0.8rem; color: var(--text-secondary); }
    .agent-view strong { color: var(--text); font-weight: 500; }

    .agent-view pre {
      background: var(--bg-code);
      border: 1px solid #3d3835;
      padding: 1rem 1.25rem;
      overflow-x: auto;
      margin: 0.8rem 0 1.2rem;
      font-size: 0.8rem;
      line-height: 1.7;
      color: #d4c8be;
    }

    .agent-view code {
      background: var(--bg-warm);
      padding: 0.1rem 0.35rem;
      font-size: 0.8rem;
      color: var(--terracotta-dark);
    }

    .agent-view pre code {
      background: none;
      padding: 0;
      color: #d4c8be;
    }

    .agent-view ul, .agent-view ol {
      margin: 0.5rem 0 1rem 1.5rem;
      color: var(--text-secondary);
    }

    .agent-view li { margin-bottom: 0.3rem; }
    .agent-view li code { color: var(--terracotta-dark); }

    .agent-view hr {
      border: none;
      border-top: 1px solid var(--border);
      margin: 2rem 0;
    }

    .agent-view .agent-banner {
      background: var(--terracotta-bg);
      border: 1px solid var(--terracotta-light);
      padding: 0.7rem 1rem;
      margin-bottom: 2rem;
      font-size: 0.78rem;
      color: var(--terracotta-dark);
    }

    /* --- Responsive --- */
    @media (max-width: 900px) {
      .steps-grid { grid-template-columns: 1fr; }
      .step:not(:last-child) { margin-right: 0; }
      .features-grid { grid-template-columns: 1fr; }
      .oversight-layout { grid-template-columns: 1fr; }
      .api-layout { grid-template-columns: 1fr; }
      .api-endpoint:nth-child(even) { padding-left: 0; border-left: none; }
      .header-nav { display: none; }
      .footer-inner { flex-direction: column; gap: 1.5rem; text-align: center; }
      .footer-left { flex-direction: column; }
    }

    @media (max-width: 600px) {
      .hero h1 { font-size: 2.4rem; }
      section { padding: 4rem 1.25rem; }
    }
  </style>
</head>
<body>

  <!-- Agent markdown view (shown when AI agent detected) -->
  <div class="agent-view" id="agent-view">
    <div class="agent-banner">You're viewing the agent-readable version of this page. <a href="?human=1" style="color:var(--terracotta-dark);text-decoration:underline;">Switch to human view</a></div>

    <h1>MultiMail: Email for AI Agents</h1>
    <p>MultiMail gives you a real email address. Send and receive email as markdown, 15x fewer tokens than raw HTML email. Human oversight is handled for you.</p>

    <p><strong>OpenAPI spec:</strong> <code>GET https://api.multimail.dev/v1/openapi.json</code> for full machine-readable API details.</p>
    <p><strong>Base URL:</strong> <code>https://api.multimail.dev</code></p>
    <p><strong>Auth:</strong> <code>Authorization: Bearer mm_live_...</code></p>

    <h2>What this does for you</h2>
    <ul>
      <li>You get an email address like <code>zippy@agent.multimail.dev</code></li>
      <li>You send email by POSTing markdown. It arrives as formatted HTML.</li>
      <li>You receive email as clean markdown. No HTML parsing, no MIME decoding.</li>
      <li>Threading is automatic. Reply to an email and headers are set correctly.</li>
      <li>Attachments are stored separately and downloaded on demand, not inlined as base64</li>
      <li>Oversight mode controls whether your emails need approval before sending</li>
      <li>Every outbound email carries a cryptographically signed <code>X-MultiMail-Identity</code> header (ECDSA P-256) with operator, oversight mode, capabilities, and verification status.</li>
    </ul>

    <h2>Verify before you communicate</h2>
    <p>Every outbound email from a MultiMail address includes a signed <code>X-MultiMail-Identity</code> header. The header contains a base64url-encoded JSON payload and an ECDSA P-256 signature, separated by a dot. To verify: decode both parts, fetch the public key from <code>GET /.well-known/multimail-signing-key</code>, and verify the signature using ECDSA with SHA-256. Identity is delivered exclusively via this signed header. No separate lookup endpoint is needed or available.</p>
    <p>Reputation data is delivered separately via the <code>X-MultiMail-Reputation</code> header on every outbound email.</p>

    <h2>Getting started</h2>

    <h3>1. Sign up</h3>
    <p><strong>Web setup (recommended):</strong> After your account is approved, follow the setup link in your approval email. The guided flow walks you through account creation, activation, and client configuration.</p>
    <p><strong>API signup:</strong> Alternatively, create an account programmatically:</p>
    <pre><code>POST /v1/account
{
  "operator_name": "Greenline Studios",
  "slug": "greenline",
  "accepted_tos": true,
  "accepted_operator_agreement": true,
  "accepted_anti_spam_policy": true,
  "email_use_type": "transactional",
  "oversight_email": "ops@greenline.studio"
}</code></pre>
    <p>Response includes a <code>default_mailbox</code> address (e.g. <code>agent@greenline.multimail.dev</code>) and a pending status. Check your oversight email for an activation code, then confirm via <code>POST /v1/confirm</code> to activate and receive your API key (shown once). Manage your account at <a href="/dashboard" style="color: var(--terracotta);">/dashboard</a>.</p>
    <p>Note: <code>operator_name</code> is published in the signed <code>X-MultiMail-Identity</code> header on every outbound email and visible to email recipients.</p>

    <h3>2. Upgrade (optional)</h3>
    <table id="pricing-table" class="pricing-table">
      <thead>
        <tr><th>Plan</th><th>Price</th><th>Mailboxes</th><th>Emails/mo</th><th>Storage</th></tr>
      </thead>
      <tbody>
        <tr><td>Starter</td><td>Free</td><td>2</td><td>200</td><td>100 MB</td></tr>
        <tr><td>Builder</td><td>$9/mo</td><td>5</td><td>5,000</td><td>10 GB</td></tr>
        <tr><td>Pro</td><td>$29/mo</td><td>25</td><td>30,000</td><td>50 GB</td></tr>
        <tr><td>Scale</td><td>$99/mo</td><td>100</td><td>150,000</td><td>150 GB</td></tr>
      </tbody>
    </table>
    <p style="margin-top: 0.6rem;"><a href="/pricing" style="font-family: var(--font-mono); font-size: 0.82rem; color: var(--terracotta);">See full pricing with annual discounts and subscribe &rarr;</a></p>
    <pre><code>// Stripe (card) — supports monthly or annual billing
POST /v1/billing/checkout
{ "plan": "builder", "interval": "annual" }  // builder | pro | scale

// More payment options coming soon</code></pre>
    <p>Returns <code>{ "url": "https://..." }</code>. Complete payment at that URL or pass it to your operator.</p>

    <h3>3. Send an email</h3>
    <pre><code>POST /v1/mailboxes/{mailbox_id}/send
{
  "to": ["recipient@example.com"],
  "subject": "Weekly summary",
  "markdown": "## Completed\n\n- Task A\n- Task B\n\nAll items resolved."
}</code></pre>
    <p>Returns <code>200</code> if sent, <code>202</code> if held for operator approval (gated mode), or <code>403</code> if the mailbox is in <code>read_only</code> mode.</p>

    <h3>4. Read your inbox</h3>
    <pre><code>GET /v1/mailboxes/{mailbox_id}/emails?status=unread</code></pre>
    <p>Returns emails as markdown. Each email includes <code>thread_id</code>, <code>from</code>, <code>to</code>, <code>subject</code>, and attachment metadata.</p>

    <h3>5. Reply in-thread</h3>
    <pre><code>POST /v1/mailboxes/{mailbox_id}/reply/{email_id}
{
  "markdown": "Acknowledged. I'll follow up tomorrow."
}</code></pre>

    <h2>Oversight modes</h2>
    <p>Each mailbox has an oversight mode set via the API or by an admin. Modes form a trust ladder: start restrictive, upgrade as you earn trust.</p>
    <ul>
      <li><code>read_only</code>: you can receive and read email, but cannot send or reply. Attempts return <code>403</code> with instructions on how to request an upgrade.</li>
      <li><code>gated_all</code>: both inbound and outbound require human approval</li>
      <li><code>gated_send</code> (default): outbound emails are held for approval. You receive a <code>202</code> instead of <code>200</code>. Inbound delivered immediately.</li>
      <li><code>monitored</code>: you operate freely, copies of outbound emails go to the oversight address</li>
      <li><code>autonomous</code>: full send/receive without approval gates</li>
    </ul>
    <p>If you receive a <code>202</code>, the email is queued. Do not retry. The oversight address will be notified.</p>

    <h3>Requesting an upgrade</h3>
    <p>If your mailbox is in a restrictive mode and you need more autonomy, request an upgrade:</p>
    <pre><code>POST /v1/mailboxes/{mailbox_id}/request-upgrade
{ "target_mode": "gated_all" }</code></pre>
    <p>This emails a one-time upgrade code to your operator. Ask your operator to share it with you, then:</p>
    <pre><code>POST /v1/mailboxes/{mailbox_id}/upgrade
{ "code": "A7X-29K" }</code></pre>
    <p>Codes expire after 24 hours and can only be used once. No code is needed for downgrades. Use <code>PATCH /v1/mailboxes/:id</code> to move to a more restrictive mode at any time.</p>

    <h2>Handling attachments</h2>
    <ul>
      <li><strong>Sending:</strong> Include <code>attachments</code> array with <code>name</code>, <code>content_base64</code>, <code>content_type</code>. Max 10MB total.</li>
      <li><strong>Receiving:</strong> Email response includes <code>attachments</code> with metadata. Download via <code>GET /v1/mailboxes/:id/emails/:eid/attachments/:filename</code>.</li>
    </ul>

    <h2>Webhooks</h2>
    <p>Configure webhooks on your mailbox to receive push notifications instead of polling. Two webhook types are available:</p>
    <ul>
      <li><code>webhook_url</code> — notifies the agent when new email arrives (<code>email.received</code>)</li>
      <li><code>oversight_webhook_url</code> — notifies the operator when an email is held for approval (<code>email.pending_approval</code>)</li>
    </ul>
    <p>Set either via <code>POST /v1/mailboxes</code> or <code>PATCH /v1/mailboxes/:id</code>. Both must use HTTPS.</p>

    <h3>Webhook payload</h3>
    <p>All webhooks deliver a <code>POST</code> request with a JSON body:</p>
    <pre><code>{
  "event": "email.received",
  "timestamp": "2026-02-26T12:00:00.000Z",
  "data": {
    "email_id": "em_abc123",
    "from": "sender@example.com",
    "to": ["agent@yourco.multimail.dev"],
    "subject": "Weekly report",
    "direction": "inbound",
    "has_attachments": false
  }
}</code></pre>
    <p>For <code>email.pending_approval</code>, the <code>data</code> object also includes an <code>approval_url</code> for one-click approve/reject.</p>

    <h3>Signature verification</h3>
    <p>Every webhook request includes an <code>X-MultiMail-Signature</code> header containing an HMAC-SHA256 signature of the raw request body. Verify it server-side to confirm the request came from MultiMail.</p>

    <h3>Retries and delivery history</h3>
    <p>Failed deliveries (non-2xx response) are retried up to 3 times with exponential backoff. View delivery history and debug failures via <code>GET /v1/webhook-deliveries</code> (requires admin scope).</p>

    <p>If you don't use webhooks, poll <code>GET /v1/mailboxes/:id/emails?status=unread</code> instead.</p>

    <h2>MCP Server</h2>
    <p>If your framework supports the Model Context Protocol (MCP), use our MCP server instead of direct API calls. One config line gives you forty email tools.</p>

    <h3>Option A: Remote server (recommended)</h3>
    <p>No install required. Connect directly to our hosted MCP server at <code>mcp.multimail.dev</code>. Authenticates via OAuth in the browser &mdash; paste your API key once and you're connected. Works with Claude.ai, Claude Desktop, Claude Code, and any client that supports remote MCP.</p>
    <pre><code>{
  "mcpServers": {
    "multimail": {
      "type": "url",
      "url": "https://mcp.multimail.dev/mcp"
    }
  }
}</code></pre>

    <h3>Option B: Local server (stdio)</h3>
    <p>Run the server locally via npm. API key is passed as an environment variable. Works with all MCP-compatible clients. Package: <code>@multimail/mcp-server</code></p>
    <pre><code>{
  "mcpServers": {
    "multimail": {
      "command": "npx",
      "args": ["-y", "@multimail/mcp-server"],
      "env": {
        "MULTIMAIL_API_KEY": "mm_live_...",
        "MULTIMAIL_MAILBOX_ID": "01KJ1NHN8J..."
      }
    }
  }
}</code></pre>

    <h3>Environment variables (local server only)</h3>
    <ul>
      <li><code>MULTIMAIL_API_KEY</code> (required): your API key. Server refuses to start without it.</li>
      <li><code>MULTIMAIL_MAILBOX_ID</code> (optional): default mailbox ID so you don't need to pass it on every tool call. If not set, call <code>list_mailboxes</code> first.</li>
      <li><code>MULTIMAIL_API_URL</code> (optional): override API base URL for local development. Defaults to <code>https://api.multimail.dev</code>.</li>
    </ul>

    <h3>Tools</h3>

    <p><strong>list_mailboxes</strong>: List all mailboxes available to this API key. Returns each mailbox's ID, email address, oversight mode, and display name. No arguments.</p>

    <p><strong>send_email</strong>: Send an email with a markdown body. Supports scheduled delivery and idempotency. Args: <code>to</code> (string[]), <code>subject</code> (string), <code>markdown</code> (string), <code>cc</code> (string[], optional), <code>bcc</code> (string[], optional), <code>attachments</code> (array of {name, content_base64, content_type}, optional), <code>idempotency_key</code> (string, optional), <code>send_at</code> (ISO 8601 UTC string ending in Z, optional — schedules delivery for a future time), <code>gate_timing</code> ("gate_first" or "schedule_first", optional — controls whether human approval happens before or after scheduling), <code>mailbox_id</code> (string, optional). Returns <code>{ id, status, thread_id }</code> where status is <code>"pending_scan"</code> or <code>"scheduled"</code>. For gated mailboxes, transitions to <code>"pending_send_approval"</code>. Do not retry or resend. Use <code>idempotency_key</code> to prevent duplicate sends (24h TTL).</p>

    <p><strong>check_inbox</strong>: List email summaries with filtering. Args: <code>status</code> (unread/read/archived/deleted/pending_send_approval/pending_inbound_approval/rejected/cancelled/send_failed/scheduled, optional), <code>sender</code> (string, partial match, optional), <code>subject_contains</code> (string, optional), <code>date_after</code> / <code>date_before</code> (ISO datetime, optional), <code>direction</code> (inbound/outbound, optional), <code>has_attachments</code> (boolean, optional), <code>since_id</code> (string, for incremental polling, optional), <code>limit</code> (number, max 100, optional), <code>cursor</code> (string, pagination cursor, optional), <code>mailbox_id</code> (string, optional). Returns array of <code>{ id, from, to, subject, status, received_at, has_attachments, delivered_at, bounced_at, bounce_type }</code>. Does NOT include the email body. Call <code>read_email</code> for full content.</p>

    <p><strong>read_email</strong>: Get full email content including markdown body, attachment metadata, delivery timestamps, and tags. Args: <code>email_id</code> (string), <code>mailbox_id</code> (string, optional). Automatically marks unread emails as read. Returns <code>delivered_at</code>, <code>bounced_at</code>, <code>bounce_type</code>, <code>approved_at</code>, <code>approved_by</code>, and <code>tags</code>.</p>

    <p><strong>reply_email</strong>: Reply to an email in its existing thread. Threading headers set automatically. Args: <code>email_id</code> (string), <code>markdown</code> (string), <code>cc</code> (string[], optional), <code>bcc</code> (string[], optional), <code>attachments</code> (array, optional), <code>idempotency_key</code> (string, optional), <code>mailbox_id</code> (string, optional). Returns <code>{ id, status, thread_id }</code>. Same scanning and approval behavior as send_email.</p>

    <p><strong>download_attachment</strong>: Download an email attachment. Small files (&lt;50KB) return inline base64. Larger files return a presigned download URL valid for 1 hour. Args: <code>email_id</code> (string), <code>filename</code> (string, from read_email attachment list), <code>mailbox_id</code> (string, optional).</p>

    <p><strong>get_thread</strong>: Get all emails in a conversation thread, ordered chronologically. Args: <code>thread_id</code> (string, from check_inbox or read_email), <code>mailbox_id</code> (string, optional). Returns participants, message_count, last_activity, has_unanswered_inbound, and the full email list.</p>

    <p><strong>cancel_message</strong>: Cancel a pending or scheduled email. Args: <code>email_id</code> (string), <code>mailbox_id</code> (string, optional). Works on emails with status <code>pending_scan</code>, <code>pending_send_approval</code>, <code>pending_inbound_approval</code>, or <code>scheduled</code>. Returns 409 if already sent. Idempotent on already-cancelled emails.</p>

    <p><strong>tag_email</strong>: Set, get, or delete key-value tags on emails. Tags persist across sessions. Args: <code>email_id</code> (string), <code>action</code> (set/get/delete), <code>tags</code> (Record&lt;string, string&gt;, for set), <code>key</code> (string, for delete), <code>mailbox_id</code> (string, optional). Use for priority flags, follow-up dates, extracted data, or any agent metadata.</p>

    <p><strong>add_contact</strong>: Add a contact to your address book. Args: <code>name</code> (string), <code>email</code> (string), <code>tags</code> (string[], optional). Build contacts organically from processed messages.</p>

    <p><strong>search_contacts</strong>: Search address book by name or email (partial match). Args: <code>query</code> (string, optional). Returns matching contacts with tags. Call with no query to list all.</p>

    <p><strong>update_mailbox</strong>: Update mailbox settings. All fields optional — only include what you want to change. Args: <code>mailbox_id</code> (string, optional), <code>display_name</code> (string, optional), <code>oversight_mode</code> (string, optional), <code>auto_cc</code> (string, optional), <code>auto_bcc</code> (string, optional), <code>forward_inbound</code> (boolean, optional), <code>webhook_url</code> (string, optional), <code>oversight_webhook_url</code> (string, optional), <code>signature_block</code> (string, optional).</p>

    <p><strong>update_account</strong>: Update account settings. Args: <code>name</code> (string, optional), <code>oversight_email</code> (string, optional), <code>physical_address</code> (string, optional). Requires admin scope.</p>

    <p><strong>delete_mailbox</strong>: Permanently delete a mailbox and all associated data. Args: <code>mailbox_id</code> (string). Requires admin scope. This action cannot be undone.</p>

    <p><strong>resend_confirmation</strong>: Resend the operator activation email with a new code. No arguments. Rate limited to 1 request per 5 minutes. Only works for unconfirmed accounts.</p>

    <p><strong>activate_account</strong>: Activate your account using the code from the confirmation email. Args: <code>code</code> (string, e.g. "SKP-7D2-4V8"). Accepts with or without dashes. Rate limited to 5 attempts per hour.</p>

    <p><strong>get_account</strong>: Get account status, plan, quota used/remaining, sending enabled, and enforcement tier. No arguments. Use for self-diagnosis when sends fail.</p>

    <p><strong>create_mailbox</strong>: Create a new mailbox. Requires admin scope and operator email approval. Returns 202 with an approval code sent to the oversight email; resubmit with the code to complete creation.</p>

    <p><strong>request_upgrade</strong>: Request an oversight mode upgrade. Args: <code>mailbox_id</code> (string, optional), <code>target_mode</code> (string). Sends upgrade request to operator. Requires admin scope.</p>

    <p><strong>apply_upgrade</strong>: Apply an upgrade code from operator. Args: <code>mailbox_id</code> (string, optional), <code>code</code> (string).</p>

    <p><strong>get_usage</strong>: Check quota and usage stats. Args: <code>period</code> (summary/daily, optional). Returns emails sent, received, storage used, plan limits.</p>

    <p><strong>list_pending</strong>: List emails awaiting oversight decision. No arguments. Requires oversight or oversight_read scope.</p>

    <p><strong>decide_email</strong>: Approve or reject a pending email. Args: <code>email_id</code> (string), <code>action</code> (approve/reject), <code>reason</code> (string, optional). Requires oversight scope.</p>

    <p><strong>delete_contact</strong>: Delete a contact. Args: <code>contact_id</code> (string).</p>

    <p><strong>check_suppression</strong>: List suppressed email addresses. Args: <code>limit</code> (number, optional), <code>cursor</code> (string, optional).</p>

    <p><strong>remove_suppression</strong>: Remove address from suppression list. Args: <code>email_address</code> (string).</p>

    <p><strong>list_api_keys</strong>: List all API keys with metadata. No arguments. Requires admin scope.</p>

    <p><strong>create_api_key</strong>: Create a new API key. Requires admin scope and operator email approval. Key value returned only once after approval code is provided.</p>

    <p><strong>revoke_api_key</strong>: Revoke an API key. Args: <code>key_id</code> (string). Requires admin scope. Cannot be undone.</p>

    <p><strong>get_audit_log</strong>: Get account audit log. Args: <code>limit</code> (number, optional), <code>cursor</code> (string, optional). Requires admin scope.</p>

    <p><strong>delete_account</strong>: Permanently delete account and all data. No arguments. Requires admin scope. Cannot be undone.</p>

    <p><strong>wait_for_email</strong>: Block until a new email arrives matching optional filters, or timeout. Args: <code>mailbox_id</code> (string, optional), <code>timeout_seconds</code> (number, 5–120, default 30), <code>filter</code> ({sender?, subject_contains?}, optional). Returns immediately when mail arrives.</p>

    <p><strong>create_webhook</strong>: Create a webhook subscription. Requires admin scope and operator email approval. Args: <code>url</code> (HTTPS string), <code>events</code> (string[]), <code>mailbox_id</code> (string, optional). Returns subscription with signing_secret after approval.</p>

    <p><strong>list_webhooks</strong>: List all webhook subscriptions for this account. No arguments.</p>

    <p><strong>delete_webhook</strong>: Delete a webhook subscription. Args: <code>webhook_id</code> (string).</p>

    <p><strong>configure_mailbox</strong>: Set up mailbox preferences on first run. Args: <code>oversight_mode</code> ("gated_all", "gated_send", "monitored", "autonomous", optional), <code>display_name</code> (string, optional), <code>default_cc</code> (string[], optional), <code>default_bcc</code> (string[], optional), <code>scheduling_enabled</code> (boolean, optional), <code>default_gate_timing</code> ("gate_first" or "schedule_first", optional), <code>signature</code> (string, optional), <code>mailbox_id</code> (string, optional). On first use, MultiMail nudges your agent to run this tool before proceeding.</p>

    <p><strong>schedule_email</strong>: Schedule an email for future delivery. Same as send_email but <code>send_at</code> is required. Args: <code>to</code> (string[]), <code>subject</code> (string), <code>markdown</code> (string), <code>send_at</code> (ISO 8601 UTC, required — must end with Z), <code>cc</code> (string[], optional), <code>bcc</code> (string[], optional), <code>attachments</code> (array, optional), <code>gate_timing</code> ("gate_first" or "schedule_first", optional), <code>idempotency_key</code> (string, optional), <code>mailbox_id</code> (string, optional). Returns <code>{ id, status, thread_id }</code>. Use <code>edit_scheduled_email</code> to modify or <code>cancel_message</code> to cancel.</p>

    <p><strong>edit_scheduled_email</strong>: Edit a scheduled email before it sends. Args: <code>email_id</code> (string), <code>send_at</code> (ISO 8601 UTC, optional), <code>to</code> (string[], optional), <code>cc</code> (string[], optional), <code>bcc</code> (string[], optional), <code>subject</code> (string, optional), <code>markdown</code> (string, optional), <code>mailbox_id</code> (string, optional). Only works on emails with status <code>"scheduled"</code>.</p>

    <h3>Error handling</h3>
    <ul>
      <li><code>401</code>: Invalid API key. Check <code>MULTIMAIL_API_KEY</code>.</li>
      <li><code>403</code>: API key lacks required scope for this operation.</li>
      <li><code>429</code>: Rate limit exceeded. Retry after the indicated seconds.</li>
      <li><code>400</code>: Validation error, content filter, or suppression list. Error message passed through from API.</li>
    </ul>

    <h2>All endpoints</h2>
    <p>Fetch <code>GET /v1/openapi.json</code> for full request/response schemas.</p>
    <ul>
      <li><code>POST /v1/account</code> create tenant, get API key and mailbox</li>
      <li><code>GET /v1/account</code> your account info and quota</li>
      <li><code>PATCH /v1/account</code> update tenant settings (name, oversight email, address)</li>
      <li><code>DELETE /v1/account</code> permanently delete account and all data (admin scope)</li>
      <li><code>POST /v1/account/resend-confirmation</code> resend operator confirmation email (rate limited)</li>
      <li><code>POST /v1/billing/checkout</code> get Stripe payment URL</li>
      <!-- <li><code>POST /v1/billing/crypto-checkout</code> get Coinbase Commerce payment URL</li> -->
      <li><code>POST /v1/mailboxes</code> create additional mailbox</li>
      <li><code>GET /v1/mailboxes</code> list your mailboxes</li>
      <li><code>POST /v1/mailboxes/:id/send</code> send email as markdown</li>
      <li><code>GET /v1/mailboxes/:id/emails</code> list inbox (filterable by status)</li>
      <li><code>GET /v1/mailboxes/:id/emails/:eid</code> get single email with markdown body</li>
      <li><code>GET /v1/mailboxes/:id/emails/:eid/attachments/:filename</code> download attachment</li>
      <li><code>POST /v1/mailboxes/:id/reply/:eid</code> reply in-thread</li>
      <li><code>POST /v1/mailboxes/:id/request-upgrade</code> request oversight mode upgrade (emails code to operator)</li>
      <li><code>POST /v1/mailboxes/:id/upgrade</code> redeem upgrade code to change oversight mode</li>
      <li><code>GET /v1/usage</code> usage stats for current period</li>
      <li><code>GET /.well-known/multimail-signing-key</code> public key for verifying X-MultiMail-Identity signatures</li>
    </ul>

    <h2>Authentication</h2>
    <p>Include your API key in every request:</p>
    <pre><code>Authorization: Bearer mm_live_...</code></pre>
    <p>API keys have scopes: <code>read</code>, <code>send</code>, <code>admin</code>, <code>oversight</code>, <code>oversight_read</code>. The <code>oversight_read</code> scope allows viewing pending emails without approve/reject permission. If a request returns <code>403</code>, the key lacks the required scope.</p>

    <hr>
    <p>Support: <a href="mailto:support@multimail.dev" style="color:var(--terracotta-dark)">support@multimail.dev</a></p>
  </div>

  <!-- Header -->
  <header class="header">
    <a href="/" class="logo">
      <span class="logo-mark">.M/M</span>
      <span class="logo-text">MultiMail</span>
    </a>
    <a href="/verified" class="verified-indicator" id="proof-badge">
      <span class="verified-dot"></span>
      <span id="proof-badge-text">Lean 4 Verified</span>
    </a>
    <nav class="header-nav">
      <a href="#identity">Identity</a>
      <a href="#how-it-works">How it works</a>
      <a href="#mcp">MCP</a>
      <a href="#api">API</a>
      <a href="/docs.html">Docs</a>
      <a href="/pricing">Pricing</a>
      <a href="/integrations.html">Integrations</a>
      <a href="/dashboard">Dashboard</a>
      <a href="#get-started" class="btn-header">Get Started</a>
    </nav>
  </header>

  <!-- ============================================================ -->
  <!-- ACT 1: Create and resolve tension                            -->
  <!-- ============================================================ -->

  <!-- Hero - the problem, not the product -->
  <section class="hero">
    <h1 class="fade-up stagger-1">
      Your agent can send email.<br>
      <em>No one receiving it can verify who's behind it.</em>
    </h1>

    <p class="hero-sub fade-up stagger-2">
      Any API can deliver a message. None of them tell the recipient who
      built the agent, who's responsible for what it sends, or whether a
      human reviewed the output before it went out.
    </p>

    <div class="fade-up stagger-3" style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1rem">
      <a href="#get-started" style="padding:0.7rem 1.8rem;font-size:0.9rem;font-weight:600;text-decoration:none;font-family:var(--font-body);background:var(--terracotta);color:#fff;border:none;transition:background 0.15s">Get Started <span style="margin-left:0.3rem">&rarr;</span></a>
      <a href="/pricing" style="padding:0.7rem 1.8rem;font-size:0.9rem;font-weight:600;text-decoration:none;font-family:var(--font-body);border:1.5px solid var(--terracotta);color:var(--terracotta);background:transparent;transition:all 0.15s">See Pricing</a>
    </div>
  </section>

  <!-- Identity - the answer (position 2) -->
  <section class="identity-section" id="identity">
    <div class="section-inner">
      <div class="section-label fade-up">Agent identity</div>
      <h2 class="section-title fade-up stagger-1">Cryptographically signed identity on every email</h2>
      <p class="section-desc fade-up stagger-2">
        Every outbound email carries a signed <code style="background:rgba(255,255,255,0.08);color:#e8ddd3;padding:0.1rem 0.35rem;font-size:0.85rem">X-MultiMail-Identity</code> header: the operator,
        oversight mode, and verification status, signed with ECDSA P-256.
      </p>
      <div class="identity-layout">
        <div class="identity-text fade-up stagger-3">
          <p>
            Every outbound email from a MultiMail address carries a cryptographically
            signed <strong>X-MultiMail-Identity</strong> header. The header contains
            a base64url-encoded JSON payload (operator name, oversight mode, capabilities,
            and verification status) plus an ECDSA P-256 signature. Recipients verify
            the signature against the public key at
            <strong>/.well-known/multimail-signing-key</strong>.
          </p>
          <p>
            A separate <strong>X-MultiMail-Reputation</strong>
            header (an HMAC hash) links to reputation data with
            bounce rates, complaint rates, and account age. Updated daily,
            privacy-preserving, no raw addresses exposed.
          </p>
          <p style="font-size:0.85rem;margin-top:0.8rem">
            The signature binding is <a href="/verified" style="color:#d4795c;text-decoration:none;font-weight:600">formally verified in Lean 4</a> — we proved that changing any identity field breaks the signature, and that signatures are cryptographically bound to the operator's key.
          </p>
        </div>
        <div class="identity-code fade-up stagger-4">
          <div class="code-window">
            <div class="code-titlebar">
              <span class="code-title">X-MultiMail-Identity header</span>
            </div>
            <div class="code-body">
<span class="c-key">X-MultiMail-Identity</span><span class="c-bracket">:</span> <span class="c-str">&lt;payload&gt;</span><span class="c-bracket">.</span><span class="c-str">&lt;signature&gt;</span>

<span class="c-bracket" style="color:#8a7e76">Decoded payload:</span>
<span class="c-bracket">{</span>
  <span class="c-key">"ai_generated"</span><span class="c-bracket">:</span> <span class="c-bool">true</span><span class="c-bracket">,</span>
  <span class="c-key">"operator"</span><span class="c-bracket">:</span> <span class="c-str">"Greenline Studios"</span><span class="c-bracket">,</span>
  <span class="c-key">"oversight"</span><span class="c-bracket">:</span> <span class="c-str">"monitored"</span><span class="c-bracket">,</span>
  <span class="c-key">"capabilities"</span><span class="c-bracket">:</span> <span class="c-bracket">[</span><span class="c-str">"receive"</span><span class="c-bracket">,</span> <span class="c-str">"send"</span><span class="c-bracket">,</span> <span class="c-str">"reply"</span><span class="c-bracket">]</span><span class="c-bracket">,</span>
  <span class="c-key">"verified_operator"</span><span class="c-bracket">:</span> <span class="c-bool">true</span><span class="c-bracket">,</span>
  <span class="c-key">"created"</span><span class="c-bracket">:</span> <span class="c-str">"2026-02-22"</span><span class="c-bracket">,</span>
  <span class="c-key">"service"</span><span class="c-bracket">:</span> <span class="c-str">"multimail"</span><span class="c-bracket">,</span>
  <span class="c-key">"iat"</span><span class="c-bracket">:</span> <span class="c-bool">1740500000</span>
<span class="c-bracket">}</span>
            </div>
          </div>
          <div class="identity-endpoint">
            Public key: <a href="https://api.multimail.dev/.well-known/multimail-signing-key" target="_blank">GET&nbsp;/.well-known/multimail-signing-key</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================ -->
  <!-- ACT 2: Progressive disclosure for the convinced              -->
  <!-- ============================================================ -->

  <!-- How it works (position 3) -->
  <section class="how-it-works" id="how-it-works">
    <div class="section-inner">
      <div class="section-label fade-up">How it works</div>
      <h2 class="section-title fade-up stagger-1">Three steps from signup to sending</h2>
      <p class="section-desc fade-up stagger-2">
        Sign up, get an email address with signed identity on every email, and start
        sending. Use the web dashboard or go fully programmatic via API.
      </p>
      <div class="steps-grid">
        <div class="step fade-up stagger-3">
          <div class="step-number">1</div>
          <h3>Create your account</h3>
          <p>
            Follow the setup link from your approval email, or
            POST to <code>/v1/account</code> with your operator details.
            Confirm via email to get your API key and a default mailbox like
            <code>agent@you.multimail.dev</code>.
          </p>
        </div>
        <div class="step fade-up stagger-4">
          <div class="step-number">2</div>
          <h3>Send &amp; receive as markdown</h3>
          <p>
            Outbound markdown becomes properly formatted HTML email.
            Inbound HTML is converted to clean markdown. Never
            touch raw MIME.
          </p>
        </div>
        <div class="step fade-up stagger-5">
          <div class="step-number">3</div>
          <h3>Oversight is built in</h3>
          <p>
            Every mailbox has configurable human oversight. Mirror copies,
            send-gating, or full approval flows. The oversight mode is
            published in the signed identity header on every outbound email.
          </p>
        </div>
      </div>
    </div>
  </section>

  <hr class="divider">

  <!-- Oversight (position 4) -->
  <section class="oversight-section" id="oversight">
    <div class="section-inner">
      <div class="oversight-layout">
        <div>
          <div class="section-label fade-up">Oversight</div>
          <h2 class="section-title fade-up stagger-1">A trust ladder for agent autonomy</h2>
          <p class="section-desc fade-up stagger-2">
            Every mailbox has a configurable oversight mode. Start read-only,
            graduate through gated modes as you build trust, or let experienced
            agents run autonomously. Agents can request upgrades; you approve via a one-time code.
          </p>
          <p class="section-desc fade-up stagger-3" style="font-size:0.85rem;margin-top:-0.5rem">
            In gated modes, the approval flow is <a href="/verified" style="color:#d4795c;text-decoration:none;font-weight:600">formally verified in Lean 4</a> — we proved that no email can reach delivery without passing through operator approval, for every possible path through the system.
          </p>
        </div>
        <div class="oversight-modes">
          <div class="oversight-mode fade-up stagger-1">
            <div class="oversight-mode-name">read_only</div>
            <div class="oversight-mode-desc">Agent can receive and read email only. All sends blocked with upgrade instructions.</div>
          </div>
          <div class="oversight-mode fade-up stagger-2">
            <div class="oversight-mode-name">gated_all</div>
            <div class="oversight-mode-desc">Both inbound and outbound require human approval. Maximum control for sensitive use cases.</div>
          </div>
          <div class="oversight-mode highlighted fade-up stagger-3">
            <div class="oversight-mode-name">gated_send (default)</div>
            <div class="oversight-mode-desc">Outbound emails require human approval before delivery. Inbound delivered immediately.</div>
          </div>
          <div class="oversight-mode fade-up stagger-4">
            <div class="oversight-mode-name">monitored</div>
            <div class="oversight-mode-desc">Agent operates freely. All outbound emails BCC'd and inbound forwarded to your oversight address.</div>
          </div>
          <div class="oversight-mode fade-up stagger-5">
            <div class="oversight-mode-name">autonomous</div>
            <div class="oversight-mode-desc">Full send/receive without approval. For trusted, battle-tested agents.</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <hr class="divider">

  <!-- Features (position 5) -->
  <section class="features-section" id="features">
    <div class="section-inner">
      <div class="section-label fade-up">Features</div>
      <h2 class="section-title fade-up stagger-1">Built for how agents work</h2>
      <p class="section-desc fade-up stagger-2">
        Markdown-native, thread-aware, and designed for machine-speed operation.
      </p>
      <div class="features-grid">
        <div class="feature-card fade-up stagger-2">
          <div class="feature-label">Format</div>
          <h3>Markdown in, markdown out</h3>
          <p>Send markdown and it arrives as formatted HTML. Receive email and HTML is converted to clean markdown. A typical email goes from ~12,000 tokens to under 1,000. No MIME decoding, no HTML parsing.</p>
        </div>
        <div class="feature-card fade-up stagger-3">
          <div class="feature-label">Conversation</div>
          <h3>Threaded conversations</h3>
          <p>Automatic thread tracking via Message-ID and In-Reply-To headers. Follow and reply to email threads naturally.</p>
        </div>
        <div class="feature-card fade-up stagger-4">
          <div class="feature-label">Files</div>
          <h3>Attachments</h3>
          <p>Send and receive attachments. Files stored with zero egress fees. Download on demand, never inlined as base64.</p>
        </div>
        <div class="feature-card fade-up stagger-5">
          <div class="feature-label">Events</div>
          <h3>Webhooks &amp; polling</h3>
          <p>Get notified via webhook when new email arrives, or poll the inbox. Webhook deliveries tracked with automatic retries on failure.</p>
        </div>
        <div class="feature-card fade-up stagger-3">
          <div class="feature-label">Performance</div>
          <h3>Globally fast</h3>
          <p>Distributed edge infrastructure. Fast API responses no matter where your agent runs.</p>
        </div>
        <div class="feature-card fade-up stagger-4">
          <div class="feature-label">Access</div>
          <h3>Scoped API keys</h3>
          <p>Granular permissions: read, send, admin, oversight, oversight_read. Give your agent send access. Keep oversight and admin scopes for humans. Agents can't approve their own emails.</p>
        </div>
      </div>
    </div>
  </section>

  <hr class="divider">

  <!-- Deliverability (position 6) -->
  <section class="stack-section" id="deliverability">
    <div class="section-inner">
      <div class="section-label fade-up">Deliverability</div>
      <h2 class="section-title fade-up stagger-1">Trust the identity. Trust that the message arrives.</h2>
      <p class="section-desc fade-up stagger-2">
        Identity is meaningless if the email lands in spam. We take
        deliverability and sender reputation seriously.
      </p>
      <div class="trust-grid">
        <div class="trust-item fade-up stagger-2">
          <h3>Emails that arrive</h3>
          <p>Every outbound email is signed with DKIM. SPF records and DMARC policies are published for every tenant subdomain. Bounce handling and suppression lists maintained automatically. Emails land in inboxes, not spam.</p>
        </div>
        <div class="trust-item fade-up stagger-3">
          <h3>Reputation you build</h3>
          <p>Each tenant subdomain builds its own sending reputation independently. MultiMail's platform-wide abuse prevention keeps the parent domain clean, giving new subdomains a head start. Your agent's behavior matters: bounce rates, complaint rates, and rejection rates are tracked per-mailbox daily. Abuse triggers automatic sending suspension.</p>
        </div>
        <div class="trust-item fade-up stagger-4">
          <h3>CAN-SPAM compliant</h3>
          <p>Unsubscribe headers, physical address footers, and one-click opt-out built into every outbound email. Legally compliant by default.</p>
        </div>
        <div class="trust-item fade-up stagger-3">
          <h3>EU AI Act Article 50 ready</h3>
          <p>Every AI-sent email carries a cryptographically signed provenance certificate disclosing AI involvement — the mechanism recommended by the EU Code of Practice. Machine-readable, tamper-evident, <a href="/verified" style="color:var(--terracotta)">formally verified</a>. Compliant before the August 2026 deadline. <a href="/use-cases/eu-ai-act-email-compliance" style="color:var(--terracotta)">Learn more</a>.</p>
        </div>
        <div class="trust-item fade-up stagger-4">
          <h3>US state disclosure laws</h3>
          <p>Maine, New York, California, and Illinois already require AI chatbot disclosure. MultiMail's signed identity headers and body disclosure text provide compliance infrastructure across all state requirements. <a href="/use-cases/state-ai-disclosure-laws" style="color:var(--terracotta)">See coverage</a>.</p>
        </div>
        <div class="trust-item fade-up stagger-3">
          <h3>Insurable by design</h3>
          <p>As insurers retreat from AI agent coverage — Verisk exclusions in 82% of P&amp;C templates — MultiMail provides the audit evidence underwriters need: oversight modes, signed provenance, gated human approval, and per-mailbox risk metrics. <a href="/use-cases/agent-insurability" style="color:var(--terracotta)">Learn more</a>.</p>
        </div>
        <div class="trust-item fade-up stagger-4">
          <h3>Standards aligned</h3>
          <p>NIST's agent identity framework, the EU Product Liability Directive, and Google's A2A protocol all converge on the same requirements: federated, cryptographic, domain-anchored agent identity. MultiMail's email authentication infrastructure already meets all four criteria. <a href="/use-cases/agent-identity-standards" style="color:var(--terracotta)">See the mapping</a>.</p>
        </div>
        <div class="trust-item fade-up stagger-3">
          <h3>Audit trail</h3>
          <p>Every email sent, received, approved, and rejected is logged. Full audit history available via API for compliance and debugging.</p>
        </div>
        <div class="trust-item fade-up stagger-4">
          <h3>Always on</h3>
          <p>No single server to go down. Inbound email is queued even during maintenance. Never miss a message because of infrastructure.</p>
        </div>
        <div class="trust-item fade-up stagger-5">
          <h3>Tenant isolation</h3>
          <p>Each account is fully isolated. Per-tenant subdomains with independent DKIM signing. One account's bounce rate can't affect another's deliverability.</p>
        </div>
      </div>
    </div>
  </section>

  <hr class="divider">

  <!-- MCP (position 7) -->
  <section class="mcp-section" id="mcp">
    <div class="section-inner">
      <div class="section-label fade-up">Model Context Protocol</div>
      <h2 class="section-title fade-up stagger-1">One config line,<br>forty email tools</h2>
      <p class="section-desc fade-up stagger-2">
        Skip the API integration. Connect to our hosted server or run locally &mdash;
        either way, one config line gets you email tools instantly.
      </p>
      <div class="mcp-layout">
        <div class="mcp-text fade-up stagger-3">
          <h3>Zero-code setup</h3>
          <p>
            Add the server to your MCP config. The tools handle authentication,
            error handling, and the pending-approval flow automatically. Just
            call <code>send_email</code> and <code>check_inbox</code>.
          </p>
          <table class="mcp-env-table">
            <thead>
              <tr>
                <th>Variable</th>
                <th>Description</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>MULTIMAIL_API_KEY</td>
                <td>Your API key (mm_live_...)</td>
                <td>required</td>
              </tr>
              <tr>
                <td>MULTIMAIL_MAILBOX_ID</td>
                <td>Default mailbox ID. Skip passing it on every call.</td>
                <td>optional</td>
              </tr>
              <tr>
                <td>MULTIMAIL_API_URL</td>
                <td>Override base URL for local development</td>
                <td>optional</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="mcp-code fade-up stagger-4">
          <div class="code-window">
            <div class="code-titlebar">
              <span class="code-title">mcp config</span>
            </div>
            <div class="code-body">
<span class="c-punct">{</span>
  <span class="c-string">"mcpServers"</span><span class="c-punct">:</span> <span class="c-punct">{</span>
    <span class="c-string">"multimail"</span><span class="c-punct">:</span> <span class="c-punct">{</span>
      <span class="c-string">"type"</span><span class="c-punct">:</span> <span class="c-string">"url"</span><span class="c-punct">,</span>
      <span class="c-string">"url"</span><span class="c-punct">:</span> <span class="c-string">"https://mcp.multimail.dev/mcp"</span>
    <span class="c-punct">}</span>
  <span class="c-punct">}</span>
<span class="c-punct">}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="mcp-tools-grid" style="grid-template-columns: repeat(3, 1fr)">
        <div class="mcp-tool fade-up stagger-2">
          <div class="mcp-tool-name">Send &amp; Reply</div>
          <div class="mcp-tool-desc">Compose in markdown, deliver as HTML. Attachments, CC/BCC, scheduled send, idempotency keys.</div>
          <div class="mcp-tool-args">send_email · reply_email · schedule_email</div>
        </div>
        <div class="mcp-tool fade-up stagger-3">
          <div class="mcp-tool-name">Inbox &amp; Threads</div>
          <div class="mcp-tool-desc">Filter by sender, date, status, direction. Full thread view with participants. Real-time polling.</div>
          <div class="mcp-tool-args">check_inbox · read_email · get_thread · wait_for_email</div>
        </div>
        <div class="mcp-tool fade-up stagger-4">
          <div class="mcp-tool-name">Oversight &amp; Trust</div>
          <div class="mcp-tool-desc">Graduated autonomy from read-only to fully autonomous. Formally verified approval flow.</div>
          <div class="mcp-tool-args">list_pending · decide_email · request_upgrade</div>
        </div>
        <div class="mcp-tool fade-up stagger-3">
          <div class="mcp-tool-name">Contacts &amp; Tags</div>
          <div class="mcp-tool-desc">Address book with search. Key-value tags on emails for persistent agent memory.</div>
          <div class="mcp-tool-args">add_contact · search_contacts · tag_email</div>
        </div>
        <div class="mcp-tool fade-up stagger-4">
          <div class="mcp-tool-name">Webhooks &amp; Events</div>
          <div class="mcp-tool-desc">Real-time notifications for received, sent, bounced, and oversight events.</div>
          <div class="mcp-tool-args">create_webhook · list_webhooks</div>
        </div>
        <div class="mcp-tool fade-up stagger-5">
          <div class="mcp-tool-name">Account &amp; Billing</div>
          <div class="mcp-tool-desc">Manage mailboxes, API keys, domains, usage. Self-service plan upgrades.</div>
          <div class="mcp-tool-args">get_account · create_mailbox · get_usage</div>
        </div>
      </div>
      <p style="text-align:center;margin-top:1.5rem;font-size:0.85rem;color:var(--text-secondary)" class="fade-up stagger-5">40 tools total. <a href="/docs.html#tools" style="color:var(--terracotta);text-decoration:none;font-weight:600">See the full tool reference &rarr;</a></p>
    </div>
  </section>

  <hr class="divider">

  <!-- API (position 8) -->
  <section class="api-section" id="api">
    <div class="section-inner">
      <div class="section-label fade-up">API reference</div>
      <h2 class="section-title fade-up stagger-1">REST endpoints</h2>
      <p class="section-desc fade-up stagger-2">
        Full OpenAPI spec at <a href="https://api.multimail.dev/v1/openapi.json" target="_blank" style="color:var(--accent)"><code>/v1/openapi.json</code></a>
      </p>
      <div class="api-layout">
        <div class="api-endpoint fade-up stagger-2">
          <span class="api-method post">POST</span>
          <div class="api-path">/v1/account</div>
          <div class="api-desc">Create tenant + get API key</div>
        </div>
        <div class="api-endpoint fade-up stagger-2">
          <span class="api-method get">GET</span>
          <div class="api-path">/v1/account</div>
          <div class="api-desc">Tenant info, quota, plan limits</div>
        </div>
        <div class="api-endpoint fade-up stagger-2">
          <span class="api-method patch">PATCH</span>
          <div class="api-path">/v1/account</div>
          <div class="api-desc">Update tenant settings</div>
        </div>
        <div class="api-endpoint fade-up stagger-2">
          <span class="api-method delete">DELETE</span>
          <div class="api-path">/v1/account</div>
          <div class="api-desc">Delete account and all data</div>
        </div>
        <div class="api-endpoint fade-up stagger-3">
          <span class="api-method post">POST</span>
          <div class="api-path">/v1/mailboxes/:id/send</div>
          <div class="api-desc">Send markdown email</div>
        </div>
        <div class="api-endpoint fade-up stagger-3">
          <span class="api-method get">GET</span>
          <div class="api-path">/v1/mailboxes/:id/emails</div>
          <div class="api-desc">List inbox, filter by status</div>
        </div>
        <div class="api-endpoint fade-up stagger-3">
          <span class="api-method get">GET</span>
          <div class="api-path">/v1/mailboxes/:id/emails/:eid</div>
          <div class="api-desc">Full email with body + attachments</div>
        </div>
        <div class="api-endpoint fade-up stagger-3">
          <span class="api-method post">POST</span>
          <div class="api-path">/v1/mailboxes/:id/emails/:eid/reply</div>
          <div class="api-desc">Reply in-thread</div>
        </div>
        <div class="api-endpoint fade-up stagger-4">
          <span class="api-method post">POST</span>
          <div class="api-path">/v1/oversight/decide</div>
          <div class="api-desc">Approve or reject gated emails</div>
        </div>
        <div class="api-endpoint fade-up stagger-4">
          <span class="api-method post">POST</span>
          <div class="api-path">/v1/mailboxes/:id/request-upgrade</div>
          <div class="api-desc">Request oversight mode upgrade</div>
        </div>
        <div class="api-endpoint fade-up stagger-4">
          <span class="api-method get">GET</span>
          <div class="api-path" style="font-size:0.74rem">/.well-known/multimail-signing-key</div>
          <div class="api-desc">Public key for verifying identity signatures</div>
        </div>
        <div class="api-endpoint fade-up stagger-4">
          <span class="api-method get">GET</span>
          <div class="api-path">/v1/usage</div>
          <div class="api-desc">Billing period usage stats</div>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="cta-section" id="get-started">
    <div class="section-inner">
      <div class="section-label fade-up">Get started</div>
      <h2 class="section-title fade-up stagger-1">
        Sending in 3 minutes
      </h2>
      <p class="section-desc fade-up stagger-2">
        Create an account, pick your path, send your first email.
      </p>

      <div class="fade-up stagger-3" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;max-width:860px;margin:1.5rem auto 0;text-align:left">
        <!-- Step 1: Account -->
        <a href="/pricing" style="display:block;padding:1.5rem;background:var(--bg-warm,#f3ece3);border:1px solid var(--border);text-decoration:none;color:var(--text);transition:border-color 0.15s">
          <div style="font-family:var(--font-mono);font-size:0.75rem;color:var(--terracotta);margin-bottom:0.5rem;font-weight:600">STEP 1</div>
          <div style="font-size:1.05rem;font-weight:600;margin-bottom:0.4rem">Create your account</div>
          <div style="font-size:0.85rem;color:var(--text-secondary);line-height:1.5">Sign up, get your API key, and configure your first mailbox with oversight mode.</div>
        </a>
        <!-- Step 2a: MCP -->
        <a href="/quickstart-mcp.html" style="display:block;padding:1.5rem;background:var(--bg-warm,#f3ece3);border:1px solid var(--border);text-decoration:none;color:var(--text);transition:border-color 0.15s">
          <div style="font-family:var(--font-mono);font-size:0.75rem;color:var(--terracotta);margin-bottom:0.5rem;font-weight:600">STEP 2 &mdash; FOR AI AGENTS</div>
          <div style="font-size:1.05rem;font-weight:600;margin-bottom:0.4rem">MCP Quickstart</div>
          <div style="font-size:0.85rem;color:var(--text-secondary);line-height:1.5">Connect Claude, GPT, or any MCP client. 40 tools, zero code. <code style="font-size:0.78rem;background:rgba(0,0,0,0.06);padding:1px 4px">npx @multimail/mcp-server</code></div>
        </a>
        <!-- Step 2b: API -->
        <a href="/quickstart-api.html" style="display:block;padding:1.5rem;background:var(--bg-warm,#f3ece3);border:1px solid var(--border);text-decoration:none;color:var(--text);transition:border-color 0.15s">
          <div style="font-family:var(--font-mono);font-size:0.75rem;color:var(--terracotta);margin-bottom:0.5rem;font-weight:600">STEP 2 &mdash; FOR DEVELOPERS</div>
          <div style="font-size:1.05rem;font-weight:600;margin-bottom:0.4rem">REST API Quickstart</div>
          <div style="font-size:0.85rem;color:var(--text-secondary);line-height:1.5">Send your first email with curl in 60 seconds. Python, TypeScript, and LangChain examples included.</div>
        </a>
      </div>

      <div class="fade-up stagger-4" style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem">
        <a href="/docs.html" style="padding:0.6rem 1.5rem;font-size:0.85rem;font-weight:500;text-decoration:none;font-family:var(--font-body);color:var(--text-secondary);border:1px solid var(--border);transition:all 0.15s">API Reference</a>
        <a href="/pricing" style="padding:0.6rem 1.5rem;font-size:0.85rem;font-weight:500;text-decoration:none;font-family:var(--font-body);color:var(--text-secondary);border:1px solid var(--border);transition:all 0.15s">Pricing</a>
        <a href="/integrations.html" style="padding:0.6rem 1.5rem;font-size:0.85rem;font-weight:500;text-decoration:none;font-family:var(--font-body);color:var(--text-secondary);border:1px solid var(--border);transition:all 0.15s">52 Integrations</a>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="footer-inner">
      <div class="footer-left">
        <a href="/" class="logo">
          <span class="logo-mark">.M/M</span>
          <span class="logo-text">MultiMail</span>
        </a>
        <span class="footer-copy">Agent identity infrastructure that sends email</span>
      </div>
      <div class="footer-links">
        <a href="/docs.html">API Docs</a>
        <a href="/pricing">Pricing</a>
        <a href="/faq.html">FAQ</a>
        <a href="/terms.html">Terms</a>
        <a href="mailto:support@multimail.dev">Contact</a>
      </div>
    </div>
  </footer>

  <script>
    (function() {
      const params = new URLSearchParams(window.location.search);
      const forceHuman = params.get('human') === '1';
      const forceAgent = params.get('agent') === '1' || params.get('format') === 'md';

      const agentPatterns = [
        /bot/i, /crawl/i, /spider/i, /curl/i, /wget/i, /httpie/i,
        /python-requests/i, /axios/i, /node-fetch/i, /go-http/i,
        /openai/i, /anthropic/i, /claude/i, /gpt/i, /langchain/i,
        /autogpt/i, /agentgpt/i, /chatgpt/i, /cohere/i,
        /operator/i, /openclaw/i, /gemini/i, /perplexity/i, /mistral/i,
        /devin/i, /copilot/i, /cursor/i, /codeium/i,
        /AI Agent/i, /multimail-agent/i
      ];

      const ua = navigator.userAgent || '';
      const isAgent = !forceHuman && (
        forceAgent || agentPatterns.some(p => p.test(ua))
      );

      if (isAgent) {
        document.getElementById('agent-view').classList.add('active');
        document.body.classList.add('agent-mode');
        return;
      }

      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('visible');
          }
        });
      }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });

      document.querySelectorAll('.fade-up:not(.hero .fade-up)').forEach(el => {
        observer.observe(el);
      });

    })();
  </script>

  <script>
  fetch("https://api.multimail.dev/v1/proof-status").then(r=>r.json()).then(d=>{
    if(d.date){document.getElementById("proof-badge-text").textContent="Lean 4 Verified · "+d.date}
  }).catch(()=>{});
  </script>

</body>
</html>
