/* Howard Leasing - auth pages (login / verify).
   Mirrors the Wild Coast auth-card layout; neutral background (no mint/florals),
   Howard brand red accent, logo-forward. */
:root{
  --bg:#ffffff;          /* card */
  --page-bg:#f4f5f6;     /* neutral fallback under the brand-tint gradient (see body) */
  --text:#3a3a3a;
  --muted:#6b7177;
  --border:#d9dde1;
  --accent:#c30024;      /* Howard brand red */
  --accent-h:#9c001d;
  --error:#b5453b;
  --radius:8px;
  --heading-letter-spacing:0.02em;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100vh}
body{
  background-color:var(--page-bg);
  /* subtle diagonal brand-tint: neutral greys easing into a faint Howard-red wash
     bottom-right. Fixed so it fills the viewport without tiling on scroll. */
  background-image:linear-gradient(135deg,#f7f8fa 0%,#f1f2f4 55%,#f6eced 100%);
  background-attachment:fixed;
  color:var(--text);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.auth-shell{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.auth-card{
  background:var(--bg);
  padding:clamp(28px,5vw,44px);
  max-width:420px;width:100%;
  border-radius:12px;
  box-shadow:0 6px 24px rgba(0,0,0,0.06),0 2px 4px rgba(0,0,0,0.04);
}
.auth-card .brand-logo{text-align:center;margin-bottom:22px}
.auth-card .brand-logo img{max-width:280px;width:100%;height:auto;display:inline-block}
.auth-card .lede{
  color:var(--muted);font-size:0.95rem;margin:0 0 26px;text-align:center;
}
.auth-card form{margin-top:4px}
.auth-card label{display:block;margin-bottom:16px}
.auth-card label > span{
  display:block;font-size:0.78rem;color:var(--muted);
  margin-bottom:6px;letter-spacing:0.05em;text-transform:uppercase;
}
.auth-card input[type=email],
.auth-card input[type=text],
.auth-card input[type=tel]{
  width:100%;padding:12px 13px;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text);font:inherit;font-size:1rem;transition:border-color .15s;
}
.auth-card input:focus{outline:none;border-color:var(--accent)}
.auth-card button{
  width:100%;padding:13px;background:var(--accent);color:#fff;border:none;
  border-radius:var(--radius);font:inherit;font-size:0.98rem;font-weight:600;
  letter-spacing:0.04em;cursor:pointer;margin-top:4px;transition:background .15s;
}
.auth-card button:hover:not(:disabled){background:var(--accent-h)}
.auth-card button:disabled{opacity:.5;cursor:wait}
.auth-card .alt-link{margin-top:20px;text-align:center;font-size:0.85rem;color:var(--muted)}
.auth-card .alt-link a{color:var(--accent)}
.auth-card .alert{margin:0 0 18px;padding:11px 14px;border-radius:var(--radius);font-size:0.92rem;border:1px solid}
.auth-card .alert.error{background:#FBE9E7;color:var(--error);border-color:#F0C0BB}
/* 6-box OTP (kept from Howard; styled to match the card) */
.otp-row{display:flex;gap:8px;justify-content:space-between;margin-bottom:18px}
.otp-row input{
  width:48px;height:58px;text-align:center;font-size:1.5rem;
  border:1px solid var(--border);border-radius:var(--radius);font-feature-settings:"tnum";
}
.otp-row input:focus{outline:none;border-color:var(--accent)}