<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Welcome Onboarding | HTML Email Template</title>
    <meta
      name="description"
      content="A distinctly editorial welcome email with a ticket-style layout, checklist onboarding, and bulletproof CTA. Built for wide client support."
    />
    <style type="text/css">
      a[x-apple-data-detectors],
      #MessageViewBody a,
      a[href^="tel"],
      a[href^="sms"] {
        color: inherit !important;
        text-decoration: none !important;
        font-weight: inherit !important;
      }
    </style>
    <!--[if mso]>
      <style type="text/css">
        body,
        table,
        td {
          font-family: Segoe UI, Arial, sans-serif !important;
        }
        a {
          text-decoration: none;
        }
      </style>
    <![endif]-->
  </head>
  <body
    style="
      margin: 0;
      padding: 0;
      background-color: #0f172a;
      mso-line-height-rule: exactly;
    "
    bgcolor="#0f172a"
  >
<center>
    <!-- Preheader: hidden preview text -->
    <div
      style="
        display: none;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        mso-hide: all;
      "
    >
      Your workspace is ready. A simple 3-step checklist gets you productive
      fast.
    </div>

    <!-- Outer wrapper -->
    <table
      role="presentation"
      cellpadding="0"
      cellspacing="0"
      border="0"
      width="100%"
      style="background-color: #0f172a"
      bgcolor="#0f172a"
    >
      <tr>
        <td align="center" style="padding: 40px 16px">
          <!-- Ticket/Card container -->
          <table
            role="presentation"
            cellpadding="0"
            cellspacing="0"
            border="0"
            width="600"
            style="
              width: 100%;
              max-width: 600px;
              background-color: #fffaf0;
              border: 1px solid #111827;
              border-radius: 14px;
              overflow: hidden;
            "
            bgcolor="#fffaf0"
          >
            <!-- Ticket stub header -->
            <tr>
              <td
                bgcolor="#111827"
                style="
                  background-color: #111827;
                  color: #fff;
                  padding: 18px 20px;
                  border-bottom: 1px dashed #f59e0b;
                "
              >
                <table
                  role="presentation"
                  width="100%"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                >
                  <tr>
                    <td
                      align="left"
                      style="
                        font-family: -apple-system, BlinkMacSystemFont,
                          'Segoe UI', Roboto, Arial, sans-serif;
                        font-size: 14px;
                        letter-spacing: 1px;
                        text-transform: uppercase;
                        color: #fefce8;
                        text-align: left;
                        width: 70%;
                      "
                    >
                      Welcome Aboard
                    </td>
                    <td
                      align="right"
                      style="
                        font-family: -apple-system, BlinkMacSystemFont,
                          'Segoe UI', Roboto, Arial, sans-serif;
                        font-size: 12px;
                        color: #f59e0b;
                        text-align: right !important;
                        width: 30%;
                      "
                    >
                      Workspace
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

            <!-- Single column content -->
            <tr>
              <td style="padding: 28px 28px 28px 28px">
                <table
                  role="presentation"
                  width="100%"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                >
                  <tr>
                    <td style="padding: 0 0 8px 0">
                      <p
                        style="
                          margin: 0;
                          font-family: -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, Arial, sans-serif;
                          font-size: 12px;
                          color: #6b7280;
                          letter-spacing: 0.4px;
                          text-transform: uppercase;
                        "
                      >
                        From Acme
                      </p>
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 0 0 8px 0">
                      <h1
                        style="
                          margin: 0;
                          font-family: -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, Arial, sans-serif;
                          font-size: 28px;
                          line-height: 1.2;
                          color: #111827;
                          font-weight: 800;
                        "
                      >
                        Hi John, your workspace is ready
                      </h1>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p
                        style="
                          margin: 8px 0 0 0;
                          font-family: -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, Arial, sans-serif;
                          font-size: 16px;
                          line-height: 1.6;
                          color: #374151;
                        "
                      >
                        We keep onboarding intentionally simple. Start with the
                        checklist, and you'll be productive in minutes.
                      </p>
                    </td>
                  </tr>

                  <!-- Primary CTA (bulletproof) -->
                  <tr>
                    <td align="left" style="padding: 22px 0 2px 0">
                      <!--[if mso]>
                        <v:roundrect
                          xmlns:v="urn:schemas-microsoft-com:vml"
                          xmlns:w="urn:schemas-microsoft-com:office:word"
                          href="#"
                          style="
                            height: 48px;
                            v-text-anchor: middle;
                            width: 280px;
                          "
                          arcsize="8%"
                          strokecolor="#f59e0b"
                          fillcolor="#f59e0b"
                        >
                          <w:anchorlock />
                          <center
                            style="
                              color: #111827;
                              font-family: Segoe UI, Arial, sans-serif;
                              font-size: 16px;
                              font-weight: 700;
                              letter-spacing: 0.3px;
                            "
                          >
                            Start Onboarding
                          </center>
                        </v:roundrect>
                      <![endif]-->
                      <!--[if !mso]> -->
                      <a
                        href="#"
                        target="_blank"
                        style="
                          display: inline-block;
                          background-color: #f59e0b;
                          border: 1px solid #f59e0b;
                          color: #111827;
                          text-decoration: none;
                          font-family: -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, Arial, sans-serif;
                          font-size: 16px;
                          font-weight: 800;
                          letter-spacing: 0.3px;
                          padding: 14px 24px;
                          border-radius: 8px;
                          mso-padding-alt: 0;
                        "
                        >Start Onboarding</a
                      >
                      <!--<![endif]-->
                    </td>
                  </tr>

                  <!-- Secondary text link -->
                  <tr>
                    <td style="padding: 10px 0 0 2px">
                      <p
                        style="
                          margin: 0;
                          font-family: -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, Arial, sans-serif;
                          font-size: 13px;
                          color: #6b7280;
                        "
                      >
                        Prefer to watch first?
                        <a
                          href="#"
                          target="_blank"
                          style="color: #b45309; text-decoration: underline"
                          >See a 2-minute overview</a
                        >
                      </p>
                    </td>
                  </tr>

                  <!-- Checklist (unique minimal blocks) -->
                  <tr>
                    <td style="padding: 22px 0 8px 0">
                      <table
                        role="presentation"
                        width="100%"
                        cellpadding="0"
                        cellspacing="0"
                        border="0"
                        style="
                          border: 1px dashed #e5e7eb;
                          border-radius: 10px;
                          background: #fffef6;
                        "
                        bgcolor="#fffef6"
                      >
                        <tr>
                          <td style="padding: 16px">
                            <table
                              role="presentation"
                              width="100%"
                              cellpadding="0"
                              cellspacing="0"
                              border="0"
                            >
                              <tr>
                                <td valign="top" width="28" style="padding: 0">
                                  <span
                                    style="
                                      display: inline-block;
                                      width: 18px;
                                      height: 18px;
                                      border: 2px solid #111827;
                                      border-radius: 4px;
                                      background: #fff;
                                      line-height: 18px;
                                      text-align: center;
                                      font-size: 12px;
                                      color: #111827;
                                      vertical-align: top;
                                      margin-top: 2px;
                                    "
                                    >1</span
                                  >
                                </td>
                                <td style="padding: 0 0 16px 8px">
                                  <p
                                    style="
                                      margin: 0;
                                      font-family: -apple-system,
                                        BlinkMacSystemFont, 'Segoe UI', Roboto,
                                        Arial, sans-serif;
                                      font-size: 15px;
                                      color: #111827;
                                      font-weight: 700;
                                    "
                                  >
                                    Confirm your email
                                  </p>
                                  <p
                                    style="
                                      margin: 4px 0 0 0;
                                      font-family: -apple-system,
                                        BlinkMacSystemFont, 'Segoe UI', Roboto,
                                        Arial, sans-serif;
                                      font-size: 13px;
                                      color: #6b7280;
                                    "
                                  >
                                    Secure access to your workspace and enable
                                    all features.
                                  </p>
                                </td>
                              </tr>
                              <tr>
                                <td valign="top" width="28" style="padding: 0">
                                  <span
                                    style="
                                      display: inline-block;
                                      width: 18px;
                                      height: 18px;
                                      border: 2px solid #111827;
                                      border-radius: 4px;
                                      background: #fff;
                                      line-height: 18px;
                                      text-align: center;
                                      font-size: 12px;
                                      color: #111827;
                                      vertical-align: top;
                                      margin-top: 2px;
                                    "
                                    >2</span
                                  >
                                </td>
                                <td style="padding: 0 0 16px 8px">
                                  <p
                                    style="
                                      margin: 0;
                                      font-family: -apple-system,
                                        BlinkMacSystemFont, 'Segoe UI', Roboto,
                                        Arial, sans-serif;
                                      font-size: 15px;
                                      color: #111827;
                                      font-weight: 700;
                                    "
                                  >
                                    Complete your profile
                                  </p>
                                  <p
                                    style="
                                      margin: 4px 0 0 0;
                                      font-family: -apple-system,
                                        BlinkMacSystemFont, 'Segoe UI', Roboto,
                                        Arial, sans-serif;
                                      font-size: 13px;
                                      color: #6b7280;
                                    "
                                  >
                                    Name, photo, timezone, and a few
                                    preferences.
                                  </p>
                                </td>
                              </tr>
                              <tr>
                                <td valign="top" width="28" style="padding: 0">
                                  <span
                                    style="
                                      display: inline-block;
                                      width: 18px;
                                      height: 18px;
                                      border: 2px solid #111827;
                                      border-radius: 4px;
                                      background: #fff;
                                      line-height: 18px;
                                      text-align: center;
                                      font-size: 12px;
                                      color: #111827;
                                      vertical-align: top;
                                      margin-top: 2px;
                                    "
                                    >3</span
                                  >
                                </td>
                                <td style="padding: 0 0 0 8px">
                                  <p
                                    style="
                                      margin: 0;
                                      font-family: -apple-system,
                                        BlinkMacSystemFont, 'Segoe UI', Roboto,
                                        Arial, sans-serif;
                                      font-size: 15px;
                                      color: #111827;
                                      font-weight: 700;
                                    "
                                  >
                                    Take a quick tour
                                  </p>
                                  <p
                                    style="
                                      margin: 4px 0 0 0;
                                      font-family: -apple-system,
                                        BlinkMacSystemFont, 'Segoe UI', Roboto,
                                        Arial, sans-serif;
                                      font-size: 13px;
                                      color: #6b7280;
                                    "
                                  >
                                    Learn the layout and time-saving shortcuts.
                                  </p>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>

                  <!-- Tiny help strip -->
                  <tr>
                    <td style="padding: 18px 0 0 0">
                      <table
                        role="presentation"
                        width="100%"
                        cellpadding="0"
                        cellspacing="0"
                        border="0"
                        style="
                          background: #fffbeb;
                          border: 1px solid #fde68a;
                          border-radius: 8px;
                        "
                        bgcolor="#fffbeb"
                      >
                        <tr>
                          <td style="padding: 12px 14px">
                            <p
                              style="
                                margin: 0;
                                font-family: -apple-system, BlinkMacSystemFont,
                                  'Segoe UI', Roboto, Arial, sans-serif;
                                font-size: 13px;
                                color: #92400e;
                              "
                            >
                              We host office hours every Tuesday & Thursday.
                              <a
                                href="#"
                                target="_blank"
                                style="
                                  color: #b45309;
                                  text-decoration: underline;
                                "
                                >Reserve a 15-min slot</a
                              >.
                            </p>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>

                  <!-- Fallback link -->
                  <tr>
                    <td style="padding: 16px 0 0 0">
                      <p
                        style="
                          margin: 0;
                          font-family: -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, Arial, sans-serif;
                          font-size: 12px;
                          color: #9ca3af;
                        "
                      >
                        Can't click the button? Paste this into your browser:
                        <span style="color: #6b7280; word-break: break-all"
                          >https://acme.app/onboarding</span
                        >
                      </p>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

            <!-- Detachable stub footer -->
            <tr>
              <td style="border-top: 1px dashed #e5e7eb">
                <table
                  role="presentation"
                  width="100%"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                >
                  <tr>
                    <td style="padding: 16px 28px">
                      <table
                        role="presentation"
                        width="100%"
                        cellpadding="0"
                        cellspacing="0"
                        border="0"
                      >
                        <tr>
                          <td
                            align="left"
                            style="
                              font-family: -apple-system, BlinkMacSystemFont,
                                'Segoe UI', Roboto, Arial, sans-serif;
                              font-size: 12px;
                              color: #6b7280;
                            "
                          >
                            <p style="margin: 0 0 8px 0">
                              If you didn't create this account, you can safely
                              ignore this email.
                            </p>
                            <p style="margin: 0">
                              Support:
                              <a
                                href="mailto:support@acme.com"
                                style="
                                  color: #6b7280;
                                  text-decoration: underline;
                                "
                                >support@acme.com</a
                              >
                            </p>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

            <!-- Legal footer on dark strip -->
            <tr>
              <td
                bgcolor="#111827"
                style="
                  background-color: #111827;
                  color: #9ca3af;
                  padding: 18px 20px;
                "
              >
                <p
                  style="
                    margin: 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 12px;
                    line-height: 1.5;
                  "
                >
                  © 2025 Acme Inc., 123 Market Street, San Francisco, CA
                </p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
</center>
  </body>
</html>
