/* Transactional card motion. Scoped so these names don't restyle the other cards. */

.tx-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:transparent;
  font-family:"Work Sans",sans-serif;
  color:#16182A;
}
.tx-stage .win{
  position:absolute;
  left:212px;
  top:150px;
  width:760px;
  height:440px;
  border-radius:22px;
  background:#FFFFFF;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(20,48,44,.06),0 30px 70px -34px rgba(20,48,44,.45),0 0 0 1px rgba(20,48,44,.04);
}
.tx-stage .flip{backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-origin:50% 50%}
.tx-stage .hdr{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:76px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 24px;
  box-shadow:inset 0 -1px 0 #E7ECEB;
}
.tx-stage .ttl{
  font-family:"Archivo",sans-serif;
  font-stretch:112%;
  font-weight:650;
  font-size:22px;
  letter-spacing:-.015em;
  color:#14302C;
}
.tx-stage .badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:26px;
  padding:0 11px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
  transition:background-color .3s ease,color .3s ease;
}
.tx-stage .badge .tx{transition:opacity .2s ease,filter .2s ease}
.tx-stage .body{
  position:absolute;
  left:0;
  right:0;
  top:76px;
  bottom:0;
  background-image:radial-gradient(rgba(20,48,44,.09) 1px,transparent 1px);
  background-size:16px 16px;
  background-color:#FBFCFC;
}
.tx-stage .pill{
  position:absolute;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 14px 0 8px;
  border-radius:999px;
  background:#FFFFFF;
  font-size:13.5px;
  font-weight:600;
  color:#14302C;
  box-shadow:0 1px 2px rgba(20,48,44,.08),0 0 0 1px #E7ECEB;
  white-space:nowrap;
}
.tx-stage .pill .ic{width:22px;height:22px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.tx-stage .stem{position:absolute;width:1.5px;background:#CBD5D3}
.tx-stage .msg{position:absolute;border-radius:18px;background:#FFFFFF;transition:box-shadow .3s ease,transform .3s ease}
.tx-stage .msg .lbl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#6E7D7A}
.tx-stage .msg .txt{font-size:16.5px;line-height:1.5;color:#1D3531}
.tx-stage .btn{
  position:absolute;
  height:40px;
  padding:0 18px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  white-space:nowrap;
  transition:background-color .3s ease,color .3s ease,transform .15s ease,box-shadow .3s ease,opacity .3s ease;
}
.tx-stage .caret{
  display:inline-block;
  width:1.6px;
  height:17px;
  margin:0 1px;
  vertical-align:-3px;
  background:#1F7A6F;
  animation:tx-blink 1s steps(1) infinite;
}
@keyframes tx-blink{50%{opacity:0}}
.tx-stage .ins{background:rgba(77,184,170,.2);border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.tx-stage .cursor{
  position:absolute;
  width:0;
  height:0;
  z-index:20;
  pointer-events:none;
  transition:left .9s cubic-bezier(.65,0,.35,1),top .9s cubic-bezier(.65,0,.35,1),opacity .3s ease;
}
.tx-stage .cring{
  position:absolute;
  left:-16px;
  top:-16px;
  width:32px;
  height:32px;
  border-radius:999px;
  background:rgba(77,184,170,.38);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s ease;
}
.tx-stage .fade{transition:opacity .4s ease,transform .55s cubic-bezier(.2,.8,.2,1),filter .4s ease}