:root {
  --bell-blue: #0055a5;
  --bell-blue-dark: #004a91;
  --bell-blue-light: #e6eef7;
  --bell-text-dark: #1a1a1a;
  --bell-text-mid: #555;
  --bell-border: #d0d0d0;
  --bell-bg: #f5f5f5;
  --radius: 4px;
  --shadow: 0 2px 10px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 4px 24px rgb(0 0 0 / 0.15);
  --max-card-width: 320px;
  --max-success-width: 360px;
  --header-height-desktop: 56px;
  --header-height-mobile: 72px;
  --chat-size: 56px;
  --transition-fast: 150ms;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; }
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--bell-text-dark);
  background: var(--bell-bg);
  line-height:1.4;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; height:auto; }
a { color: var(--bell-blue); text-decoration:none; font-size:0.875rem; }
a:hover, a:focus { text-decoration:underline; }
button { font-family:inherit; cursor:pointer; }
input, button, select, textarea { font-size:1rem; }
.page-wrapper { min-height:100%; display:flex; flex-direction:column; }
header.site-header {
  width:100%; background:var(--bell-blue); color:#fff;
  height:var(--header-height-desktop);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.5rem;
}
.header-logo {
  height: 30px; /* adjust as needed */
}
.login-logo {
  display: block;
  margin: 0 0 1rem 0;
  height: 40px; /* adjust as needed */
}
header.site-header .brand { font-size:1.75rem; font-weight:700; letter-spacing:-0.5px; line-height:1; }
header.site-header nav { display:flex; align-items:center; gap:1rem; font-size:0.875rem; }
header.site-header nav a { color:#fff; }
header.site-header nav .divider { opacity:0.5; pointer-events:none; }
main { flex:1; width:100%; display:grid; place-items:center; padding:4rem 1rem 6rem; }
.card {
  width:100%; max-width:var(--max-card-width);
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:2.5rem 2rem 3rem; text-align:left;
}
.card h1.brand { margin:0 0 0.25rem; font-size:2.5rem; color:var(--bell-blue); line-height:1; }
.card h2 { margin:0 0 1.5rem; font-size:1.125rem; font-weight:600; }
.form-group { margin-bottom:1rem; }
label { display:block; margin-bottom:0.25rem; font-size:0.875rem; color:var(--bell-text-mid); }
input[type="text"], input[type="email"], input[type="password"] {
  width:100%; padding:0.75rem 0.75rem;
  border:1px solid var(--bell-border);
  border-radius:var(--radius); background:#fff;
}
input:focus { outline:2px solid var(--bell-blue); outline-offset:0; }
.password-wrapper { position:relative; }
.password-wrapper .toggle-password {
  position:absolute; top:50%; right:0.75rem; transform:translateY(-50%);
  background:none; border:none; padding:0; line-height:1; font-size:1.25rem; color:var(--bell-text-mid);
}
.password-wrapper .toggle-password:focus { outline:2px solid var(--bell-blue); border-radius:50%; }
.remember-row { display:flex; align-items:center; gap:0.5rem; margin:0.5rem 0 1.5rem; font-size:0.875rem; }
.remember-row input[type="checkbox"] {
  width:16px; height:16px; margin:0; cursor:pointer; accent-color:var(--bell-blue);
}
.primary-btn {
  width:100%; padding:0.9rem 1.5rem; border:none; border-radius:999px;
  background:var(--bell-blue); color:#fff; font-size:1rem; font-weight:600;
  transition:background var(--transition-fast) ease;
}
.primary-btn:hover, .primary-btn:focus {
  background:var(--bell-blue-dark); outline:none;
}
.aux-links { margin-top:1.5rem; display:grid; gap:0.5rem; }
.aux-links a { font-size:0.875rem; font-weight:600;}
.captcha-note { margin-top:1.75rem; font-size:0.75rem; color:var(--bell-text-mid); line-height:1.2; }
.success-card {
  width:100%; max-width:var(--max-success-width);
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:4rem 2rem 5rem; text-align:center;
}
.success-card .checkmark { width:96px; height:96px; margin:0 auto 2rem; }
.success-card h1 { margin:0 0 0.5rem; font-size:2.5rem; color:var(--bell-blue); line-height:1; }
.success-card p { margin:0; font-size:1.125rem; font-weight:600; }
footer.site-footer { width:100%; padding:3rem 1rem 5rem; text-align:center; font-size:0.8125rem; color:var(--bell-text-mid); }
footer.site-footer nav { display:flex; flex-wrap:wrap; gap:0.75rem 1.5rem; justify-content:left; margin-bottom:1rem; }
footer.site-footer nav a { font-size:0.8125rem; justify-content: left; }
footer.site-footer div { text-align: left; }
footer.site-footer nav a { position: relative; padding: 0 0.75rem;}

footer.site-footer nav a:not(:last-child)::after { content: "|"; position: absolute; right: 0; color: #999; }
.chat-button {
  position:fixed; bottom:1.5rem; right:1.5rem;
  width:var(--chat-size); height:var(--chat-size);
  border-radius:50%; background:var(--bell-blue); color:#fff;
  display:grid; place-items:center; box-shadow:var(--shadow); border:none;
}
.chat-button:hover, .chat-button:focus { background:var(--bell-blue-dark); }
.chat-button svg { width:60%; height:60%; }
.screen { display:none; }
.screen.active { display:block; }
@media (max-width: 600px) {
  :root { --chat-size:64px; }
  header.site-header { height:var(--header-height-mobile); padding:0 1rem; }
  header.site-header .brand { font-size:2rem; }
  header.site-header nav { font-size:1rem; gap:0.75rem; }
  main { padding:3rem 1rem 7rem; }
  .card { max-width:420px; padding:3rem 2rem 4rem; }
  .success-card { max-width:420px; padding:5rem 2rem 6rem; }
  .success-card .checkmark { width:120px; height:120px; margin-bottom:2.5rem; }
  .success-card h1 { font-size:3rem; }
  .success-card p { font-size:1.25rem; }
  footer.site-footer { padding-bottom:7rem; }
}