/* The payment illustration lives inside the original black machine screen. */
#hero #screen[data-declic-payments] .declic-payments {
  --payment-stripe: #635bff;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  min-height: 0;
  max-height: var(--payments-room, 44%);
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 calc(10 * var(--r));
  font-family: Geist, geistSans, Arial, sans-serif;
  pointer-events: auto;
}
#hero #screen:not([data-state="standby"]) .declic-payments { display: none; }
#hero #screen .declic-payments__header {
  display: none;
  flex: none;
  justify-content: flex-end;
  margin: 0 0 calc(7 * var(--r));
}
#hero #screen .declic-payments__label {
  color: rgba(242, 241, 236, .47);
  font: 400 calc(9 * var(--r))/calc(12 * var(--r)) "Geist Mono", geistMono, monospace;
  letter-spacing: .045em;
}
#hero #screen .declic-payments__list {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--r));
  min-height: 0;
  margin: 0;
  padding: 0 calc(2 * var(--r)) calc(3 * var(--r));
  overflow: auto;
  list-style: none;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
#hero #screen .declic-payments__list::-webkit-scrollbar { display: none; }
#hero #screen .declic-payments__card {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: calc(11 * var(--r));
  box-sizing: border-box;
  min-width: 0;
  padding: calc(10 * var(--r)) calc(12 * var(--r));
  border: 1px solid rgba(242, 241, 236, .12);
  border-radius: calc(9 * var(--r));
  background: linear-gradient(115deg, rgba(99, 91, 255, .065), rgba(242, 241, 236, .035) 58%);
  box-shadow: 0 calc(3 * var(--r)) calc(8 * var(--r)) rgba(0, 0, 0, .14);
  animation: declic-payment-in 420ms cubic-bezier(.2, .75, .3, 1) both;
}
#hero #screen .declic-payments__card.is-leaving {
  animation: declic-payment-out 260ms ease-in both;
}
#hero #screen .declic-payments__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(29 * var(--r));
  height: calc(29 * var(--r));
  margin-top: calc(1 * var(--r));
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: calc(8 * var(--r));
  background: #635bff;
  color: #fff;
  animation: declic-payment-glow 2.7s ease-out 1;
}
#hero #screen .declic-payments__icon img { display: block; width: calc(21 * var(--r)); height: calc(21 * var(--r)); object-fit: contain; filter: brightness(0) invert(1); }
#hero #screen .declic-payments__message {
  min-width: 0;
  margin: 0;
  color: rgba(242, 241, 236, .83);
  font-size: calc(13 * var(--r));
  font-weight: 400;
  line-height: calc(18 * var(--r));
  overflow-wrap: break-word;
  text-wrap: pretty;
}
#hero #screen .declic-payments__amount {
  color: #f5f2ed;
  font-weight: 600;
  white-space: nowrap;
}
#hero #screen .declic-payments__sender {
  display: block;
  margin-top: calc(3 * var(--r));
  color: rgba(242, 241, 236, .47);
  font-size: calc(10 * var(--r));
  line-height: calc(14 * var(--r));
}
#hero #screen .declic-payments__email {
  font-family: "Geist Mono", geistMono, monospace;
  color: rgba(242, 241, 236, .6);
  white-space: nowrap;
}
#hero #screen .declic-payments[data-paused] *,
#hero #screen .declic-payments[data-static] * { animation: none; }
@keyframes declic-payment-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes declic-payment-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes declic-payment-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(99, 91, 255, 0); }
  25% { box-shadow: 0 0 12px rgba(99, 91, 255, .12); }
}
@media (max-width: 379px) {
  #hero #screen .declic-payments__card { gap: calc(8 * var(--r)); padding: calc(8 * var(--r)) calc(9 * var(--r)); }
  #hero #screen .declic-payments__icon { width: calc(25 * var(--r)); height: calc(25 * var(--r)); }
  #hero #screen .declic-payments__message { font-size: calc(12 * var(--r)); line-height: calc(17 * var(--r)); }
}
@media (prefers-reduced-motion: reduce) {
  #hero #screen .declic-payments *,
  #hero #screen .declic-payments__card.is-leaving { animation: none; transition: none; transform: none; }
}