Letter with a letterhead

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Letter</title>
<style>
  body {
    font-family: serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #111827;
  }

  .letterhead,
  .footer {
    position: fixed;
    left: 0;
    right: 0;
    font-family: sans-serif;
  }

  .letterhead {
    top: 0;
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 8px;
    border-bottom: 2px solid #1d4ed8;
  }

  .letterhead .name {
    font-size: 20pt;
    font-weight: bold;
    color: #1d4ed8;
  }

  .letterhead .contact {
    font-size: 9pt;
    text-align: right;
    color: #4b5563;
  }

  .footer {
    bottom: 0;
    height: 24px;
    padding-top: 6px;
    border-top: 1px solid #d1d5db;
    font-size: 8pt;
    text-align: center;
    color: #6b7280;
  }

  .page {
    width: 100%;
    border-collapse: collapse;
  }

  .page td {
    padding: 0;
  }

  .header-space {
    height: 104px;
  }

  .footer-space {
    height: 54px;
  }

  .date {
    margin-bottom: 24px;
  }

  p {
    margin: 0 0 12px;
  }
</style>
</head>
<body>
  <div class="letterhead">
    <div class="name">Acme Corp</div>
    <div class="contact">1 Main Street, Anytown<br />hello@acme.example</div>
  </div>
  <div class="footer">Acme Corp · 1 Main Street, Anytown · acme.example</div>

  <table class="page">
    <thead><tr><td><div class="header-space"></div></td></tr></thead>
    <tfoot><tr><td><div class="footer-space"></div></td></tr></tfoot>
    <tbody><tr><td>
  <p class="date">October 28, 2026</p>
  <p>Jane Doe<br />2 Market Square<br />Anytown</p>
  <p>Dear Jane Doe,</p>
  <p>Thank you for choosing Acme Corp. This letter confirms the terms of the support agreement we discussed, which starts on November 1, 2026 and runs for twelve months.</p>
  <p>Our team will answer support requests on business days between 9:00 and 17:00. Requests sent outside these hours are answered on the next business day. Each request receives a reference number, which you can quote in any follow-up.</p>
  <p>The agreement covers up to twenty hours of work per month. Hours not used in a month do not carry over. Work beyond twenty hours is billed at the hourly rate listed in your order, and we will ask for your approval before starting it.</p>
  <p>Planned maintenance is announced at least five business days in advance. During maintenance, your website may be unavailable for up to two hours. We schedule maintenance outside business hours whenever possible.</p>
  <p>For urgent issues, such as your website being unreachable, call the support line at any time. An engineer on call will acknowledge the issue within one hour and keep you informed until it is resolved.</p>
  <p>At the end of each month, we will send you a short report listing the requests we handled, the time spent on each and the hours remaining. You can ask for a review meeting at any time to discuss the report or change the scope of the agreement.</p>
  <p>Either party may end the agreement with thirty days' written notice. If you end it, we will hand over all credentials, files and documentation related to your website within ten business days.</p>
  <p>Invoices are sent on the first business day of each month and are due within thirty days. If an invoice is not paid on time, we will contact you before taking any further step.</p>
  <p>We keep the information you share with us confidential and use it only to provide the services in this agreement. Our staff are bound by the same obligation.</p>
  <p>If any of these terms do not match your understanding, please let us know before November 1, 2026, and we will update the agreement. Otherwise, no action is needed: the agreement starts on that date.</p>
  <p>We look forward to working with you.</p>
  <p>Sincerely,</p>
  <p>The Acme Corp team</p>
    </td></tr></tbody>
  </table>
</body>
</html>