/* ============================================================
   Cadence — Interactive Demo · auth screens (login, reset, invite)
   ============================================================ */
:root{--ink:#10131c;--ink-soft:#42475c;--muted:#878da3;--line:#e8ecf3;--brand:#3b5bf6;--brand-ink:#2740c4;--brand-soft:#ebeffe;--accent:#7c5cf0;--green:#15a06a;--surface-2:#fafbfe}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:'Inter',system-ui,'Segoe UI',Arial,sans-serif;color:var(--ink);background:#f4f6fb;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}
.brandside{position:relative;overflow:hidden;background:linear-gradient(150deg,#2740c4,#3b5bf6 46%,#7c5cf0);color:#fff;padding:54px 56px;display:flex;flex-direction:column}
.brandside::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 50% at 85% 12%,rgba(255,255,255,.16),transparent 70%),radial-gradient(42% 46% at 8% 92%,rgba(255,255,255,.12),transparent 70%)}
.brandside>*{position:relative}
.logo-row{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;letter-spacing:-.3px}
.logo-row .lm{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center}
.logo-row .lm svg{width:22px;height:22px}
.logo-row small{display:block;font-size:11px;font-weight:500;opacity:.82;letter-spacing:.2px}
.brandside h1{font-size:38px;line-height:1.1;letter-spacing:-1.4px;font-weight:800;margin:auto 0 18px}
.brandside p.sub{font-size:16px;line-height:1.6;opacity:.92;margin:0 0 26px;max-width:440px}
.bfeat{display:flex;flex-direction:column;gap:13px}
.bfeat .li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;opacity:.96}
.bfeat .li svg{width:20px;height:20px;flex:none;margin-top:1px;stroke:#fff;opacity:.92}
.brandside .foot{margin-top:auto;font-size:12px;opacity:.8;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.brandside .foot a{text-decoration:underline;text-underline-offset:2px}
.formside{display:flex;align-items:center;justify-content:center;padding:40px 28px}
.card{width:100%;max-width:410px}
.card h2{font-size:25px;letter-spacing:-.6px;margin:0 0 6px}
.card .lead{color:var(--ink-soft);font-size:14.5px;margin:0 0 24px}
.demo-note{display:flex;gap:10px;background:var(--brand-soft);border:1px solid #d8ddfc;color:var(--brand-ink);border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.5;margin-bottom:22px}
.demo-note svg{width:18px;height:18px;flex:none;stroke:var(--brand-ink);margin-top:1px}
.success{display:flex;gap:11px;background:#e4f6ee;border:1px solid #b8e6cd;color:#15633f;border-radius:12px;padding:14px 16px;font-size:13px;line-height:1.55;margin-bottom:22px}
.success svg{width:18px;height:18px;stroke:var(--green);flex:none;margin-top:1px}
.invite-role{display:inline-flex;align-items:center;gap:8px;background:var(--brand-soft);color:var(--brand-ink);border-radius:20px;padding:5px 13px;font-size:12.5px;font-weight:700;margin-bottom:20px}
.fld{margin-bottom:15px}
.fld .lr{display:flex;justify-content:space-between;align-items:baseline}
.fld label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.fld .forgot{font-size:12px;font-weight:600;color:var(--brand-ink)}
.fld input{width:100%;border:1px solid var(--line);background:var(--surface-2);border-radius:11px;padding:12px 14px;font:inherit;font-size:14px;outline:none;transition:.15s}
.fld input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px var(--brand-soft)}
.hint{font-size:11.5px;color:var(--muted);margin-top:6px}
.recap{display:flex;align-items:center;gap:11px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:12px 14px;margin-bottom:20px;font-size:13px;color:var(--ink-soft)}
.recap .chk{width:24px;height:24px;border:2px solid #c7ccd9;border-radius:5px;cursor:pointer;display:grid;place-items:center;transition:.15s}
.recap .chk.on{background:var(--green);border-color:var(--green)}
.recap .chk svg{width:15px;height:15px;stroke:#fff;opacity:0;transition:.15s}
.recap .chk.on svg{opacity:1}
.recap .rc{margin-left:auto;text-align:right;font-size:9px;color:var(--muted);line-height:1.3}
.btn-signin{width:100%;border:0;background:var(--ink);color:#fff;font:inherit;font-weight:600;font-size:15px;padding:14px;border-radius:11px;cursor:pointer;transition:.18s;display:flex;align-items:center;justify-content:center;gap:9px}
.btn-signin:hover{background:#24262f}
.btn-signin.brand{background:var(--brand)}.btn-signin.brand:hover{background:var(--brand-ink)}
.who-as{display:flex;align-items:center;gap:11px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 13px;margin-top:14px;cursor:pointer;transition:.16s;width:100%;font:inherit;text-align:left}
.who-as:hover{border-color:var(--brand);box-shadow:0 8px 20px -14px rgba(59,91,246,.8);transform:translateY(-2px)}
.who-as .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.who-as b{font-size:13.5px;display:block;line-height:1.2}.who-as span{font-size:11.5px;color:var(--muted)}
.who-as .go{margin-left:auto;color:var(--muted)}
.backlink{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);margin-top:24px}
.backlink:hover{color:var(--ink)}
.sub-links{margin-top:18px;font-size:13px;color:var(--muted)}
.sub-links a{color:var(--brand-ink);font-weight:600}
@media(max-width:880px){.wrap{grid-template-columns:1fr}.brandside{display:none}.formside{padding:48px 22px}}