<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Portal.Mayfield-Lester</title>
  <style>
    :root{
      --bg:#f4f6fb;
      --card:#ffffff;
      --accent:#2563eb;
      --muted:#6b7280;
      --danger:#b91c1c;
    }
    html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,#f8fafc 0%,var(--bg) 100%);}
    .wrap{
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
      box-sizing:border-box;
    }
    .card{
      width:100%;
      max-width:420px;
      background:var(--card);
      border-radius:12px;
      box-shadow:0 8px 30px rgba(16,24,40,0.08);
      padding:28px;
      text-align:center;
    }
    .logo{
      display:flex;
      align-items:center;
      gap:12px;
      justify-content:center;
      margin-bottom:8px;
    }
    .logo .mark{
      width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#4f46e5);display:inline-flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:18px;
    }
    h1{margin:6px 0 0;font-size:20px}
    p.lead{margin:8px 0 18px;color:var(--muted);font-size:13px}
    .mock-warning{
      display:flex;
      align-items:center;
      gap:10px;
      background:#fff4f4;
      color:var(--danger);
      border:1px solid rgba(185,28,28,0.08);
      padding:10px 12px;
      border-radius:8px;
      font-size:13px;
      margin-bottom:16px;
      justify-content:center;
    }

    form {text-align:left}
    label{display:block;font-size:13px;color:#111827;margin-bottom:6px}
    .input{
      width:100%;
      box-sizing:border-box;
      padding:10px 12px;
      border-radius:8px;
      border:1px solid #e6e9ef;
      margin-bottom:12px;
      font-size:14px;
      outline:none;
    }
    .row{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:12px}
    .btn{
      width:100%;
      padding:10px 12px;
      border-radius:8px;
      border:0;
      background:var(--accent);
      color:white;
      font-weight:600;
      cursor:pointer;
      font-size:14px;
    }
    .btn:active{transform:translateY(1px)}
    .links{display:flex;justify-content:space-between;margin-top:10px;font-size:13px;color:var(--muted)}
    .links a{color:var(--accent);text-decoration:none}
    .foot{font-size:12px;color:var(--muted);text-align:center;margin-top:14px}
    .muted{color:var(--muted);font-size:13px}

    /* small footer note */
    .small{font-size:12px;color:#9ca3af;margin-top:10px}
    /* make sure nothing submits */
    .disabled-link{pointer-events:none; opacity:0.6}
  </style>
</head>
<body>
  <div class="wrap">
    <div class="card" role="region" aria-labelledby="portal-title">
      <div class="logo" aria-hidden="true">
        <div class="mark">ML</div>
        <div style="text-align:left">
          <div style="font-weight:700">Mayfield-Lester</div>
          <div style="font-size:12px;color:var(--muted);margin-top:2px">Client Portal</div>
        </div>
      </div>

      <h1 id="portal-title">Sign in</h1>
      <p class="lead">Login has been disabled.</p>

      <form id="mockForm" onsubmit="return false;" aria-describedby="mock-desc">
        <div id="mock-desc" class="small" style="margin-bottom:10px">Use the fields below to login to the UI.</div>

        <label for="username">Username</label>
        <input id="username" class="input" type="text" placeholder="user@example.com" autocomplete="off" />

        <label for="password">Password</label>
        <input id="password" class="input" type="password" placeholder="••••••••" autocomplete="off" />

        <div class="row">
          <div style="display:flex;align-items:center;gap:8px">
            <input id="remember" type="checkbox" />
            <label for="remember" style="margin:0;font-size:13px;color:var(--muted)">Remember me</label>
          </div>
          <div style="font-size:13px"><a class="disabled-link" href="#" tabindex="-1">Forgot password?</a></div>
        </div>

        <button id="submitBtn" class="btn" type="button">Sign in</button>
      </form>

      <div class="foot">
        <div class="muted">Sign in has been disabled.</div>
        <div style="margin-top:8px" class="small">https://portal.mayfield-lester.com</div>
      </div>
    </div>
  </div>

</body>
</html>