/* pymnts: shared brand layer on top of the upstream component system. */
:root {
  --pymnts-ink: #252331;
  --pymnts-muted: #706a7c;
  --pymnts-purple: #6d42e5;
  --pymnts-line: #e6e3ed;
  --pymnts-paper: #f7f7fa;
  --pymnts-focus: #916bf0;
}
body.pymnts {
  margin: 0;
  color: var(--pymnts-ink);
  background: var(--pymnts-paper);
  font-family: InterDisplay, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.pymnts ::selection { background: #e2d6fc; color: #34235c; }
.pymnts :where(button, a, input, select, textarea, [role="button"]):focus-visible {
  outline: 3px solid var(--pymnts-focus);
  outline-offset: 3px;
}
.pymnts :where(h1, h2, h3) { letter-spacing: -.035em; }
.pymnts :where(button, input, select, textarea) { font-family: inherit; }
.pymnts .primary-gradient-button:not(:disabled) {
  background-image: none;
  background-color: var(--pymnts-purple);
  box-shadow: 0 1px 2px #2b165314;
  border-radius: 10px;
}
.pymnts .primary-gradient-button:not(:disabled):hover { background-color: #5a32ca; }
.pymnts .primary-gradient-button:disabled { opacity: .55; cursor: not-allowed; }
.pymnts :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
  border-radius: 9px;
  accent-color: var(--pymnts-purple);
}
.pymnts :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--pymnts-purple); }
.pymnts table { font-variant-numeric: tabular-nums; }
.pymnts th { font-weight: 600; letter-spacing: .01em; }
.pymnts .pymnts-workspace { background-color: var(--pymnts-paper); }
.pymnts-workspace :where(table) { background: #fff; }
.pymnts-workspace :where(thead) { background: #f6f4fa; color: #706a7c; }
.pymnts-workspace :where(tbody tr):hover { background: #faf8ff; }
.pymnts-workspace :where(td, th) { border-color: var(--pymnts-line); }
.pymnts-workspace :where(.rounded-lg.border, .rounded-xl.border) { border-color: var(--pymnts-line); }
.pymnts-workspace h1 { font-weight: 650; }
.pymnts-sidebar { --sidebar-primary: 244 243 248; }
.pymnts-sidebar-brand {
  display: flex; align-items: center; min-height: 76px; padding: 20px 24px;
  flex-shrink: 0; border-bottom: 1px solid var(--pymnts-line);
}
.pymnts-sidebar-brand img { max-width: 150px; }
.pymnts-sidebar .sidebar-scrollbar { min-height: 0; flex: 1; }
.pymnts-sidebar .bg-sidebar-hoverColor { background-color: #e9e1fb; }
.pymnts-sidebar [class*="tracking-widest"] { font-size: 10px; letter-spacing: .12em; }
.pymnts-sidebar [class*="rounded-lg"] { border-radius: 9px; }
/* Authentication: one shared layout for login, registration and 2FA. */
.pymnts-auth { display: grid; grid-template-columns: 52% 48%; min-height: 100svh; background: #fff; }
.pymnts-story {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 46px clamp(32px, 4.7vw, 84px) 32px;
  color: #fff; background: #21172f; isolation: isolate;
}
.pymnts-story::before {
  content: ""; position: absolute; z-index: -1; width: 550px; height: 550px;
  border: 1px solid #a987e629; border-radius: 50%; right: -300px; top: 32%;
  box-shadow: 0 0 0 62px #a987e60b, 0 0 0 124px #a987e608;
}
.pymnts-story-logo { width: 162px; display: block; }
.pymnts-story-logo img { width: 100%; }
.pymnts-story-copy { margin: auto 0; padding: 78px 0 62px; }
.pymnts-eyebrow { font-size: 10px; letter-spacing: .2em; font-weight: 600; color: #b7a8ce; margin-bottom: 26px; }
.pymnts-story h2 { font-size: clamp(44px, 4.6vw, 72px); font-weight: 550; line-height: 1.06; letter-spacing: -.055em; margin: 0; }
.pymnts-story h2 span { color: #bc9bf9; }
.pymnts-story p { font-size: 15px; line-height: 1.7; color: #baafca; max-width: 340px; margin-top: 26px; }
.pymnts-flow { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 0 46px; max-width: 470px; }
.pymnts-flow-line { height: 1px; background: #5e476f; position: absolute; top: 18px; left: 18px; right: 70px; }
.pymnts-flow-step { position: relative; display: flex; flex-direction: column; gap: 16px; }
.pymnts-flow-step span { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid #6a527e; border-radius: 12px; background: #30223f; color: #ceb8ef; font-size: 11px; }
.pymnts-flow-step:last-child span { background: #bc9bf9; color: #21172f; border-color: #bc9bf9; }
.pymnts-flow-step strong { font-size: 12px; font-weight: 500; color: #d7cde5; }
.pymnts-story-bottom { font-size: 11px; color: #8e7ca4; border-top: 1px solid #493854; padding-top: 23px; }
.pymnts-auth-main { min-width: 0; display: flex; flex-direction: column; padding: 42px clamp(28px, 4vw, 68px) 26px; }
.pymnts-auth-top { display: flex; justify-content: flex-end; align-items: center; min-height: 32px; }
.pymnts-mobile-logo { display: none; width: 136px; }
.pymnts-environment { display: inline-flex; align-items: center; gap: 7px; color: #766781; background: #f5f1fa; border: 1px solid #e8e1ef; border-radius: 50px; padding: 6px 10px; font-size: 10px; font-weight: 500; white-space: nowrap; }
.pymnts-environment > span { width: 5px; height: 5px; background: #9471c1; border-radius: 50%; }
.pymnts-auth-center { width: 100%; max-width: 384px; margin: auto; padding: 70px 0; }
.pymnts-auth-kicker { color: #776584; font-size: 10px; letter-spacing: .17em; font-weight: 650; margin-bottom: 17px; }
.pymnts-auth-form { min-width: 0; }
.pymnts-auth-form h1 { font-size: 32px; line-height: 1.2; font-weight: 600; color: #252331; letter-spacing: -.045em; }
.pymnts-auth-form #card-subtitle { color: #6d42e5; }
.pymnts-auth-form [class*="text-grey-650"] { color: #797280; }
.pymnts-auth-form form { width: 100%; }
.pymnts-auth-form label { font-size: 12px; font-weight: 550; color: #464050; }
.pymnts-auth-form input:not([type="checkbox"]):not([type="radio"]) { min-height: 46px; font-size: 14px; background: #fff; }
.pymnts-auth-form button[type="submit"] { min-height: 46px; border-radius: 10px; font-size: 13px; }
.pymnts-auth-terms { margin-top: 27px; }
.pymnts-auth-terms #tc-text { font-size: 10px; line-height: 1.75; color: #797180; text-align: left; max-width: 330px; }
.pymnts-auth-terms a { text-decoration-color: #d0c5db; text-underline-offset: 3px; }
.pymnts-footer { display: flex; justify-content: space-between; gap: 16px; color: #797180; font-size: 10px; line-height: 1.5; }
.pymnts-footer a:hover { color: #6d42e5; }
@media (min-width: 1700px) { .pymnts-auth { grid-template-columns: 50% 50%; } }
@media (max-width: 1050px) {
  .pymnts-story { padding-left: 32px; padding-right: 32px; }
  .pymnts-story h2 { font-size: 48px; }
  .pymnts-auth-main { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 760px) {
  .pymnts-auth { display: flex; flex-direction: column; }
  .pymnts-story { display: none; }
  .pymnts-mobile-logo { display: block; }
  .pymnts-auth-top { justify-content: space-between; gap: 12px; }
  .pymnts-auth-main { min-height: 100svh; padding: 24px; }
  .pymnts-auth-center { padding: 56px 0; }
  .pymnts-auth-form h1 { font-size: 30px; }
  .pymnts-footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .pymnts *, .pymnts *::before, .pymnts *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.pymnts-auth-form .w-96 { width: 100%; max-width: 100%; }
.pymnts-auth-form [id="card-subtitle"] { border-radius: 3px; }
.pymnts-overview { padding-top: 20px; }
.pymnts-overview > :first-child { padding-bottom: 24px; border-bottom: 1px solid var(--pymnts-line); }
.pymnts-overview img[src^="/assets/pymnts/"] { width: 100%; height: 140px; object-fit: cover; border-radius: 12px; }
.pymnts-overview .pymnts-docs-mark { display: flex; align-items: center; height: 80px; color: #9b80c9; font-family: monospace; font-size: 30px; letter-spacing: -.08em; }
.pymnts-overview [class*="rounded-xl"] { border-radius: 16px; box-shadow: 0 2px 4px #33234f04; }
.pymnts-overview [class*="rounded-xl"] button { align-self: flex-start; }

.pymnts .text-nd_gray-400 { color: #746e7e; }
.pymnts-sidebar [class*="tracking-widest"] { color: #786e85; }
@media (min-width: 761px) and (max-height: 800px) {
  .pymnts-story { padding-top: 32px; padding-bottom: 24px; }
  .pymnts-story-copy { padding-top: 46px; padding-bottom: 36px; }
  .pymnts-flow { padding-bottom: 28px; }
  .pymnts-auth-center { padding-top: 44px; padding-bottom: 44px; }
}
.pymnts-auth-form button:not(#card-subtitle) { min-height: 46px; }
@media (min-width: 768px) {
  .pymnts-workspace #navbar img[src="/assets/pymnts/logo.svg"] { display: none; }
}
.pymnts-overview img[src^="/assets/pymnts/"] { object-fit: contain; background: #f4f0fc; }
@media (max-width: 767px) {
  .pymnts-workspace #navbar { position: relative; }
  .pymnts-workspace #navbar .top-0.relative.justify-center { position: static; }
  .pymnts-workspace #navbar .-top-11 { top: -12px; right: 0; max-width: 100%; }
  .pymnts-workspace #navbar .bg-nd_orange-100 { padding: 4px 8px; gap: 6px; flex-wrap: wrap; }
  .pymnts-workspace #navbar .bg-nd_orange-100 .text-nd_yellow-200 { font-size: 10px; line-height: 1.4; white-space: normal; }
}