/* Email-first sign-up (17 Oct): the confirm line and panel in the app
   (v13-confirm.js), and the demo's invitation card (v13-demo-invite.js). */

/* ---- the line at the top of the page */
.vx-confirm-line{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;margin:0 0 12px;border-radius:14px;font-size:13.5px;line-height:1.4;
  color:var(--text,#16233a);background:color-mix(in srgb,#f2b33d 20%,var(--surface,#fff));
  border:1px solid color-mix(in srgb,#f2b33d 45%,transparent)}
.vx-cl-ico{font-size:16px;flex:none}
.vx-cl-text{flex:1;min-width:0;overflow-wrap:anywhere}
.vx-confirm-line button{flex:none;font:inherit;cursor:pointer;border:0;border-radius:9px}
.vx-cl-go{font-weight:700;padding:6px 11px;background:var(--surface,#fff);color:var(--text,#16233a);box-shadow:0 0 0 1px color-mix(in srgb,var(--text,#16233a) 18%,transparent)}
.vx-cl-x{width:30px;height:30px;background:transparent;color:var(--muted,#5b6d7e);font-size:14px}
.vx-cl-x:hover{background:color-mix(in srgb,var(--text,#16233a) 8%,transparent)}

/* ---- the panel */
.vx-confirm-veil{position:fixed;inset:0;z-index:400;background:rgba(10,20,40,.45);display:grid;place-items:center;padding:12px}
.vx-confirm-sheet{width:100%;max-width:440px;box-sizing:border-box;border-radius:22px;padding:22px 20px 18px;
  background:var(--surface,#fff);color:var(--text,#16233a);box-shadow:0 30px 70px -20px rgba(0,0,0,.5);
  animation:vx-sheet-in .6s cubic-bezier(.16,.84,.3,1)}
@keyframes vx-sheet-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.vx-confirm-sheet h2{margin:0;font-size:19px;line-height:1.3;font-weight:800}
.vx-confirm-sheet p{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted,#5b6d7e)}
.vx-confirm-code{margin-top:14px;width:100%;box-sizing:border-box;padding:12px;border-radius:12px;font:inherit;font-size:22px;
  letter-spacing:.35em;text-align:center;color:var(--text,#16233a);background:var(--surface,#fff);
  border:1px solid color-mix(in srgb,var(--text,#16233a) 22%,transparent)}
.vx-confirm-code::placeholder{letter-spacing:normal;font-size:16px;opacity:.55}
.vx-confirm-code:focus{outline:3px solid color-mix(in srgb,var(--v-accent,#1E86C8) 40%,transparent)}
.vx-confirm-err{min-height:1.2em;color:#b4234e!important;font-size:13.5px!important}
.vx-confirm-ok{display:block;width:100%;margin-top:8px;padding:12px;border:0;border-radius:12px;font:inherit;font-weight:750;font-size:15px;
  color:var(--v-accent-ink,#fff);background:var(--v-accent,#1E86C8);cursor:pointer}
.vx-confirm-ok:disabled{opacity:.6}
.vx-confirm-foot{text-align:center;font-size:13px!important;margin-top:12px!important}
.vx-confirm-foot button{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
@media (max-width:700px){.vx-confirm-veil{place-items:end center}}
@media (prefers-reduced-motion:reduce){.vx-confirm-sheet{animation:none}}

/* ---- the demo's invitation */
.vx-demo-invite{position:fixed;right:28px;bottom:28px;width:360px;z-index:300;box-sizing:border-box;border-radius:20px;padding:20px 20px 18px;
  background:var(--surface,#fff);color:var(--text,#16233a);
  box-shadow:0 24px 60px -18px rgba(16,30,60,.45),0 0 0 1px color-mix(in srgb,var(--text,#16233a) 10%,transparent);
  opacity:0;transform:translateY(16px);transition:opacity .9s cubic-bezier(.16,.84,.3,1),transform .9s cubic-bezier(.16,.84,.3,1)}
.vx-demo-invite.is-in{opacity:1;transform:none}
.vx-demo-invite.is-leaving{opacity:0;transform:translateY(12px);transition-duration:.25s}
.vx-di-row{display:flex;gap:12px;align-items:flex-start}
.vx-di-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;
  background:color-mix(in srgb,var(--v-accent,#1E86C8) 18%,var(--surface,#fff))}
.vx-di-title{margin:0;font-weight:800;font-size:17px;line-height:1.25}
.vx-di-sub{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--muted,#5b6d7e)}
.vx-di-actions{display:flex;gap:8px;margin-top:14px}
.vx-di-actions a,.vx-di-actions button{font:inherit;font-size:15px;padding:11px 14px;border-radius:12px;text-align:center;text-decoration:none;cursor:pointer;border:0}
.vx-di-start{flex:1;font-weight:750;color:var(--v-accent-ink,#fff)!important;background:var(--v-accent,#1E86C8)}
.vx-di-later{font-weight:650;color:var(--text,#16233a);background:color-mix(in srgb,var(--v-accent,#1E86C8) 16%,var(--surface,#fff))}
@media (max-width:700px){.vx-demo-invite{left:12px;right:12px;width:auto;bottom:calc(84px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.vx-demo-invite{transition:none;transform:none}}