/* Firm sign-in and two-factor screens (/login). Presentation only: the markup,
   ids and authentication logic live in index.html. */
.auth{background:#eef3f8}
.auth-brand{background:radial-gradient(900px 520px at 0% 0%,#1f6f84 0%,transparent 60%),radial-gradient(700px 600px at 100% 100%,#2a2682 0%,transparent 55%),linear-gradient(150deg,#0f1d30 0%,#15283f 55%,#123b4b 100%)}
.auth-brand::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);mask-image:linear-gradient(180deg,#000 0%,transparent 85%);pointer-events:none}
/* The wordmark image has a solid navy background (#162134). "lighten" keeps the brighter of the
   image and the panel for each pixel, so that box disappears into the gradient and the logo reads as
   transparent, while the white and blue lettering stays as it is. */
main.auth .auth-brand .official-logo{background:transparent}
.auth-brand>small{color:#9fb7c6;font-size:12px;letter-spacing:.02em}
.auth-panel{background:linear-gradient(180deg,#f7fafc 0%,#eaf1f7 100%);padding:40px 32px}
.auth-card{width:min(450px,100%);padding:38px 36px 32px;border:1px solid #dbe5ee;border-radius:20px;background:#fff;box-shadow:0 30px 70px #10233a1f,0 2px 6px #10233a0d}
.auth-card h2{font-size:28px;letter-spacing:-.03em;color:#13253a}
.auth-card .btn{min-height:46px;border-radius:10px;font-size:15px;font-weight:750;background:linear-gradient(180deg,#3b33c9,#2f29a6);box-shadow:0 10px 22px #0c645329}
.auth-card .btn:hover{background:linear-gradient(180deg,#3029ad,#28228e)}
.auth-card .btn.secondary{background:#fff;box-shadow:none}
.auth-card .field input,.auth-card .field select{min-height:46px;border-radius:10px;padding:11px 13px;border-color:#cdd8e3;background:#fbfdfe}
.auth-card .field input:focus,.auth-card .field select:focus{background:#fff}
.td-auth-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 22px;color:#53657a;font-size:13px;font-weight:700}
.td-auth-back:hover{color:#2a22b6}
.td-auth-step{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 11px;border-radius:999px;background:#e7e9f7;color:#2f29a6;font-size:12px;font-weight:800;letter-spacing:.02em}
.td-auth-step::before{content:"";width:7px;height:7px;border-radius:50%;background:#4b44d4;box-shadow:0 0 0 4px #1bb39c26}
.td-auth-trust{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px;max-width:520px}
.td-auth-trust li{display:flex;gap:12px;align-items:flex-start;color:#d6e8ee;font-size:14px;line-height:1.45}
.td-auth-trust li span{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#49c2db;color:#0f2b3f;font-size:12px;font-weight:900}
.td-auth-trust b{display:block;color:#fff;font-size:14px}
.td-mfa-qr{display:block;width:210px;max-width:100%;margin:18px auto 6px;padding:10px;border:1px solid #d9e2ea;border-radius:14px;background:#fff;box-shadow:0 10px 24px #10233a14}
.td-auth-apps{margin:8px 0 0;color:#66778b;font-size:12px;text-align:center}
.auth-card .switch-auth a{color:#53657a}
@media(max-width:850px){
  main.auth .auth-brand{display:flex;padding:26px 22px 24px;gap:14px}
  main.auth .auth-brand h1{font-size:26px}
  main.auth .auth-brand p,main.auth .auth-brand .auth-security-notice,main.auth .auth-brand .td-auth-trust,main.auth .auth-brand>small{display:none}
  main.auth .auth-brand .official-logo{max-width:220px}
  .auth-panel{padding:22px 16px 40px;align-items:start}
  .auth-card{padding:28px 22px 24px;border-radius:16px}
}
/* Signed-in account without a firm (createFirm in index.html). Firms are provisioned by USProFin;
   this screen only explains the next step, it never creates a firm. */
.td-account-chip{display:flex;gap:11px;align-items:center;margin:0 0 18px;padding:12px 14px;border:1px solid #d9e4ec;border-radius:12px;background:#f6fafc}
.td-account-chip span{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#e2e4f4;font-size:16px}
.td-account-chip small{display:block;color:#66778b;font-size:12px}
.td-account-chip b{display:block;color:#13253a;font-size:14px;word-break:break-all}
.td-link-steps{margin:0 0 18px;padding:0;list-style:none;counter-reset:step;display:grid;gap:12px}
.td-link-steps li{counter-increment:step;position:relative;padding-left:36px;color:#5a6b7e;font-size:13px;line-height:1.5}
.td-link-steps li::before{content:counter(step);position:absolute;left:0;top:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#2f29a6;color:#fff;font-size:12px;font-weight:800}
.td-link-steps b{display:block;color:#13253a;font-size:14px}
.auth-card #out.btn.secondary{margin-top:10px;color:#243246;border:1px solid #cfd7e2}