:root{--font:'Open Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--bg:#F6F7F9;--surface:#fff;--text:#1A1D23;--text-2:#5B6270;--line:#CDD2DB;--indigo:#1F236B;--indigo-hover:#2C3183;--indigo-80:#1F236B;--neg:#9E1923;--neg-bg:#FDEBED;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);font-size:14px;line-height:20px;color:var(--text);background:var(--bg)}
.wrap{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px)}
.brand{background:#1F236B;color:#fff;padding:56px 48px;display:flex;flex-direction:column;justify-content:flex-end}
.brand .wordmark{width:min(320px,80%);height:auto;margin-bottom:18px}
.product{font-size:24px;line-height:32px;font-weight:600;margin:0 0 10px}
.product span{font-weight:400;opacity:.75}
.lede{max-width:40ch;opacity:.8;margin:0;font-size:15px;line-height:24px}
.card{background:var(--surface);padding:56px 40px;display:flex;flex-direction:column;justify-content:center}
h1{font-size:24px;line-height:32px;font-weight:600;margin:0 0 6px}
.hint{color:var(--text-2);margin:0 0 24px;max-width:44ch}
label{display:block;font-weight:600;margin:14px 0 6px}
input{width:100%;height:40px;border:1px solid var(--line);border-radius:6px;padding:0 12px;font:inherit;color:inherit;background:var(--surface)}
input:focus-visible,button:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
button{margin-top:22px;width:100%;height:40px;border:none;border-radius:6px;background:var(--indigo);color:#fff;font:inherit;font-weight:600;letter-spacing:.03em;cursor:pointer}
button:hover{background:var(--indigo-hover)} button[disabled]{opacity:.6;cursor:progress}
.error{margin:14px 0 0;padding:10px 12px;border-left:4px solid #C21E2A;background:var(--neg-bg);color:var(--neg)}
@media (max-width:800px){.wrap{grid-template-columns:1fr}.brand{padding:28px 24px}.brand .lede{display:none}.card{padding:32px 24px;justify-content:flex-start}}

.instance{margin:0 0 18px;padding:8px 12px;border:1px solid var(--line);border-left:3px solid var(--indigo);
  border-radius:6px;background:rgba(0,0,0,.02);color:var(--text-2);font-size:12.5px}
.instance strong{color:var(--text);font-weight:600;word-break:break-all}
.instance.mock{border-left-color:#A16207;background:rgba(161,98,7,.06)}

.brand .product{font-size:18px;font-weight:400;opacity:.8;margin:0 0 10px}