:root {
  --red-950: #7f0018;
  --red-900: #850019;
  --red-800: #91001d;
  --red-700: #b00020;
  --red-100: #ffe8ed;
  --spinner-red: #c50016;
  --ink: #171923;
  --muted: #687082;
  --line: #dde1e8;
  --page: #f4f6f7;
  --panel: #f8fafb;
  --dull-white: #f6f8f9;
  --shadow: 0 18px 45px rgba(22, 25, 35, 0.1);
  --app-header-height: 104px;
  --notch-gap: 18px;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--notch-gap));
  --safe-side: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px), 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --keyboard-offset: 0px;
  --native-status-bar-color: #f50700;
}

* {
  box-sizing: border-box;
}

/* Transaction details */
.transaction-detail-page { position: relative; min-height: 100%; overflow: hidden; background: #fff; color: #424b55; }
.transaction-detail-page::before { content: ""; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: calc(382px + var(--safe-top)); background: #f8fbfc url("assets/optimized/transaction-details-bg.webp") center center / 100% 100% no-repeat; pointer-events: none; }
.transaction-detail-header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: calc(82px + var(--safe-top)); padding: var(--safe-top) 58px 0; background: transparent; }
.transaction-detail-header h2 { margin: 0; font-size: 19px; font-weight: 500; }
.transaction-detail-back { position: absolute; left: 25px; bottom: 21px; width: 28px; height: 34px; border: 0; background: transparent; }
.transaction-detail-back::before { content: ""; position: absolute; left: 7px; top: 8px; width: 15px; height: 15px; border-left: 2px solid #66717b; border-bottom: 2px solid #66717b; transform: rotate(45deg); }
.transaction-detail-hero { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-height: 300px; padding: 78px 34px 42px; background: transparent; text-align: center; }
.transaction-detail-amount { margin-bottom: 30px; font-size: clamp(42px, 11vw, 62px); font-weight: 300; line-height: 1; }
.transaction-detail-amount .amount-currency, .transaction-detail-amount .amount-cents { font-size: .55em; }
.transaction-detail-amount .amount-sign { margin-right: .12em; font-size: .72em; }
.transaction-detail-hero > strong { display: block; width: 100%; font-size: clamp(20px, 5.3vw, 27px); font-weight: 400; text-align: center; }
.transaction-detail-type { position: relative; z-index: 1; display: grid; place-items: center; min-height: 64px; border-bottom: 1px solid #e3e6e8; background: #fff; font-size: 18px; font-weight: 400; }
.transaction-detail-facts { position: relative; z-index: 1; margin: 0; padding: 34px 36px 64px; background: #fff; }
.transaction-detail-facts > div { margin-bottom: 34px; }
.transaction-detail-facts dt { margin-bottom: 8px; color: #858d95; font-size: 14px; font-weight: 400; }
.transaction-detail-facts dd { margin: 0; color: #626b74; font-size: 19px; font-weight: 300; line-height: 1.35; }
.detail-transaction-row[role="button"] { cursor: pointer; }
.detail-transaction-row[role="button"]:focus-visible { outline: 2px solid #c8102e; outline-offset: 4px; }

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--native-status-bar-color);
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.splash {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 0;
  background: #ffffff;
}

.splash-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.splash.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 420ms ease,
    visibility 0s linear 420ms;
}

.splash-brand,
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.splash-brand {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  gap: clamp(12px, 1.8vw, 20px);
}

.splash-brand h1 {
  margin: 0;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: clamp(34px, 5.35vw, 58px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
}

.logo-placeholder {
  display: grid;
  place-items: center;
  position: relative;
  width: clamp(104px, 14vw, 154px);
  aspect-ratio: 1.58 / 1;
  border: 0;
  border-radius: 0;
  background: #e40012;
  clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
  color: rgba(141, 0, 27, 0.76);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.logo-placeholder::before {
  content: "";
  width: 54%;
  height: 78%;
  background:
    linear-gradient(45deg, transparent 49%, #e40012 50% 56%, transparent 57%),
    linear-gradient(-45deg, transparent 49%, #e40012 50% 56%, transparent 57%),
    #fff;
  clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 0 100%);
}

.logo-placeholder span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.splash-spinner {
  position: absolute;
  left: 50%;
  top: 63%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  animation: spinnerRotate 980ms linear infinite;
}

.splash-spinner span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--spinner-red);
}

.splash-spinner span:nth-child(1) {
  transform: rotate(0deg) translateY(-24px) scale(1.45);
  opacity: 1;
}

.splash-spinner span:nth-child(2) {
  transform: rotate(60deg) translateY(-24px) scale(1.15);
  opacity: 0.72;
}

.splash-spinner span:nth-child(3) {
  transform: rotate(120deg) translateY(-24px) scale(0.9);
  opacity: 0.48;
}

.splash-spinner span:nth-child(4) {
  transform: rotate(180deg) translateY(-24px) scale(0.72);
  opacity: 0.32;
}

.splash-spinner span:nth-child(5) {
  transform: rotate(240deg) translateY(-24px) scale(0.58);
  opacity: 0.22;
}

.splash-spinner span:nth-child(6) {
  transform: rotate(300deg) translateY(-24px) scale(0.46);
  opacity: 0.14;
}

.splash-footer {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4.8vh, 58px);
  display: grid;
  transform: translateX(-50%);
  justify-items: center;
  gap: clamp(14px, 2vh, 22px);
  width: min(860px, 100%);
  padding: 0 24px;
}

.protection-badge {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  width: 80px;
  min-height: 110px;
  padding: 8px 7px;
  border-radius: 9px;
  background: var(--dull-white);
  color: #050505;
}

.lock-shape {
  position: relative;
  width: 45px;
  height: 35px;
  margin-top: 14px;
  border-radius: 5px;
  background: #050505;
}

.lock-shape::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 27px;
  width: 33px;
  height: 29px;
  transform: translateX(-50%);
  border: 9px solid #050505;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
}

.protection-badge strong {
  color: #050505;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.protection-badge span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.protection-badge.has-image {
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.protection-badge img {
  display: block;
  width: 100%;
  max-height: 110px;
  object-fit: contain;
}

.splash-footer p {
  max-width: 850px;
  margin: 0;
  color: rgba(255, 205, 210, 0.48);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.34;
}

.site {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 0 32px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
}

.brand {
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark,
.mini-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--red-800);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.nav a,
.panel-heading button,
.outline-button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
}

.nav a {
  padding: 11px 13px;
}

.nav a.active,
.nav a:hover,
.panel-heading button:hover {
  color: var(--red-800);
  background: var(--red-100);
}

.outline-button {
  padding: 10px 14px;
  border: 1px solid var(--line);
}

main {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 34px 0 56px;
}

.page {
  animation: pageIn 220ms ease;
}

.login-page {
  display: grid;
  min-height: calc(100vh - 166px);
  place-items: center;
}

.login-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 44px;
  align-items: center;
  width: min(900px, 100%);
}

.section-label {
  display: inline-block;
  margin-bottom: 9px;
  color: var(--red-800);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

h2,
h3,
p {
  margin-top: 0;
}

h2 {
  margin-bottom: 12px;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.04;
}

h3 {
  margin-bottom: 0;
  font-size: 20px;
}

p {
  color: var(--muted);
  line-height: 1.55;
}

.form-card,
.transfer-layout,
.panel,
.table-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.form-card,
.transfer-layout {
  display: grid;
  gap: 18px;
  padding: 26px;
}

label {
  display: grid;
  gap: 8px;
  color: #3b4252;
  font-size: 14px;
  font-weight: 800;
}

input,
select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  color: var(--ink);
  background: var(--dull-white);
}

input:focus,
select:focus {
  border-color: var(--red-700);
  outline: 3px solid rgba(176, 0, 32, 0.12);
}

.primary-button {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--red-800);
  color: #fff;
  cursor: pointer;
  font-weight: 900;
}

.primary-button:hover {
  background: var(--red-900);
}

small,
.form-message {
  color: var(--muted);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 24px;
  padding: 34px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--red-800), #3b0b16);
}

.hero p,
.hero .section-label {
  color: rgba(255, 255, 255, 0.72);
}

.hero-balance {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}

.hero-balance span {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 800;
}

.hero-balance strong {
  font-size: 32px;
}

.dashboard-grid,
.support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.panel {
  padding: 24px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.panel-heading button {
  padding: 8px 10px;
}

.account-list,
.transaction-list,
.cards-grid {
  display: grid;
  gap: 12px;
}

.account-row,
.transaction-row,
.card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--dull-white);
}

.account-row span,
.transaction-row span,
.card-item span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.account-row strong,
.transaction-row strong,
.card-item strong {
  display: block;
  margin-top: 3px;
}

.page-heading {
  margin-bottom: 22px;
}

.table-panel {
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--dull-white);
}

th,
td {
  padding: 17px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

th {
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
}

tr:last-child td {
  border-bottom: 0;
}

.transfer-layout {
  grid-template-columns: 1fr 1fr;
  max-width: 860px;
}

.transfer-layout .primary-button,
.transfer-layout .form-message {
  grid-column: 1 / -1;
}

.cards-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-item {
  display: grid;
  min-height: 170px;
  color: #fff;
  background: linear-gradient(135deg, #222631, var(--red-900));
}

.card-item span {
  color: rgba(255, 255, 255, 0.68);
}

.card-item strong {
  font-size: 24px;
}

@keyframes spinnerRotate {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes pageIn {
  from {
    transform: translateY(8px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 860px) {
  .topbar {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 18px 20px;
  }

  .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  main {
    width: min(100% - 28px, 1180px);
    padding-top: 24px;
  }

  .login-panel,
  .hero,
  .dashboard-grid,
  .support-grid,
  .transfer-layout,
  .cards-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .splash-brand {
    display: grid;
    justify-items: center;
    transform: translate(-50%, -50%);
  }

  .brand span:last-child {
    display: none;
  }

  h2 {
    font-size: 34px;
  }

  .hero,
  .panel,
  .form-card,
  .transfer-layout {
    padding: 20px;
  }

  th,
  td {
    padding: 14px 12px;
  }
}

/* App-style account overview shown after the splash */
.site {
  min-height: 100vh;
  background: var(--dull-white);
}

.mobile-app {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0 0 92px;
  background: var(--dull-white);
}

.accounts-app-page {
  min-height: calc(100vh - 92px);
  background: var(--dull-white);
}

.app-header {
  min-height: 116px;
  padding: calc(31px + var(--safe-top)) 7.5vw 17px;
  background:
    linear-gradient(rgba(80, 0, 0, 0.04), rgba(80, 0, 0, 0.04)),
    #ec1712 url("assets/optimized/accounts-header.webp") 82% top / cover no-repeat;
  color: #fff;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-wallet {
  display: block;
  width: 34px;
  height: 34px;
  color: rgba(255, 255, 255, 0.92);
  fill: currentColor;
  flex: 0 0 auto;
  filter: drop-shadow(0.38px 0 0 currentColor) drop-shadow(0 0.38px 0 currentColor);
}

.masked-name {
  display: block;
  max-width: 420px;
  overflow: hidden;
  color: #fff;
  font-size: clamp(19px, 3.4vw, 25px);
  font-weight: 400;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-screen-body {
  padding: 26px 7.5vw 0;
}

.mobile-account-list {
  border-bottom: 1px solid rgba(190, 198, 205, 0.5);
}

.mobile-account-card {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 26px;
  min-height: 126px;
  padding: 0 0 30px;
  color: #353a40;
}

.account-card-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 100px;
  overflow: hidden;
  border-radius: 7px;
  background: transparent;
  color: rgba(120, 128, 138, 0.82);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.account-card-main {
  min-width: 0;
}

.account-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}

.account-card-top strong {
  color: #1f2328;
  font-size: clamp(23px, 3.55vw, 32px);
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.08;
}

.account-card-top strong:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-card-top strong:last-child {
  flex: 0 0 auto;
  color: #24282d;
  font-size: clamp(19px, 2.85vw, 26px);
  letter-spacing: 0;
  white-space: nowrap;
}

.account-card-main p,
.account-card-top span {
  margin: 8px 0 0;
  color: #555c64;
  font-size: clamp(19px, 2.9vw, 26px);
  font-weight: 500;
  line-height: 0.72;
  letter-spacing: 0.01em;
}

.account-card-top span:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

.account-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  --money-whole-size: 1em;
  --money-cents-size: 1em;
  --money-currency-size: 0.76em;
  --money-sign-size: 0.72em;
  color: #3d4652;
  margin-top: 0;
  letter-spacing: 0;
  white-space: nowrap;
}

.account-card-top .account-amount {
  margin-top: 0;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
}

.account-card-top strong.account-amount {
  color: #20242a;
  font-weight: 700;
  font-size: inherit;
}

.account-card-top strong.account-amount .amount-whole,
.account-card-top strong.account-amount .amount-cents,
.account-card-top strong.account-amount .amount-currency,
.account-card-top strong.account-amount .amount-sign {
  font-weight: 700;
}

.account-card-top span.account-amount {
  color: #353b42;
  font-weight: 500;
  --money-whole-size: 1em;
  --money-cents-size: 1em;
  --money-currency-size: 1em;
  --money-sign-size: 1em;
}

.account-card-top span.account-amount .amount-whole,
.account-card-top span.account-amount .amount-cents,
.account-card-top span.account-amount .amount-currency,
.account-card-top span.account-amount .amount-sign {
  font-weight: 500;
}

.money-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
  --money-whole-size: 1em;
  --money-cents-size: 0.62em;
  --money-currency-size: 0.62em;
  --money-sign-size: 0.72em;
}

.money-amount .amount-sign {
  margin-right: 2px;
  font-size: var(--money-sign-size);
  font-weight: 500;
  line-height: 1;
}

.money-amount .amount-whole {
  font-size: var(--money-whole-size);
  line-height: 1;
}

.money-amount .amount-cents {
  font-size: var(--money-cents-size);
  line-height: 1;
}

.money-amount .amount-currency {
  margin-left: 5px;
  font-size: var(--money-currency-size);
  letter-spacing: 0.03em;
  line-height: 1;
}

.as-of {
  margin: 31px 0 0 0;
  color: #50575f;
  font-size: 17px !important;
  font-weight: 400;
  line-height: 1.4;
}

.accounts-promo-carousel {
  position: relative;
  width: calc(100% + 15vw);
  margin: 28px -7.5vw 0;
  padding: 42px max(7.5vw, 28px) 28px;
  overflow: hidden;
  background: #f1f1f1;
  touch-action: pan-y;
}

.accounts-promo-carousel[hidden] {
  display: none;
}

.accounts-promo-card {
  position: relative;
  width: min(100%, 860px);
  margin: 0 auto;
  padding: 76px 26px 34px;
  background: #fff;
  color: #111;
  box-shadow: 0 1px 4px rgba(20, 24, 30, 0.04);
}

.accounts-promo-close {
  position: absolute;
  top: 26px;
  right: 28px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.accounts-promo-close::before,
.accounts-promo-close::after {
  position: absolute;
  top: 11px;
  left: 1px;
  width: 23px;
  height: 1.5px;
  background: #111;
  content: "";
}

.accounts-promo-close::before {
  transform: rotate(45deg);
}

.accounts-promo-close::after {
  transform: rotate(-45deg);
}

.accounts-promo-image {
  display: block;
  width: 100%;
  aspect-ratio: 2.14 / 1;
  object-fit: cover;
  object-position: center;
}

.accounts-promo-copy {
  padding-top: 28px;
}

.accounts-promo-copy h2 {
  margin: 0 0 22px;
  color: #0e0e0e;
  font-size: clamp(25px, 3.7vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.accounts-promo-copy p {
  margin: 0 0 24px;
  color: #151515;
  font-size: clamp(19px, 2.8vw, 29px);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.33;
}

.accounts-promo-cta {
  display: inline-block;
  margin-top: 6px;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: #111;
  font: inherit;
  font-size: clamp(20px, 2.9vw, 29px);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}

.accounts-promo-controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 860px);
  min-height: 48px;
  margin: 15px auto 0;
}

.accounts-promo-dots {
  display: flex;
  align-items: center;
  gap: 14px;
}

.accounts-promo-dot {
  width: 15px;
  height: 15px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #b7b8ba;
  cursor: pointer;
}

.accounts-promo-dot.active {
  background: #57585a;
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 72px;
  padding: 7px 10px max(6px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(192, 199, 207, 0.55);
  background: rgba(250, 252, 253, 0.96);
  box-shadow: 0 -10px 25px rgba(22, 25, 35, 0.06);
}

.bottom-nav button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #555c64;
  cursor: pointer;
  font-size: clamp(10px, 1.05vw, 13px);
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}

.bottom-nav button.active {
  color: #171b20;
  font-weight: 800;
}

.bottom-nav button[aria-disabled="true"] {
  cursor: default;
}

.tab-icon {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
  color: currentColor;
  fill: currentColor;
  filter: drop-shadow(0.34px 0 0 currentColor) drop-shadow(0 0.34px 0 currentColor);
}

.bottom-nav button[data-route="insights"] .tab-icon {
  width: 29px;
  height: 29px;
  --mask-size: 166%;
}

.bottom-nav button[data-route="insights"] .tab-icon-switch {
  transform: scale(1.14);
  transform-origin: center;
}

.mask-icon {
  display: block;
  background: currentColor;
  -webkit-mask: var(--icon-url) center / var(--mask-size, contain) no-repeat;
  mask: var(--icon-url) center / var(--mask-size, contain) no-repeat;
}

.icon-img {
  display: block;
  object-fit: contain;
}

.detail-open .bottom-nav {
  display: none;
}

.admin-open .bottom-nav {
  display: none;
}

.personal-home-open .bottom-nav {
  display: none;
}

.service-flow-open .bottom-nav {
  display: none;
}

.site .page.service-page {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: #f8faf9;
  color: #23282d;
}

.service-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: end;
  min-height: calc(76px + var(--safe-top));
  padding: calc(22px + var(--safe-top)) 22px 15px;
  border-bottom: 1px solid rgba(125, 132, 137, 0.18);
  background: rgba(250, 252, 251, 0.98);
}

.service-header h2 {
  align-self: center;
  margin: 0;
  color: #24292e;
  font-size: clamp(18px, 2.8vw, 24px);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.service-back {
  position: relative;
  align-self: center;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: #2f353a;
  cursor: pointer;
}

.service-back::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 11px;
  width: 16px;
  height: 16px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.service-cancel {
  align-self: center;
  justify-self: end;
  border: 0;
  background: transparent;
  color: #20262b;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
}

.service-info-mark {
  align-self: center;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid #3e454b;
  border-radius: 50%;
  color: #30363b;
  font-size: 15px;
  font-weight: 700;
}

.service-menu-list {
  border-top: 1px solid rgba(125, 132, 137, 0.12);
}

.service-menu-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  width: 100%;
  min-height: 82px;
  padding: 0 27px;
  border: 0;
  border-bottom: 1px solid rgba(125, 132, 137, 0.2);
  background: transparent;
  color: #343a40;
  cursor: pointer;
  text-align: left;
}

.service-menu-row::after,
.contact-address-row::after,
.service-card-summary.selectable::after {
  content: "";
  justify-self: end;
  width: 13px;
  height: 13px;
  border-top: 2px solid #2d3338;
  border-right: 2px solid #2d3338;
  transform: rotate(45deg);
}

.service-menu-row > span:last-child {
  font-size: clamp(18px, 2.65vw, 23px);
  font-weight: 400;
  line-height: 1.2;
}

.service-menu-row.linked-cards-row {
  grid-template-columns: 34px minmax(0, 1fr) 30px;
  gap: 14px;
}

.linked-card-icon {
  position: relative;
  width: 25px;
  height: 25px;
}

.linked-card-icon::before,
.linked-card-icon::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 18px;
  border: 2px solid #31373c;
  border-radius: 7px;
  transform: rotate(42deg);
}

.linked-card-icon::before {
  left: 3px;
  top: 1px;
}

.linked-card-icon::after {
  right: 2px;
  bottom: 1px;
}

.business-contact-body {
  padding: 28px 27px 70px;
}

.business-contact-copy {
  color: #4c5359;
  font-size: 16px;
  line-height: 1.38;
}

.business-contact-copy p {
  margin: 0 0 18px;
}

.business-contact-copy strong {
  color: #282d32;
  font-weight: 700;
}

.business-contact-body > h3 {
  margin: 32px 0 25px;
  color: #34393e;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
}

.contact-group {
  padding-top: 10px;
  border-top: 1px solid rgba(125, 132, 137, 0.18);
}

.contact-group + .contact-group {
  margin-top: 26px;
}

.contact-group h4 {
  margin: 18px 0 9px;
  color: #242a2f;
  font-size: 17px;
  font-weight: 700;
}

.contact-value-row {
  display: grid;
  gap: 5px;
  min-height: 52px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(125, 132, 137, 0.18);
  color: #6c7379;
  font-size: 15px;
}

.contact-value-row strong {
  color: #343a40;
  font-size: 16px;
  font-weight: 700;
}

.contact-value-row.muted {
  color: #9a9fa4;
}

.contact-address-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  width: 100%;
  min-height: 74px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(125, 132, 137, 0.18);
  background: transparent;
  color: #2a3035;
  text-align: left;
}

.contact-address-row strong {
  font-size: 19px;
  font-weight: 700;
}

.contact-address-row span {
  grid-column: 1;
  color: #70777d;
  font-size: 14px;
}

.add-business-body {
  min-height: calc(100vh - 90px);
  padding: 26px 27px 118px;
}

.add-business-illustration {
  position: relative;
  width: min(310px, 86vw);
  height: 210px;
  margin: 0 auto 4px;
  background: radial-gradient(circle, #eceeed 2px, transparent 2.5px) 0 0 / 12px 12px;
}

.add-business-illustration::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44px;
  width: 122px;
  height: 84px;
  transform: translateX(-50%);
  border: 3px solid #343a40;
  border-radius: 4px;
  background: #fff;
  box-shadow: -22px 42px 0 -10px #fff, -22px 42px 0 -7px #343a40;
}

.add-business-illustration::after {
  content: "••••••";
  position: absolute;
  left: 50%;
  top: 78px;
  transform: translateX(-50%);
  color: #343a40;
  font-size: 24px;
  letter-spacing: 5px;
}

.add-business-illustration span {
  position: absolute;
  right: 43px;
  top: 24px;
  width: 16px;
  height: 16px;
  background: #e6231d;
}

.add-business-body h3 {
  margin: 0 0 12px;
  color: #30363b;
  font-size: 28px;
  font-weight: 400;
}

.add-business-body ul,
.pin-safety-copy ul {
  margin: 0;
  padding-left: 24px;
  color: #565d63;
  font-size: 17px;
  line-height: 1.7;
}

.add-business-where {
  display: block;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #343a40;
  font-size: 19px;
  text-decoration: underline;
}

.service-primary-button {
  width: 100%;
  min-height: 68px;
  border: 0;
  background: #e51b16;
  color: #fff;
  cursor: pointer;
  font-size: 19px;
  font-weight: 700;
}

.add-business-body > .service-primary-button,
.temporary-block-body > .service-primary-button {
  position: fixed;
  left: 27px;
  right: 27px;
  bottom: max(26px, env(safe-area-inset-bottom));
  width: calc(100% - 54px);
}

.pin-select-body {
  position: relative;
  min-height: calc(100vh - 90px);
  padding: 24px 27px 120px;
}

.service-card-list {
  display: grid;
  gap: 12px;
}

.service-card-summary {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(125, 132, 137, 0.2);
  background: transparent;
  color: #343a40;
  text-align: left;
}

.service-card-summary.selectable {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  cursor: pointer;
}

.service-card-summary.selectable::after {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.service-card-account-row {
  display: grid;
  gap: 7px;
  padding: 5px 0 18px;
}

.service-card-account-row strong {
  color: #30363b;
  font-size: 19px;
  font-weight: 500;
}

.service-card-account-row span {
  color: #70777d;
  font-size: 14px;
}

.service-card-detail-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 0 0 19px;
}

.service-card-image {
  display: block;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 5px;
  background: #dedfdf;
}

.service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.service-card-detail-row strong,
.service-card-detail-row small {
  display: block;
}

.service-card-detail-row strong {
  color: #2a3035;
  font-size: 18px;
  font-weight: 700;
}

.service-card-detail-row small {
  margin-top: 8px;
  color: #747b81;
  font-size: 13px;
}

.pin-help-copy {
  position: fixed;
  left: 27px;
  right: 27px;
  bottom: max(36px, env(safe-area-inset-bottom));
  color: #5c6369;
  font-size: 14px;
  line-height: 1.45;
}

.pin-help-copy p {
  max-width: 330px;
  margin: 0 0 12px;
}

.pin-help-copy button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #30363b;
  font-weight: 700;
  text-decoration: underline;
}

.pin-guidance-body {
  padding: 24px 27px 28px;
}

.pin-safety-copy {
  padding-top: 25px;
}

.pin-safety-copy ul {
  display: grid;
  gap: 14px;
  font-size: 16px;
  line-height: 1.4;
}

.pin-safety-copy .service-primary-button {
  position: fixed;
  left: 27px;
  right: 27px;
  bottom: max(26px, env(safe-area-inset-bottom));
  width: calc(100% - 54px);
}

.pin-value {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid #b8bec3;
  background: #fff;
  color: #1d2328;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 13px;
  text-align: center;
}

.temporary-block-body {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: calc(100vh - 92px);
  padding: 0 38px 138px;
  text-align: center;
}

.temporary-warning {
  display: grid;
  place-items: center;
  width: 74px;
  height: 66px;
  margin-bottom: 25px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #e51b16;
  color: #fff;
  font-size: 42px;
  font-weight: 300;
}

.temporary-block-body h3 {
  max-width: 390px;
  margin: 0;
  color: #343a40;
  font-size: 29px;
  font-weight: 400;
  line-height: 1.18;
}

.temporary-block-body p {
  max-width: 400px;
  margin: 28px 0 0;
  color: #52595f;
  font-size: 17px;
  line-height: 1.48;
}

.service-empty {
  margin: 22px 0;
  color: #666d73;
  font-size: 16px;
}

.site .page.personal-home-page {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--dull-white);
}

.personal-home-blank {
  min-height: 100vh;
  background: var(--dull-white);
}

.logo-placeholder.has-image {
  clip-path: none;
  background: transparent;
}

.logo-placeholder.has-image::before {
  display: none;
}

.logo-placeholder img,
.account-card-icon img,
.detail-card-placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.account-card-icon img {
  transform: scale(1.4);
  transform-origin: center;
}

.detail-card-placeholder img {
  transform: translateY(15px) scale(1.3);
  transform-origin: center;
}

.account-detail-page {
  --detail-header-sticky-height: 76px;
  --detail-pull-distance: 0px;
  --detail-pull-rotation: 0deg;
  min-height: 100vh;
  padding: 0 0 36px;
  color: #3f4853;
  background: #fbfdfe;
}

.detail-pull-refresh {
  position: fixed;
  top: calc(var(--detail-header-sticky-height) + 10px);
  left: 50%;
  z-index: 44;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 253, 254, 0.94);
  box-shadow: 0 3px 10px rgba(52, 66, 75, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-18px + var(--detail-pull-distance))) scale(0.92);
  transition: opacity 140ms ease, transform 140ms ease;
}

.detail-pull-refresh span {
  width: 22px;
  height: 22px;
  border: 2px solid #d6dde1;
  border-top-color: #5d6870;
  border-radius: 50%;
  transform: rotate(var(--detail-pull-rotation));
}

.detail-pull-refresh em {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.account-detail-page.is-pulling .detail-pull-refresh,
.account-detail-page.is-refreshing .detail-pull-refresh {
  opacity: 1;
  transform: translate(-50%, min(18px, var(--detail-pull-distance))) scale(1);
}

.account-detail-page.is-refreshing .detail-pull-refresh span {
  animation: detail-pull-spin 700ms linear infinite;
}

@keyframes detail-pull-spin {
  to { transform: rotate(360deg); }
}

.detail-top {
  background: #f8fbfc url("assets/optimized/account-details-bg.webp") center top / 135% 150% no-repeat;
}

.detail-header {
  position: sticky;
  top: var(--safe-top);
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  min-height: calc(var(--app-header-height) - 10px);
  padding: calc(20px + var(--safe-top)) 28px 4px;
  text-align: center;
  z-index: 42;
  background: #f8fbfc url("assets/optimized/account-details-bg.webp") center top / 135% 150% no-repeat;
}

.detail-header h2 {
  margin: 0;
  color: #3f4853;
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.detail-header p {
  margin: 2px 0 0;
  color: #8a929b;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.2;
}

.detail-back,
.detail-more {
  min-width: 0;
  border: 0;
  background: transparent;
  color: #6d7580;
  cursor: pointer;
}

.detail-back {
  position: relative;
  width: 44px;
  height: 44px;
}

.detail-back::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 12px;
  width: 17px;
  height: 17px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.detail-more {
  align-self: start;
  padding-top: 5px;
  font-size: 26px;
  letter-spacing: 4px;
  line-height: 1;
}

.detail-balance-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 16px;
  align-items: start;
  padding: 16px 38px 4px;
}

.detail-balance-area > div:first-child {
  transform: translateY(35px);
}

.detail-label {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0 0 8px;
  color: #8b939d;
  font-size: clamp(18px, 2.5vw, 24px);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-label::after {
  content: "i";
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  margin-left: 5px;
  border: 1px solid #7d8792;
  border-radius: 50%;
  color: #7d8792;
  font-size: 14px;
  font-weight: 700;
}

.detail-balance {
  color: #4c5560;
  font-size: clamp(40px, 8vw, 62px);
  font-weight: 300;
  line-height: 1;
}

.detail-balance .money-amount {
  --money-whole-size: 1em;
  --money-cents-size: 0.5em;
  --money-currency-size: 0.48em;
  --money-sign-size: 0.52em;
}

.detail-overdraft {
  margin: 12px 0 0;
  color: #707983;
  font-size: clamp(16px, 2.5vw, 21px);
  line-height: 1.25;
}

.detail-overdraft .money-amount {
  --money-whole-size: 1em;
  --money-cents-size: 1em;
  --money-currency-size: 1em;
  --money-sign-size: 1em;
  color: #4c5560;
  font-weight: 600;
}

.detail-card-placeholder {
  display:grid;
  place-items:center;
  width:126px;
  height:178px;
  transform:translateY(-8px);
  overflow:hidden;
  border-radius:8px;
  background:transparent;
  color:rgba(120,128,138,.78);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
}

.detail-header,
.detail-balance-area,
.detail-stats {
  position: relative;
  z-index: 1;
}

.detail-stats {
  padding: 0 38px 10px;
}

.stat-row {
  display: grid;
  grid-template-columns: 42px max-content minmax(70px, 190px);
  gap: 10px;
  align-items: center;
  margin-top: 5px;
}

.stat-row > span,
.detail-stats p {
  color: #8d959e;
  font-size: clamp(15px, 2vw, 18px);
}

.stat-row strong {
  color: #4e5762;
  font-size: clamp(18px,2.4vw,22px);
  font-weight: 600;
}

.stat-row .money-amount {
  --money-whole-size: 1em;
  --money-cents-size: 1em;
  --money-currency-size: 1em;
  --money-sign-size: 1em;
}

.stat-bar {
  height: 12px;
  background: #dfe4e7;
}

.stat-bar span {
  display: block;
  height: 100%;
  background: #00c815;
}

.stat-bar.muted span {
  background: #8f999f;
}

.detail-stats p {
  margin: 8px 0 0;
}

#detailActivitySince {
  color: #59626c;
}

.detail-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: sticky;
  top: var(--detail-header-sticky-height);
  z-index: 41;
  border-top: 1px solid rgba(211, 217, 222, 0.75);
  border-bottom: 1px solid rgba(211, 217, 222, 0.75);
  background: #fbfdfe;
}

.detail-tabs button {
  position: relative;
  min-height: 74px;
  border: 0;
  background: transparent;
  color: #9aa2ab;
  cursor: pointer;
  font-size: clamp(18px, 2.6vw, 24px);
}

.detail-tabs button.active {
  color: #47515d;
}

.detail-tabs button.active::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 0;
  height: 5px;
  background: #f00012;
}

.detail-transactions {
  padding: 24px 34px 0;
}

.detail-google-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: calc(100% - 56px);
  margin: 10px 28px 18px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #202124;
  color: #fff;
  cursor: default;
  height: 44px;
}

.detail-google-pay[hidden] {
  display: none;
}

.detail-google-pay-prefix {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.detail-google-pay-mark {
  display: block;
  width: 70px;
  height: 28px;
  overflow: hidden;
  background-image: url("assets/google-pay-plain-dark.png");
  background-repeat: no-repeat;
  background-position: -144px -13px;
  background-size: 357px 54px;
}

.transaction-date-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 18px;
  color: #9aa2aa;
}

.transaction-date-row > strong,
.transaction-date-row > span {
  color: inherit;
  font-size: clamp(22px, 3.3vw, 30px);
  font-weight: 400;
}

.transaction-day-total {
  --money-whole-size: 1em;
  --money-cents-size: 1em;
  --money-currency-size: 1em;
  --money-sign-size: 1em;
}

.detail-transaction-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 0 22px;
  border-bottom: 1px solid rgba(222, 226, 230, 0.7);
}

.transaction-arrow {
  position: relative;
  width: 52px;
  height: 52px;
  border: 1.5px solid #3bb35d;
  border-radius: 50%;
}

.transaction-arrow::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 24px;
  width: 23px;
  height: 1.5px;
  background: #3bb35d;
}

.transaction-arrow::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 18px;
  width: 11px;
  height: 11px;
  border-top: 1.5px solid #3bb35d;
  border-right: 1.5px solid #3bb35d;
  transform: rotate(45deg);
}

.detail-transaction-row strong {
  color: #404a55;
  font-size: clamp(21px, 3.2vw, 29px);
  font-weight: 500;
  line-height: 1.18;
}

.detail-transaction-row > div span {
  display: block;
  margin-top: 6px;
  color: #8d949d;
  font-size: clamp(16px, 2.5vw, 22px);
}

.transaction-amount {
  --money-whole-size: 1em;
  --money-cents-size: 0.62em;
  --money-currency-size: 0.62em;
  --money-sign-size: 0.7em;
}

.detail-transaction-row > strong:last-child {
  color: #39a955;
  font-size: clamp(20px, 3vw, 27px);
  white-space: nowrap;
}

.detail-transaction-row.out .transaction-arrow {
  border-color: #4d5965;
}

.detail-transaction-row.out .transaction-arrow::before {
  background: #4d5965;
}

.detail-transaction-row.out .transaction-arrow::after {
  left: 13px;
  right: auto;
  border: 0;
  border-left: 1.5px solid #4d5965;
  border-bottom: 1.5px solid #4d5965;
  transform: rotate(45deg);
}

.detail-transaction-row.out > strong:last-child {
  color: #3f4853;
}

.pending-message {
  max-width: 620px;
  margin: 48px auto 0;
  padding: 0 28px;
  text-align: center;
}

.pending-message strong {
  display: block;
  color: #424b56;
  font-size: clamp(17px, 2.4vw, 22px);
  font-weight: 500;
  line-height: 1.35;
}

.pending-message p {
  margin: 26px auto 0;
  color: #a0a7af;
  font-size: clamp(15px, 2.2vw, 19px);
  line-height: 1.6;
}

.site .page:not(.accounts-app-page) {
  width: min(900px, calc(100% - 36px));
  margin: 0 auto;
  padding: 36px 0 120px;
}

.site .page.account-detail-page {
  width: 100%;
  margin: 0;
  padding: 0 0 36px;
}

.site .page[data-page="transfer"] {
  width: 100%;
  margin: 0;
  padding: 0 0 92px;
  background: var(--dull-white);
}

.pay-header {
  min-height: 200px;
  padding: calc(64px + var(--safe-top)) 7.5vw 26px;
  color: #fff;
  background: #f50700 url("assets/optimized/red-bg.webp") center / cover no-repeat;
}

.pay-header-content {
  display: flex;
  align-items: center;
  gap: 24px;
}

.pay-title-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  fill: currentColor;
}

.title-icon-asset {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0.38px 0 0 currentColor) drop-shadow(0 0.38px 0 currentColor);
}

.pay-header h2{margin:0;color:#fff;font-size:clamp(30px,4.7vw,46px);font-weight:300;line-height:1.05}

.pay-actions{background:var(--dull-white)}

.pay-action-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;width:100%;min-height:104px;padding:0 7.5vw;border:0;border-bottom:1px solid rgba(211,217,222,.75);background:transparent;color:#46515c;cursor:pointer;text-align:left}

.pay-action-icon{width:34px;height:34px;fill:currentColor;opacity:.94;object-fit:contain;filter:drop-shadow(0.35px 0 0 currentColor) drop-shadow(0 0.35px 0 currentColor)}
.pay-action-row:nth-child(2) .pay-action-icon{fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.pay-action-row:nth-child(4) .pay-action-icon{fill:none;stroke:currentColor;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round}              

.pay-action-label{color:#858d96;font-size:clamp(17px,2.35vw,22px);font-weight:300;line-height:1.25}

.site .page[data-page="insights"] {
  width: 100%;
  margin: 0;
  padding: 0 0 92px;
  background: var(--dull-white);
}

.site .page[data-page="support"],
.site .page[data-page="more"] {
  width: 100%;
  margin: 0;
  padding: 0 0 92px;
  background: var(--dull-white);
}

.support-header,
.more-header {
  min-height: 132px;
  padding: calc(54px + var(--safe-top)) 7.5vw 22px;
  color: #fff;
  background: #f50700 url("assets/optimized/red-bg.webp") center / cover no-repeat;
}

.support-title-row,
.more-title-row {
  display: flex;
  align-items: center;
  gap: 22px;
}

.support-title-icon,
.more-title-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: rgba(255, 255, 255, 0.94);
}

.support-title-icon .title-icon-asset,
.more-title-icon .title-icon-asset {
  width: 100%;
  height: 100%;
}

.support-header h2,
.more-header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 5.1vw, 48px);
  font-weight: 300;
  line-height: 1.08;
}

.support-body,
.more-body {
  padding: 26px 7.5vw 0;
}

.support-intro-card {
  padding: 4px 0 18px;
}

.support-intro-card h3 {
  margin: 0;
  color: #2f3842;
  font-size: clamp(24px, 3.35vw, 31px);
  font-weight: 400;
}

.support-intro-card p {
  margin: 14px 0 0;
  color: #6f7884;
  font-size: clamp(17px, 2.55vw, 23px);
  line-height: 1.42;
}

.support-chat-btn {
  width: 100%;
  min-height: 72px;
  margin-top: 28px;
  border: 0;
  background: #f50700;
  color: #fff;
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 600;
  cursor: pointer;
}

.support-list,
.more-list {
  margin-top: 12px;
  border-top: 1px solid rgba(211, 217, 222, 0.75);
}

.support-row,
.more-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  align-items: center;
  width: 100%;
  min-height: 92px;
  padding: 0 0;
  border: 0;
  border-bottom: 1px solid rgba(211, 217, 222, 0.75);
  background: transparent;
  color: #3f4853;
  text-align: left;
  cursor: pointer;
}

.support-row::after,
.more-row::after {
  content: "";
  justify-self: end;
  width: 14px;
  height: 14px;
  border-top: 1.5px solid #7d8590;
  border-right: 1.5px solid #7d8590;
  transform: rotate(45deg);
}

.support-row-icon,
.more-row-icon {
  width: 26px;
  height: 26px;
  color: #5f6874;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.support-row:first-child .support-row-icon.icon-img {
  transform: scale(1.18);
  transform-origin: center;
}

.more-row-icon {
  stroke: none;
  fill: currentColor;
}

.support-row span,
.more-row span {
  min-width: 0;
}

.support-row strong,
.more-row span {
  display: block;
  color: #3f4853;
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 400;
  line-height: 1.2;
}

.support-row p {
  margin: 6px 0 0;
  color: #6f7884;
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.35;
}

.insights-header {
  min-height: 132px;
  padding: calc(54px + var(--safe-top)) 7.5vw 22px;
  color: #fff;
  background: #f50700 url("assets/optimized/red-bg.webp") center / cover no-repeat;
}

.insights-title-row {
  display: flex;
  align-items: center;
  gap: 22px;
}

.insights-title-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  fill: currentColor;
}

.insights-title-icon .icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}

.insights-header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 5.1vw, 48px);
  font-weight: 300;
  line-height: 1.08;
}

.insights-body {
  padding: 42px 7.5vw 0;
}

.insights-kicker {
  margin: 0;
  color: #89919b;
  font-size: clamp(21px, 3.1vw, 29px);
  font-weight: 300;
  line-height: 1.25;
}

.insights-kicker strong {
  color: #353e49;
  font-weight: 400;
}

.insightsIntro {
  max-width: 760px;
  margin: 30px 0 0;
  color: #6f7884;
  font-size: clamp(23px, 3.45vw, 32px);
  font-weight: 300;
  line-height: 1.34;
}

.insights-account-select {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 18px;
  width: 100%;
  margin: 34px 0 22px;
  padding: 0 42px 0 0;
  border: 0;
  background: transparent;
  color: #303a45;
  cursor: pointer;
  text-align: left;
}

.insights-account-select span:first-child {
  flex: 0 0 auto;
  color: #222c37;
  font-size: clamp(24px, 3.35vw, 31px);
  font-weight: 400;
  white-space: nowrap;
}

.insights-account-select span:last-child {
  min-width: 0;
  color: #808994;
  font-size: clamp(18px, 2.55vw, 23px);
  font-weight: 300;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insights-account-select::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 8px;
  width: 19px;
  height: 19px;
  border-right: 2px solid #4d5660;
  border-bottom: 2px solid #4d5660;
  transform: rotate(45deg);
}

.insights-tools {
  display: grid;
  gap: 8px;
}

.insights-tool-card {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 34px;
  align-items: center;
  min-height: 132px;
  padding: 0 30px;
  border: 0;
  background: rgba(255, 255, 255, 0.62);
  color: #4a535e;
  cursor: pointer;
  text-align: left;
}

.insights-tool-card::after {
  content: "";
  justify-self: end;
  width: 18px;
  height: 18px;
  border-top: 1.5px solid #59636e;
  border-right: 1.5px solid #59636e;
  transform: rotate(45deg);
}

.insights-tool-card strong {
  display: block;
  color: #78818b;
  font-size: clamp(16px, 2.25vw, 21px);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.insights-tool-card em {
  display: block;
  margin-top: 7px;
  color: #343d48;
  font-size: clamp(20px, 2.75vw, 26px);
  font-style: normal;
  font-weight: 400;
}

.insights-tool-card em .money-amount {
  --money-whole-size: 1em;
  --money-cents-size: 0.62em;
  --money-currency-size: 0.62em;
  --money-sign-size: 0.7em;
}

.insights-tool-icon{display:block;width:78px;height:70px;background:#f4f7f5 center/contain no-repeat;filter:drop-shadow(2px 2px 2px #9997)}.insights-tool-icon.spending{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 180'><path fill='%23c8327f' d='M35 25h32v120H35zm43 35h32v85H78zm43 30h32v55h-32zm43 15h32v40h-32zm8 18h32v22h-32z'/></svg>")}.insights-tool-icon.cashflow{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 220'><path fill='%2379b829' d='M55 78h32v54H55zm70 27h32v32h-32zm70-57h32v88h-32z'/><path fill='%23c8327f' d='M55 132h32v45H55zm70 5h32v58h-32zm70 3h32v30h-32z'/><path d='m20 150 51-5 70 28 70-101 34-17' fill='none' stroke='%23333' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/><g fill='%23d8d8d8' stroke='%23555' stroke-width='4'><circle cx='71' cy='145' r='16'/><circle cx='141' cy='173' r='16'/><circle cx='211' cy='72' r='16'/></g></svg>")}
.site .page.payee-page {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--dull-white);
}

.site .page.new-payee-menu-page,
.site .page.new-payee-form-page {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--dull-white);
}

.site .page.admin-page {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0 0 48px;
  background: #f4f6f8;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 32px;
  background: #f50700;
  color: #fff;
}

.admin-header span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.78;
  text-transform: uppercase;
}

.admin-header h2 {
  margin: 0;
  color: #fff;
  font-size: 30px;
  font-weight: 400;
}

.admin-header button,
.admin-actions button,
.admin-panel button {
  border: 0;
  border-radius: 6px;
  background: #17202b;
  color: #fff;
  cursor: pointer;
  font-weight: 500;
}

.admin-header button {
  padding: 11px 16px;
}

.admin-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 18px;
  border-bottom: 1px solid #d8dde4;
  background: var(--dull-white);
}

.admin-tabs button {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid #d8dde4;
  border-radius: 999px;
  background: var(--dull-white);
  color: #66707c;
  cursor: pointer;
}

.admin-tabs button.active {
  border-color: #17202b;
  background: #17202b;
  color: #fff;
}

.admin-panels {
  width: min(960px, calc(100% - 32px));
  margin: 22px auto 0;
}

.admin-panel {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
  border: 1px solid #dfe4ea;
  border-radius: 8px;
  background: var(--dull-white);
}

.admin-panel.active {
  display: grid;
}

.admin-section-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.admin-section-title h3 {
  margin: 0;
  color: #17202b;
  font-size: 18px;
  font-weight: 500;
}

.admin-repeat-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid #e2e7ed;
  border-radius: 8px;
  background: #fbfcfd;
}

.admin-repeat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.admin-repeat-head strong {
  min-width: 0;
  overflow: hidden;
  color: #17202b;
  font-size: 16px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-repeat-head button,
.admin-panel [data-clear-logo] {
  background: #a82020;
}

.admin-repeat-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-panel label {
  display: grid;
  gap: 7px;
  color: #3f4853;
  font-size: 13px;
  font-weight: 500;
}

.admin-panel input,
.admin-panel textarea {
  width: 100%;
  border: 1px solid #cfd6df;
  border-radius: 6px;
  padding: 11px 12px;
  color: #17202b;
  background: var(--dull-white);
  font-size: 15px;
}

.admin-panel textarea {
  min-height: 110px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.admin-panel [rows="26"],
.admin-panel [rows="18"] {
  grid-column: 1 / -1;
}

.admin-logo-preview {
  display: grid;
  place-items: center;
  min-height: 92px;
  border: 1px dashed #b8c0cb;
  border-radius: 8px;
  color: #7d8692;
  background: #f8fafc;
}

.admin-logo-preview img {
  max-width: 220px;
  max-height: 110px;
  object-fit: contain;
}

.admin-panel button {
  justify-self: start;
  padding: 10px 14px;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 16px 0;
}

.admin-actions button {
  padding: 12px 16px;
}

.admin-actions button:nth-child(2) {
  background: #a82020;
}

#adminStatus {
  color: #425466;
  font-size: 14px;
}

.site .page.no-eligible-page {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: #fbfdfe;
}

.payee-page + .bottom-nav,
.site:has(.payee-page:not([hidden])) .bottom-nav,
.site:has(.new-payee-menu-page:not([hidden])) .bottom-nav,
.site:has(.new-payee-form-page:not([hidden])) .bottom-nav,
.site:has(.payment-review-page:not([hidden])) .bottom-nav,
.site:has(.payment-success-page:not([hidden])) .bottom-nav,
.site:has(.no-eligible-page:not([hidden])) .bottom-nav {
  display: none;
}

.site.full-blocked .no-eligible-page .payee-back,
.site.full-blocked .no-eligible-page .payee-cancel {
  visibility: hidden;
  pointer-events: none;
}

.full-block-app-header {
  display: none;
}

.site.full-blocked .full-block-app-header {
  display: block;
}

.site.full-blocked .no-eligible-page > .payee-header {
  display: none;
}

.site.full-blocked:has(.no-eligible-page:not([hidden])) .bottom-nav {
  display: grid;
}

.site.full-blocked .bottom-nav button[data-disabled="true"] {
  cursor: default;
}

.site.full-blocked .bottom-nav button:not([data-disabled="true"]) {
  cursor: pointer;
}

.site.full-blocked .no-eligible-content {
  min-height: calc(100vh - 116px - 72px);
  padding-bottom: 8vh;
}

.payee-header {
  display: grid;
  grid-template-columns: 54px 1fr 86px;
  align-items: center;
  min-height: 88px;
  padding: calc(18px + var(--safe-top)) 34px 8px;
  background: #f50700 url("assets/optimized/red-bg.webp") center / cover no-repeat;
  color: #fff;
}

.page[data-page="existing-payee"] .payee-header {
  background: var(--dull-white);
  color: #4b5562;
  border-bottom: 1px solid rgba(211, 217, 222, 0.75);
}

.no-eligible-page .payee-header {
  background: var(--dull-white);
  color: #4b5562;
  border-bottom: 1px solid rgba(211, 217, 222, 0.75);
}

.page[data-page="existing-payee"] .payee-header h2 {
  color: #171d23;
  font-weight: 700;
}

.no-eligible-page .payee-header h2 {
  color: #4b5562;
}

.page[data-page="existing-payee"] .payee-back,
.page[data-page="existing-payee"] .payee-cancel {
  color: #30373e;
}

.no-eligible-page .payee-back,
.no-eligible-page .payee-cancel {
  color: #6d7580;
}

.no-eligible-page .payee-back::before {
  left: 16px;
  top: 13px;
  width: 14px;
  height: 14px;
  border-left-width: 1.5px;
  border-bottom-width: 1.5px;
}

.payee-header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(15px, 2.1vw, 19px);
  font-weight: 500;
  text-align: center;
}

.payee-back,
.payee-cancel {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
}

.payee-back {
  position: relative;
  width: 44px;
  height: 44px;
}

.payee-back::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 11px;
  width: 18px;
  height: 18px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.payee-cancel {
  justify-self: end;
  padding: 0;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 500;
}

.payee-form {
  padding: 44px 0 0;
}

.payee-select-row {
  position: relative;
  display: grid;
  gap: 14px;
  width: 100%;
  min-height: 96px;
  padding: 0 12.5vw 18px;
  border: 0;
  border-bottom: 1px solid rgba(211, 217, 222, 0.8);
  background: transparent;
  color: #59636e;
  cursor: pointer;
  text-align: left;
}

.payee-select-row + .payee-select-row {
  padding-top: 18px;
}

.payee-select-row span {
  color: #1c2329;
  font-size: clamp(14px, 2.1vw, 18px);
  font-weight: 700;
}

.payee-select-row strong {
  color: #6d757d;
  font-size: clamp(16px, 2.45vw, 21px);
  font-weight: 500;
}

.payee-select-row small {
  display: block;
  margin-top: -16px;
  color: #9aa3ad;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 300;
}

.transfer-field-row:has(small) {
  gap: 14px;
}

.transfer-field-row:has(small) strong {
  color: #18212b;
  font-weight: 700;
}

.payee-select-row::after {
  content: "";
  position: absolute;
  right: 12.5vw;
  bottom: 35px;
  width: 13px;
  height: 13px;
  border-top: 2.4px solid #6f7882;
  border-right: 2.4px solid #6f7882;
  transform: rotate(45deg);
}

.no-eligible-content {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: calc(100vh - var(--app-header-height));
  padding: 0 34px 18vh;
  text-align: center;
}

.transfer-picker[hidden] {
  display: none;
}

.transfer-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(17, 24, 39, 0.18);
}

.transfer-account-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 41;
  width: min(100%, var(--phone-width, 430px));
  min-height: 39vh;
  padding: 26px 28px 50px;
  border-radius: 18px 18px 0 0;
  background: var(--dull-white);
  box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.14);
  transform: translateX(-50%);
}

.transfer-account-sheet header,
.transfer-payee-picker header {
  display: grid;
  grid-template-columns: 1fr 42px;
  align-items: center;
  gap: 18px;
}

.transfer-account-sheet h3,
.transfer-payee-picker h3 {
  margin: 0;
  color: #4d555d;
  font-size: 18px;
  font-weight: 600;
}

.transfer-account-sheet [data-transfer-close],
.transfer-payee-picker [data-transfer-close] {
  position: relative;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.transfer-account-sheet [data-transfer-close]::before,
.transfer-account-sheet [data-transfer-close]::after,
.transfer-payee-picker [data-transfer-close]::before,
.transfer-payee-picker [data-transfer-close]::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 20px;
  width: 24px;
  height: 1.5px;
  background: #8c959d;
}

.transfer-account-sheet [data-transfer-close]::before,
.transfer-payee-picker [data-transfer-close]::before {
  transform: rotate(45deg);
}

.transfer-account-sheet [data-transfer-close]::after,
.transfer-payee-picker [data-transfer-close]::after {
  transform: rotate(-45deg);
}

.transfer-account-list {
  display: grid;
  gap: 22px;
  margin-top: 48px;
}

.transfer-account-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  width: 100%;
  border: 0;
  background: transparent;
  color: #8d96a0;
  text-align: left;
  cursor: pointer;
  padding-bottom: 21px;
  border-bottom: 1px solid rgba(119, 127, 134, 0.2);
}

.transfer-account-option strong,
.transfer-account-option small {
  display: block;
}

.transfer-account-option strong {
  color: #151b20;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.transfer-account-option small {
  margin-top: 8px;
  color: #656e76;
  font-size: 16px;
  font-weight: 400;
}

.transfer-account-option em {
  margin-top: 5px;
  color: #252c32;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
}

.transfer-account-option em .money-amount {
  gap: 0;
}

.transfer-account-option em .amount-currency {
  margin-left: 6px;
}

.transfer-account-option em .amount-whole,
.transfer-account-option em .amount-cents,
.transfer-account-option em .amount-currency,
.transfer-account-option em .amount-sign {
  font-weight: 700;
}

.transfer-payee-picker {
  position: fixed;
  inset: 0;
  z-index: 45;
  padding: 74px 30px 34px;
  background: var(--dull-white);
  overflow-y: auto;
}

.transfer-add-payee {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 72px;
  margin-top: 22px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(211, 217, 222, 0.78);
  background: transparent;
  color: #4a5561;
  text-align: left;
  cursor: pointer;
}

.transfer-add-payee span,
.new-payee-start span {
  position: relative;
  width: 28px;
  height: 28px;
}

.transfer-add-payee span::before,
.transfer-add-payee span::after,
.new-payee-start span::before,
.new-payee-start span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 1.5px;
  background: #48545e;
  transform: translate(-50%, -50%);
}

.transfer-add-payee span::after,
.new-payee-start span::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.transfer-add-payee strong,
.new-payee-start strong {
  font-size: 18px;
  font-weight: 400;
}

.new-payee-menu-header {
  display: grid;
  grid-template-columns: 1fr 46px;
  align-items: center;
  min-height: 116px;
  padding: calc(36px + var(--safe-top)) 34px 14px;
  border-bottom: 1px solid rgba(211, 217, 222, 0.72);
}

.new-payee-menu-header h2 {
  margin: 0;
  color: #273039;
  font-size: 20px;
  font-weight: 500;
}

.new-payee-menu-header button,
.new-payee-form-header button:first-child {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
}

.new-payee-menu-header button::before,
.new-payee-menu-header button::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 21px;
  width: 27px;
  height: 1.7px;
  background: #2f3941;
}

.new-payee-menu-header button::before { transform: rotate(45deg); }
.new-payee-menu-header button::after { transform: rotate(-45deg); }

.new-payee-start {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 104px;
  padding: 0 40px;
  border: 0;
  border-bottom: 1px solid rgba(211, 217, 222, 0.78);
  background: transparent;
  color: #59636e;
  text-align: left;
}

.new-payee-company-search {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 8px;
  height: 54px;
  margin: 44px 38px 0;
  padding: 0 15px;
  border-radius: 8px;
  background: #eef3f5;
}

.new-payee-company-search span {
  position: relative;
  width: 25px;
  height: 25px;
}

.new-payee-company-search span::before {
  content: "";
  position: absolute;
  inset: 1px 6px 6px 1px;
  border: 2px solid #7f8b96;
  border-radius: 50%;
}

.new-payee-company-search span::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 2px;
  width: 10px;
  height: 2px;
  background: #7f8b96;
  transform: rotate(45deg);
}

.new-payee-company-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #697581;
  font-size: 18px;
}

.new-payee-form-page {
  height: 100vh;
  overflow-y: auto;
}

.new-payee-form-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 60px 1fr 72px;
  align-items: center;
  min-height: 96px;
  padding: calc(22px + var(--safe-top)) 26px 8px;
  background: var(--dull-white);
}

.new-payee-form-header h2 {
  margin: 0;
  color: #202830;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

.new-payee-form-header button:first-child::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 12px;
  width: 17px;
  height: 17px;
  border-left: 2px solid #36414a;
  border-bottom: 2px solid #36414a;
  transform: rotate(45deg);
}

.new-payee-form-header button:last-child {
  border: 0;
  background: transparent;
  color: #202830;
  font-size: 17px;
  font-weight: 500;
}

.new-payee-details {
  display: grid;
  gap: 34px;
  padding: 38px 48px 58px;
}

.new-payee-details > label {
  display: grid;
  gap: 9px;
}

.new-payee-details strong,
.new-payee-details legend {
  color: #252e36;
  font-size: 16px;
  font-weight: 500;
}

.new-payee-details input:not([type="radio"]) {
  width: 100%;
  height: 42px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid #9ba5ad;
  outline: 0;
  background: transparent;
  color: #37424c;
  font-size: 21px;
  font-weight: 300;
}

.new-payee-details input::placeholder { color: #9aa4ad; opacity: 1; }
.new-payee-details small { color: #8c969f; font-size: 14px; font-weight: 300; }
.new-payee-help { line-height: 1.45; }

.new-payee-input-row { position: relative; display: block; }
.new-payee-input-row i {
  position: absolute;
  right: 2px;
  top: 7px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #28343d;
  border-radius: 50%;
  color: #28343d;
  font-family: Georgia, serif;
  font-style: normal;
  font-weight: 700;
}

.new-payee-details fieldset { display: grid; gap: 16px; margin: 0; padding: 0; border: 0; }
.new-payee-details legend { margin-bottom: 14px; }
.new-payee-radio { display: flex; align-items: center; gap: 14px; min-height: 38px; color: #89939b; font-size: 15px; }
.new-payee-radio input {
  appearance: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 1.7px solid #6c7780;
  border-radius: 50%;
  background: transparent;
}
.new-payee-radio input:checked { border: 1.7px solid #00847e; background: radial-gradient(circle, #00847e 0 4px, transparent 4.5px); }
.new-payee-notice { margin: 2px 0 0; color: #858f98; font-size: 14px; line-height: 1.45; }
.new-payee-check {
  min-height: 70px;
  margin-top: 8px;
  border: 0;
  background: #db0011;
  color: #fff;
  font-size: 20px;
}
.new-payee-check:disabled { background: #e6e9eb; color: #35404a; }

.payee-search {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 6px;
  height: 48px;
  margin: 30px 0 22px;
  padding: 0 15px;
  border-radius: 9px;
  background: #eef3f4;
}

.payee-search span {
  position: relative;
  width: 22px;
  height: 22px;
}

.payee-search span::before {
  content: "";
  position: absolute;
  inset: 2px 6px 6px 2px;
  border: 2px solid #8f99a3;
  border-radius: 50%;
}

.payee-search span::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 9px;
  height: 2px;
  background: #8f99a3;
  transform: rotate(45deg);
}

.payee-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #58636f;
  font-size: 17px;
}

.payee-alpha {
  display: flex;
  align-items: center;
  min-height: 54px;
  margin: 0 -30px;
  padding: 0 30px;
  background: #f1f1f1;
  color: #202326;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.payee-list {
  display: grid;
}

.payee-option {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  min-height: 84px;
  padding: 11px 0;
  border: 0;
  background: transparent;
  color: #9aa3ad;
  text-align: left;
  cursor: pointer;
}

.payee-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid #a8b0b8;
  border-radius: 50%;
  color: #8c959d;
  font-size: 17px;
}

.payee-option strong,
.payee-option small {
  display: block;
}

.payee-option strong {
  margin-top: 1px;
  color: #4a5561;
  font-size: 19px;
  font-weight: 800;
}

.payee-option small {
  margin-top: 6px;
  color: #b3bbc3;
  font-size: 13px;
  font-weight: 300;
}

.payee-empty {
  margin: 24px 0 0;
  color: #8a939d;
  font-size: 16px;
}

.payment-entry-form {
  display: grid;
  gap: 28px;
  padding: 28px 12.5vw 54px;
  color: #323b44;
}

.payment-entry-form label,
.payment-entry-form fieldset {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  border: 0;
  color: #26313b;
  font-size: 15px;
  font-weight: 700;
}

.payment-entry-form input[type="text"] {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #bfc6cc;
  outline: 0;
  background: transparent;
  color: #7c858e;
  font-size: 20px;
  font-weight: 300;
}

.payment-entry-form label small {
  color: #8d96a0;
  font-size: 14px;
  font-weight: 300;
}

.payment-entry-form legend {
  margin-bottom: 15px;
  color: #26313b;
  font-size: 15px;
  font-weight: 700;
}

.payment-radio-row {
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  color: #7d8791;
  font-size: 20px;
  font-weight: 300;
}

.payment-radio-row input {
  accent-color: #2d6f66;
  width: 24px;
  height: 24px;
}

.payment-radio-row strong {
  color: #65707a;
  font-size: 18px;
  font-weight: 400;
}

.review-transaction-button {
  width: 100%;
  min-height: 64px;
  margin-top: 42px;
  border: 0;
  background: #d7dcdd;
  color: #46515b;
  font-size: 17px;
  font-weight: 500;
}

.review-transaction-button:not(:disabled),
.payment-primary-button {
  background: #db0011;
  color: #fff;
}

.review-transaction-button:disabled {
  cursor: default;
}

.payment-money-input {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  align-items: end;
  border-bottom: 1px solid #bfc6cc;
}

.payment-money-input input[type="text"] {
  width: min(130px, 46vw);
  border-bottom: 0;
}

.payment-money-input em {
  padding-bottom: 2px;
  color: #59636e;
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
}

.payment-standing-row {
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 52px;
}

.payment-standing-row input {
  appearance: none;
  width: 54px;
  height: 30px;
  margin: 0;
  border-radius: 16px;
  background: #858b90;
  cursor: pointer;
  transition: background 160ms ease;
}

.payment-standing-row input::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  margin: 2px;
  border-radius: 50%;
  background: #fff;
  transition: transform 160ms ease;
}

.payment-standing-row input:checked { background: #00847e; }
.payment-standing-row input:checked::before { transform: translateX(24px); }

.payment-date-input {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid #bfc6cc;
  background: transparent;
  color: #59636e;
  font: inherit;
}

.payment-entry-error,
.payment-review-error {
  margin: 0;
  color: #a8000d;
  font-size: 14px;
  line-height: 1.4;
}

.payment-review-page,
.payment-success-page {
  min-height: 100vh;
  background: #fbfdfe;
}

.payment-flow-header {
  position: sticky;
  top: 0;
  z-index: 5;
}

.payment-review-body {
  width: min(100%, 620px);
  margin: 0 auto;
  padding: 14px 30px 44px;
  color: #4d5660;
}

.payment-summary-list {
  margin: 0;
}

.payment-summary-list > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(211, 217, 222, 0.72);
}

.payment-summary-list dt {
  color: #747e87;
  font-size: 15px;
  font-weight: 300;
}

.payment-summary-list dd {
  margin: 0;
  color: #303840;
  text-align: right;
}

.payment-summary-list dd strong,
.payment-summary-list dd small { display: block; }
.payment-summary-list dd strong { font-size: 16px; font-weight: 500; }
.payment-summary-list dd small { margin-top: 5px; color: #858f98; font-size: 13px; font-weight: 300; }

.payment-information {
  padding: 28px 0;
  border-bottom: 1px solid rgba(211, 217, 222, 0.72);
}

.payment-information h3 {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 20px;
  color: #303840;
  font-size: 17px;
  font-weight: 500;
}

.payment-information h3 span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #f5a800;
  color: #25303a;
  font-size: 17px;
  font-weight: 700;
}

.payment-important-information h3 span { background: #2468a2; color: #fff; }

.payment-information p {
  margin: 0;
  color: #69737c;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.53;
}

.payment-information p + p { margin-top: 24px; }

.payment-primary-button,
.payment-secondary-button {
  width: 100%;
  min-height: 58px;
  margin-top: 28px;
  border: 0;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
}

.payment-primary-button:disabled { opacity: 0.58; cursor: default; }

.payment-secondary-button {
  margin-top: 14px;
  border: 1px solid #67717b;
  background: transparent;
  color: #303840;
}

.payment-success-header {
  min-height: 86px;
  padding: calc(26px + var(--safe-top)) 24px 16px;
  text-align: center;
}

.payment-success-header h2 { margin: 0; color: #28313a; font-size: 17px; font-weight: 500; }

.payment-success-body {
  width: min(100%, 620px);
  margin: 0 auto;
  padding: 22px 30px 44px;
  text-align: center;
}

.payment-success-mark {
  position: relative;
  width: 54px;
  height: 54px;
  margin: 0 auto 24px;
  border: 2px solid #00847e;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  animation: payment-success-circle 420ms cubic-bezier(0.2, 0.9, 0.32, 1.25) forwards;
}

.payment-success-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 10px;
  border-left: 2px solid #00847e;
  border-bottom: 2px solid #00847e;
  opacity: 0;
  transform: translate(-50%, -62%) rotate(-45deg) scale(0);
  transform-origin: center;
  animation: payment-success-tick 280ms ease-out 330ms forwards;
}

@keyframes payment-success-circle {
  0% { opacity: 0; transform: scale(0); }
  72% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes payment-success-tick {
  0% { opacity: 0; transform: translate(-50%, -62%) rotate(-45deg) scale(0); }
  65% { opacity: 1; transform: translate(-50%, -62%) rotate(-45deg) scale(1.18); }
  100% { opacity: 1; transform: translate(-50%, -62%) rotate(-45deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .payment-success-mark,
  .payment-success-mark::after {
    animation: none;
    opacity: 1;
  }

  .payment-success-mark { transform: none; }
  .payment-success-mark::after { transform: translate(-50%, -62%) rotate(-45deg); }
}

.payment-success-body > h2 { margin: 0; color: #00847e; font-size: 27px; font-weight: 300; }
.payment-success-body > p { max-width: 480px; margin: 25px auto 24px; color: #5f6972; font-size: 15px; font-weight: 300; line-height: 1.45; }
.payment-success-body .payment-summary-list { text-align: left; }

.warning-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
  object-fit: contain;
}

.no-eligible-content h2 {
  margin: 0;
  color: #4d5661;
  font-size: clamp(25px, 3.8vw, 34px);
  font-weight: 300;
  line-height: 1.15;
}

.no-eligible-content p {
  max-width: 380px;
  margin: 25px 0 0;
  color: #6e7884;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.42;
}

@media (min-width: 760px) {
  .app-header {
    padding-left: 64px;
    padding-right: 64px;
  }

  .account-screen-body {
    padding-left: 64px;
    padding-right: 64px;
  }
}

@media (max-width: 620px) {
  .account-detail-page {
    --detail-header-sticky-height: calc(82px + var(--safe-top));
  }

  .detail-top {
    padding-top: var(--detail-header-sticky-height);
  }

  .app-header {
    min-height: 124px;
    padding: calc(55px + var(--safe-top)) 27px 20px;
  }

  .header-content {
    gap: 11px;
  }

  .header-wallet {
    width: 28px;
    height: 28px;
  }

  .masked-name {
    max-width: 260px;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.05;
  }

  .account-screen-body {
    padding: 27px 18px 0;
  }

  .mobile-account-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 21px;
    min-height: 124px;
    padding-bottom: 29px;
  }

  .account-card-icon {
    width: 52px;
    height: 78px;
    border-radius: 4px;
    font-size: 9px;
  }

  .account-card-top strong {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .account-card-top strong:last-child {
    font-size: 17px;
  }

  .account-card-main p,
  .account-card-top span {
    margin-top: 9px;
    font-size: 13px;
    font-weight: 500;
    line-height: 0.9;
  }

  .account-card-top {
    gap: 12px;
  }

  .account-amount {
    gap: 0;
    --money-whole-size: 1em;
    --money-cents-size: 1em;
    --money-currency-size: 0.76em;
    --money-sign-size: 0.72em;
  }

  .account-card-top .account-amount {
    font-size: 17px;
  }

  .account-card-top span.account-amount {
    font-size: 17px;
  }

  .account-amount .amount-currency {
    margin-left: 5px;
  }

  .as-of {
    margin: 24px 0 0 14px;
    font-size: 16px !important;
    line-height: 1.35;
    white-space: nowrap;
  }

  .accounts-promo-carousel {
    width: calc(100% + 36px);
    margin: 26px -18px 0;
    padding: 28px 18px 20px;
  }

  .accounts-promo-card {
    padding: 60px 12px 25px;
  }

  .accounts-promo-close {
    top: 18px;
    right: 18px;
    width: 20px;
    height: 20px;
  }

  .accounts-promo-close::before,
  .accounts-promo-close::after {
    top: 9px;
    width: 19px;
  }

  .accounts-promo-copy {
    padding-top: 22px;
  }

  .accounts-promo-copy h2 {
    margin-bottom: 18px;
    font-size: 19px;
    line-height: 1.12;
  }

  .accounts-promo-copy p {
    margin-bottom: 21px;
    font-size: 14px;
    line-height: 1.38;
  }

  .accounts-promo-cta {
    font-size: 15px;
  }

  .accounts-promo-controls {
    min-height: 40px;
    margin-top: 12px;
  }

  .accounts-promo-dot {
    width: 12px;
    height: 12px;
  }

  .detail-header {
    grid-template-columns: 42px 1fr 42px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: calc(82px + var(--safe-top));
    padding: calc(24px + var(--safe-top)) 18px 8px;
    z-index: 45;
    background: #f8fbfc url("assets/optimized/account-details-bg.webp") center top / 135% 150% no-repeat;
  }

  .detail-header h2 {
    font-size: 17px;
  }

  .detail-header p {
    font-size: 14px;
  }

  .detail-balance-area {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 12px;
    padding: 8px 24px 0;
  }

  .detail-label {
    font-size: clamp(14px, 4.35vw, 17px);
  }

  .detail-balance {
    font-size: 40px;
  }

  .detail-card-placeholder {
    width: 104px;
    height: 148px;
    transform: translateY(-8px);
  }

  .detail-stats {
    padding: 0 24px 6px;
  }

  .stat-row {
    grid-template-columns: 34px max-content minmax(52px, 130px);
    gap: 7px;
  }

  .stat-row > span,
  .detail-stats p {
    font-size: 14px;
  }

  .detail-stats p {
    margin-top: 10px;
  }

  .stat-row strong {
    font-size: 16px;
  }

  .detail-tabs button {
    min-height: 60px;
    font-size: 16px;
  }

  .detail-transactions {
    padding: 18px 28px 0;
  }

  .transaction-date-row > strong,
  .transaction-date-row > span {
    font-size: 18px;
  }

  .detail-transaction-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 12px;
  }

  .transaction-arrow {
    width: 42px;
    height: 42px;
  }

  .transaction-arrow::before {
    left: 10px;
    top: 20px;
    width: 20px;
  }

  .transaction-arrow::after {
    right: 11px;
    top: 15px;
  }

  .detail-transaction-row strong {
    font-size: 18px;
  }

  .detail-transaction-row > strong:last-child {
    font-size: 17px;
  }

  .pay-header {
    min-height: 200px;
    padding: calc(60px + var(--safe-top)) 28px 24px;
  }

  .pay-header-content {
    gap: 18px;
  }

  .pay-title-icon {
    width: 31px;
    height: 31px;
  }

  .pay-header h2 {
    font-size: 31px;
  }

  .pay-action-row {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    min-height: 88px;
    padding: 0 28px;
  }

  .pay-action-icon {
    width: 32px;
    height: 32px;
  }

  .pay-action-label {
    font-size: 17px;
  }

  .insights-header {
    min-height: 116px;
    padding: calc(52px + var(--safe-top)) 28px 20px;
  }

  .support-header,
  .more-header {
    min-height: 116px;
    padding: calc(52px + var(--safe-top)) 28px 20px;
  }

  .support-title-row,
  .more-title-row {
    gap: 17px;
  }

  .support-title-icon,
  .more-title-icon {
    width: 31px;
    height: 31px;
  }

  .support-header h2,
  .more-header h2 {
    font-size: 32px;
    font-weight: 300;
  }

  .support-body,
  .more-body {
    padding: 22px 28px 0;
  }

  .support-intro-card h3 {
    font-size: 17px;
  }

  .support-intro-card p {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.36;
  }

  .support-chat-btn {
    min-height: 58px;
    margin-top: 22px;
    font-size: 21px;
  }

  .support-list,
  .more-list {
    margin-top: 10px;
  }

  .support-row,
  .more-row {
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    min-height: 74px;
  }

  .support-row-icon,
  .more-row-icon {
    width: 22px;
    height: 22px;
  }

  .support-row strong,
  .more-row span {
    font-size: 17px;
  }

  .support-row p {
    margin-top: 4px;
    font-size: 13px;
  }

  .insights-title-row {
    gap: 17px;
  }

  .insights-title-icon {
    width: 51px;
    height: 51px;
  }

  .insights-header h2 {
    font-size: 32px;
    font-weight: 300;
  }

  .insights-body {
    padding: 35px 28px 0;
  }

  .insights-kicker {
    font-size: 22px;
  }

  .insightsIntro {
    margin-top: 25px;
    font-size: 22px;
    line-height: 1.34;
  }

  .insights-account-select {
    gap: 10px;
    margin: 29px 0 20px;
    padding-right: 30px;
  }

  .insights-account-select span:first-child {
    font-size: 21px;
  }

  .insights-account-select span:last-child {
    font-size: 16px;
  }

  .insights-tool-card {
    grid-template-columns: 84px minmax(0, 1fr) 28px;
    min-height: 94px;
    padding: 0 20px;
  }

  .insights-tool-icon {
    width: 56px;
    height: 50px;
  }

  .insights-tool-card strong {
    font-size: 15px;
  }

  .insights-tool-card em {
    margin-top: 5px;
    font-size: 18px;
  }

  .payee-header {
    grid-template-columns: 42px 1fr 68px;
    min-height: 88px;
    padding: calc(18px + var(--safe-top)) 24px 8px;
  }

  .payee-header h2 {
    font-size: 13px;
  }

  .payee-cancel {
    font-size: 13px;
  }

  .payee-form {
    padding-top: 32px;
  }

  .payee-select-row {
    min-height: 86px;
    padding: 0 28px 16px;
    gap: 12px;
  }

  .payee-select-row + .payee-select-row {
    padding-top: 16px;
  }

  .payee-select-row span {
    font-size: 13px;
    font-weight: 700;
  }

  .payee-select-row strong {
    font-size: 16px;
    font-weight: 500;
  }

  .payee-select-row small {
    margin-top: -8px;
    font-size: 12px;
  }

  .payee-select-row::after {
    right: 30px;
    bottom: 31px;
    width: 12px;
    height: 12px;
    border-top-width: 2.4px;
    border-right-width: 2.4px;
  }

  .no-eligible-content {
    min-height: calc(100vh - var(--app-header-height));
    padding: 0 28px 13vh;
  }

  .warning-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
  }

  .no-eligible-content h2 {
    font-size: 25px;
  }

  .no-eligible-content p {
    max-width: 320px;
    margin-top: 25px;
    font-size: 15px;
  }

  .transfer-account-sheet {
    min-height: 39vh;
    padding: 24px 28px 46px;
  }

  .transfer-account-list {
    gap: 20px;
    margin-top: 46px;
  }

  .transfer-account-option strong {
    font-size: 18px;
  }

  .transfer-account-option small {
    font-size: 14px;
  }

  .transfer-payee-picker {
    padding: 66px 28px 30px;
  }

  .payee-alpha {
    margin-right: -28px;
    margin-left: -28px;
    padding-right: 28px;
    padding-left: 28px;
  }

  .transfer-add-payee {
    min-height: 64px;
    margin-top: 16px;
  }

  .transfer-add-payee strong,
  .new-payee-start strong {
    font-size: 16px;
  }

  .new-payee-menu-header {
    min-height: 100px;
    padding: calc(28px + var(--safe-top)) 28px 12px;
  }

  .new-payee-menu-header h2 {
    font-size: 17px;
  }

  .new-payee-start {
    min-height: 92px;
    padding: 0 32px;
  }

  .new-payee-company-search {
    height: 50px;
    margin: 36px 30px 0;
  }

  .new-payee-company-search input {
    font-size: 16px;
  }

  .new-payee-form-header {
    grid-template-columns: 50px 1fr 64px;
    min-height: 84px;
    padding: calc(18px + var(--safe-top)) 20px 8px;
  }

  .new-payee-form-header h2,
  .new-payee-form-header button:last-child {
    font-size: 15px;
  }

  .new-payee-details {
    gap: 28px;
    padding: 30px 34px 46px;
  }

  .new-payee-details strong,
  .new-payee-details legend {
    font-size: 14px;
  }

  .new-payee-details input:not([type="radio"]) {
    height: 38px;
    font-size: 18px;
  }

  .new-payee-details small,
  .new-payee-notice {
    font-size: 12px;
  }

  .new-payee-radio {
    min-height: 38px;
    font-size: 14px;
  }

  .new-payee-check {
    min-height: 62px;
    font-size: 18px;
  }

  .payee-option {
    min-height: 76px;
    gap: 14px;
  }

  .payee-option strong {
    font-size: 17px;
  }

  .payment-entry-form {
    gap: 25px;
    padding: 24px 32px 48px;
  }

  .payment-radio-row {
    font-size: 18px;
  }

  .admin-header {
    padding: 22px 18px;
  }

  .admin-header h2 {
    font-size: 24px;
  }

  .admin-panels {
    width: calc(100% - 24px);
  }

  .admin-panel {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .admin-repeat-fields {
    grid-template-columns: 1fr;
  }
}
  

.login-gate {
  position: fixed;
  inset: 0;
  z-index: 9;
  min-height: 100vh;
  padding: calc(28px + var(--safe-top)) 28px 24px;
  overflow: hidden;
  color: #fff;
  background: #750d17;
}

.login-menu {
  position: absolute;
  top: calc(12px + var(--safe-top));
  right: 28px;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 24px 0 28px;
}

.login-brand strong {
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.login-logo {
  display: block;
  width: 50px;
  height: auto;
  object-fit: contain;
}

.login-panel {
  position: relative;
  z-index: 1;
}

.login-panel h1 {
  margin: 0 0 18px;
  color: #fff;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.03em;
}

.login-username-panel label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
}

.login-username-panel input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #161616;
  font-size: 20px;
  outline: none;
}

.login-primary {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 22px;
  border: 0;
  background: #fff;
  color: #750d17;
  font-size: 18px;
  font-weight: 800;
}

.passcode-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: start;
  gap: 12px;
}

.login-passcode-panel h1 {
  margin-bottom: 8px;
  font-size: 30px;
  font-weight: 300;
}

.login-passcode-panel p {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.login-protected-badge {
  display: grid;
  place-items: center;
  width: 58px;
  min-height: 62px;
}

.login-protected-badge img {
  display: block;
  width: 54px;
  height: auto;
  object-fit: contain;
}

.passcode-dots {
  display: flex;
  justify-content: center;
  gap: 22px;
  width: 100%;
  /* margin: 74px 0 16px; */
  border: 0;
  background: transparent;
}

.passcode-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  transition: transform 120ms ease, background 120ms ease;
}

.passcode-dots span.filled {
  background: #f01912;
  transform: scale(1.12);
}

.passcode-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.passcode-submit {
  max-width: 220px;
  margin: 28px auto 0;
}

.digital-security-button {
  position: fixed;
  left: 40px;
  right: 40px;
  bottom: calc(max(34px, env(safe-area-inset-bottom) + 26px) + var(--keyboard-offset));
  z-index: 2;
  min-height: 58px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: transparent;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}

.login-username-panel:not([hidden]) ~ .login-passcode-panel .digital-security-button,
.login-passcode-panel[hidden] .digital-security-button {
  display: none;
}

.login-loading-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 45%;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: transparent;
}

.login-loading-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(55, 5, 11, 0.42);
  border-top-color: rgba(35, 3, 8, 0.98);
  border-radius: 50%;
  animation: loginSpinnerRotate 760ms linear infinite;
}

.login-gate.is-loading .passcode-dots {
  visibility: hidden;
}

.login-gate.is-loading .digital-security-button {
  display: none;
}

@keyframes loginSpinnerRotate {
  to {
    transform: rotate(360deg);
  }
}

.security-device-screen {
  position: fixed;
  inset: 0;
  z-index: 4;
  min-height: 100vh;
  overflow-y: auto;
  padding-bottom: max(32px, env(safe-area-inset-bottom) + 20px);
  background: var(--dull-white);
  color: #343d49;
}

.security-device-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: calc(56px + var(--safe-top));
  padding: var(--safe-top) 18px 0;
  background: var(--dull-white);
}

.security-device-header h1 {
  grid-column: 2;
  margin: 0;
  color: #1f2933;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.security-device-back {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
}

.security-device-back::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 14px;
  width: 14px;
  height: 14px;
  border-left: 2px solid #5d6670;
  border-bottom: 2px solid #5d6670;
  transform: rotate(45deg);
}

.security-device-body {
  padding: 52px 28px 0;
}

.security-device-body h2 {
  margin: 0 0 28px;
  color: #4b5562;
  font-size: 28px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.security-warning {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  margin: 0 0 48px;
  color: #5e6874;
}

.security-warning span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: #f3aa20;
  color: #28313b;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.security-warning p {
  margin: 0;
  font-size: 16px;
  line-height: 1.36;
}

.security-info-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0 0 56px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2f3843;
  text-align: left;
}

.security-info-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  line-height: 1;
}

.security-image-icon {
  border: 0;
  border-radius: 0;
}

.security-image-icon img {
  display: block;
  width: 23px;
  height: 23px;
  object-fit: contain;
}

.security-info-row strong {
  font-size: 17px;
  font-weight: 700;
}

.security-code-list {
  border-top: 1px solid rgba(211, 217, 222, 0.8);
}

.security-code-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 90px;
  padding: 14px 26px 14px 0;
  border: 0;
  border-bottom: 1px solid rgba(211, 217, 222, 0.8);
  background: transparent;
  color: #313b46;
  text-align: left;
}

.security-code-row::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 13px;
  height: 13px;
  border-top: 2px solid #68727d;
  border-right: 2px solid #68727d;
  transform: translateY(-50%) rotate(45deg);
}

.security-code-row strong {
  display: block;
  margin-bottom: 7px;
  font-size: 17px;
  font-weight: 800;
}

.security-code-row small {
  display: block;
  color: #7d8791;
  font-size: 14px;
  line-height: 1.25;
}

.security-code-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}

.security-code-icon img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.login-error {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 22px;
  margin: 16px 0 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

@media (min-width: 520px) {
  .login-gate {
    left: 50%;
    width: min(100vw, 430px);
    transform: translateX(-50%);
  }

  .security-device-screen {
    left: 50%;
    width: min(100vw, 430px);
    transform: translateX(-50%);
  }

  .digital-security-button {
    left: calc(50% - min(100vw, 430px) / 2 + 40px);
    right: calc(50% - min(100vw, 430px) / 2 + 40px);
  }
}

@media (max-width: 380px) {
  .login-gate {
    padding-left: 24px;
    padding-right: 24px;
  }

  .passcode-dots {
    gap: 18px;
  }

  .digital-security-button {
    left: 32px;
    right: 32px;
  }

  .security-device-body {
    padding: 48px 24px 0;
  }

  .security-device-body h2 {
    font-size: 26px;
  }
}

.passcode-submit {
  display: none;
}

/* Keep passcode controls inside the visible area when the native keyboard opens. */
.login-gate.keyboard-open {
  top: var(--login-viewport-top, 0px);
  bottom: auto;
  height: var(--login-viewport-height, 100dvh);
  min-height: 0;
  padding-top: max(12px, var(--safe-top));
}

.login-gate.keyboard-open .login-menu {
  top: max(10px, var(--safe-top));
}

.login-gate.keyboard-open .login-brand {
  margin: 30px 0 16px;
}

.login-gate.keyboard-open .login-passcode-panel {
  position: static;
  min-height: 0;
}

.login-gate.keyboard-open .passcode-title-row {
  position: relative;
}

.login-gate.keyboard-open .passcode-dots {
  position: static;
  width: 100%;
  margin: 34px 0 0;
  visibility: visible;
  opacity: 1;
  transform: none;
}

.login-gate.keyboard-open .face-id-login-button,
.login-gate.keyboard-open .digital-security-button {
  position: absolute;
  left: 12px;
  right: 12px;
}

.login-gate.keyboard-open .face-id-login-button {
  bottom: 70px;
}

.login-gate.keyboard-open .digital-security-button {
  bottom: 10px;
}

.login-gate.keyboard-compact .face-id-login-button,
.login-gate.keyboard-compact .digital-security-button {
  display: none;
}

.login-gate.keyboard-compact .login-brand {
  margin-top: 20px;
  margin-bottom: 12px;
}

.login-gate.keyboard-compact .passcode-dots {
  margin-top: 24px;
}

/* Keep long business transaction references on one line on phone screens. */
.detail-transaction-row > div:nth-child(2) {
  min-width: 0;
}

.detail-transaction-row > div:nth-child(2) > strong {
  display: block;
  overflow: hidden;
  font-size: clamp(15px, 2.7vw, 25px);
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .detail-transaction-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .detail-transaction-row > div:nth-child(2) > strong,
  .detail-transaction-row > strong:last-child {
    font-size: 15px;
  }
}

/* Admin workspace redesign */
.site .page.admin-page {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  min-height: 100vh;
  padding: 0;
  background: #edf1f5;
  color: #111827;
}

.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px 18px;
  overflow-y: auto;
  background: linear-gradient(180deg, #111827 0%, #1f2937 62%, #991b1b 100%);
  color: #fff;
}

.admin-header {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: inherit;
}

.admin-header span {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-header h2 {
  margin: 0;
  color: #fff;
  font-size: 23px;
  line-height: 1.15;
}

.admin-header button,
.admin-section-title button,
.admin-actions button {
  border: 0;
  border-radius: 12px;
  min-height: 44px;
  padding: 0 18px;
  font-weight: 800;
  cursor: pointer;
}

.admin-header button {
  width: 100%;
  color: #111827;
  background: var(--dull-white);
}

.admin-tabs {
  display: grid;
  gap: 8px;
  margin: 0;
}

.admin-tabs button {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 13px 14px;
  color: rgba(255, 255, 255, 0.76);
  background: rgba(255, 255, 255, 0.06);
  font-size: 14px;
  font-weight: 800;
  text-align: left;
}

.admin-tabs button.active {
  color: #111827;
  background: var(--dull-white);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

.admin-workspace {
  min-width: 0;
  padding: 28px;
  overflow: auto;
}

.admin-workspace-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto 20px;
  padding: 4px 2px;
}

.admin-workspace-head span {
  display: block;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.admin-workspace-head strong {
  display: block;
  margin-top: 4px;
  font-size: 30px;
  line-height: 1.1;
}

.admin-panels {
  max-width: 1180px;
  margin: 0 auto;
}

.admin-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  border: 0;
  border-radius: 24px;
  padding: 24px;
  background: var(--dull-white);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.admin-panel.active {
  display: grid;
}

.admin-panel label {
  color: #374151;
  font-size: 13px;
  font-weight: 800;
}

.admin-panel input,
.admin-panel textarea,
.admin-panel select {
  border: 1px solid #d7dde5;
  border-radius: 12px;
  min-height: 44px;
  padding: 10px 12px;
  background: #f9fafb;
  font: inherit;
}

.admin-panel input:focus,
.admin-panel textarea:focus,
.admin-panel select:focus {
  outline: 2px solid rgba(220, 38, 38, 0.2);
  border-color: #dc2626;
  background: var(--dull-white);
}

.admin-section-title,
.admin-section-title.full {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
}

.admin-section-title h3 {
  margin: 0;
  font-size: 22px;
}

.admin-section-title button,
.admin-actions button[type="submit"] {
  color: #fff;
  background: #e30613;
}

.admin-section-hero {
  align-items: flex-start;
  border-radius: 20px;
  padding: 22px;
  color: #fff;
  background: linear-gradient(135deg, #111827 0%, #991b1b 58%, #e30613 100%);
}

.admin-section-hero p {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.admin-section-hero h3 {
  color: #fff;
  font-size: 28px;
}

.admin-section-hero span {
  display: block;
  margin-top: 8px;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.45;
}

.admin-section-hero button {
  background: var(--dull-white);
  color: #991b1b;
}

.admin-user-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.admin-user-card {
  display: grid;
  gap: 16px;
  border: 1px solid #e4e8ef;
  border-radius: 20px;
  padding: 18px;
  background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.admin-user-summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.admin-user-avatar {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: #111827;
  font-size: 20px;
  font-weight: 900;
}

.admin-user-summary strong,
.admin-user-summary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-summary strong {
  font-size: 17px;
}

.admin-user-summary small {
  margin-top: 3px;
  color: #6b7280;
  font-size: 12px;
}

.admin-user-summary em {
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.admin-user-summary em.enabled {
  color: #047857;
  background: #d1fae5;
}

.admin-user-summary em.disabled {
  color: #991b1b;
  background: #fee2e2;
}

.admin-user-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-user-meta div {
  min-width: 0;
  border-radius: 14px;
  padding: 10px;
  background: #f3f5f8;
}

.admin-user-meta dt {
  color: #6b7280;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-user-meta dd {
  overflow: hidden;
  margin: 5px 0 0;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-fields,
.admin-repeat-fields.admin-user-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-user-fields label:has(input[type="hidden"]) {
  display: none;
}

.admin-user-actions {
  display: flex;
  justify-content: flex-end;
}

.admin-user-actions button,
.admin-repeat-card > button {
  border: 0;
  border-radius: 12px;
  min-height: 40px;
  padding: 0 14px;
  color: #991b1b;
  background: #fee2e2;
  font-weight: 900;
}

.admin-help {
  grid-column: 1 / -1;
  border-radius: 16px;
  padding: 14px 16px;
  color: #4b5563;
  background: #f3f5f8;
  font-size: 14px;
  line-height: 1.45;
}

.admin-repeat-card {
  border: 1px solid #e4e8ef;
  border-radius: 18px;
  padding: 18px;
  background: #fbfcfd;
}

.admin-repeat-card h4 {
  color: #111827;
}

.admin-repeat-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-actions {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
  padding: 18px;
  border-radius: 18px;
  background: var(--dull-white);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

#adminStatus {
  min-width: 140px;
  color: #047857;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .site .page.admin-page {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    height: auto;
    padding: 18px;
  }

  .admin-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .admin-tabs button {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }

  .admin-workspace {
    padding: 18px;
  }
}

@media (max-width: 620px) {
  .admin-workspace-head strong {
    font-size: 24px;
  }

  .admin-panel {
    grid-template-columns: 1fr;
    border-radius: 18px;
    padding: 16px;
  }

  .admin-section-title,
  .admin-section-title.full,
  .admin-section-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-user-grid {
    grid-template-columns: 1fr;
  }

  .admin-user-summary {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .admin-user-summary em {
    grid-column: 1 / -1;
    width: max-content;
  }

  .admin-user-meta,
  .admin-user-fields,
  .admin-repeat-fields.admin-user-fields,
  .admin-repeat-fields {
    grid-template-columns: 1fr;
  }

  .admin-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #adminStatus {
    min-width: 0;
  }
}

.admin-sidebar .admin-tabs {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.admin-sidebar .admin-tabs button {
  flex: none;
  width: 100%;
  border-radius: 14px;
}

/* Admin list/editor screens */
.admin-list-card,
.admin-editor-card {
  grid-column: 1 / -1;
  border: 1px solid #e4e8ef;
  border-radius: 20px;
  background: var(--dull-white);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.admin-list-head,
.admin-list-row {
  display: grid;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}

.admin-user-list-head,
.admin-user-list-row {
  grid-template-columns: minmax(220px, 1.5fr) minmax(160px, 1fr) 110px 110px 170px;
}

.admin-account-list-head,
.admin-account-list-row {
  grid-template-columns: minmax(220px, 1.4fr) minmax(190px, 1fr) minmax(150px, 0.75fr) 110px 170px;
}

.admin-list-head {
  color: #6b7280;
  background: #f3f5f8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-list-row {
  min-height: 76px;
  border-top: 1px solid #edf0f4;
  background: var(--dull-white);
}

.admin-list-row:hover {
  background: #fbfcfd;
}

.admin-list-row strong,
.admin-list-row small,
.admin-list-row code {
  display: block;
}

.admin-list-row strong {
  color: #111827;
  font-size: 15px;
  font-weight: 900;
}

.admin-list-row small {
  margin-top: 4px;
  color: #6b7280;
  font-size: 12px;
}

.admin-list-row code {
  overflow: hidden;
  color: #374151;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-list-user {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.admin-list-user .admin-user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-size: 17px;
}

.admin-status-pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.admin-status-pill.enabled {
  color: #047857;
  background: #d1fae5;
}

.admin-status-pill.disabled {
  color: #991b1b;
  background: #fee2e2;
}

.admin-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.admin-row-actions button,
.admin-editor-head button {
  border: 0;
  border-radius: 11px;
  min-height: 38px;
  padding: 0 13px;
  font-weight: 900;
  cursor: pointer;
}

.admin-row-actions button:first-child,
.admin-editor-head button {
  color: #111827;
  background: #e5e7eb;
}

.admin-row-actions button:last-child {
  color: #991b1b;
  background: #fee2e2;
}

.admin-editor-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border-radius: 20px;
  padding: 18px 20px;
  color: #fff;
  background: linear-gradient(135deg, #111827 0%, #991b1b 70%, #e30613 100%);
}

.admin-editor-head p,
.admin-editor-head h3,
.admin-editor-head span {
  margin: 0;
}

.admin-editor-head p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-editor-head h3 {
  margin-top: 3px;
  color: #fff;
  font-size: 26px;
}

.admin-editor-head span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}

.admin-editor-head button {
  background: var(--dull-white);
}

.admin-editor-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 20px;
}

.admin-editor-card .admin-field-note {
  align-self: end;
  margin: 0;
  border-radius: 12px;
  padding: 12px;
  color: #4b5563;
  background: #f3f5f8;
  font-size: 13px;
  font-weight: 700;
}

.admin-empty-state {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 28px;
  color: #6b7280;
  text-align: center;
}

.admin-empty-state strong {
  color: #111827;
  font-size: 18px;
}

.admin-empty-state span {
  margin-top: 6px;
  font-size: 14px;
}

@media (max-width: 980px) {
  .admin-list-head {
    display: none;
  }

  .admin-user-list-row,
  .admin-account-list-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .admin-row-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .admin-editor-head {
    grid-template-columns: 1fr;
  }

  .admin-editor-card {
    grid-template-columns: 1fr;
    padding: 16px;
  }
}

.admin-editor-head .admin-editor-save {
  justify-self: end;
  color: #fff;
  background: #e30613;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

@media (max-width: 620px) {
  .admin-editor-head .admin-editor-save {
    justify-self: stretch;
  }
}

.admin-data-group {
  border-top: 1px solid #edf0f4;
  background: var(--dull-white);
}

.admin-data-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: #f8fafc;
}

.admin-data-group > header strong {
  color: #111827;
  font-size: 16px;
  font-weight: 900;
}

.admin-data-group > header span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.admin-account-subgroup {
  border-top: 1px solid #edf0f4;
  padding: 14px 18px 18px;
}

.admin-account-subgroup h4 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  color: #111827;
  font-size: 15px;
  font-weight: 900;
}

.admin-account-subgroup h4 span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.admin-transaction-card {
  margin: 10px 0 0;
  box-shadow: none;
}

.admin-sub-empty {
  margin: 0;
  border-radius: 12px;
  padding: 12px;
  color: #6b7280;
  background: #f3f5f8;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 620px) {
  .admin-data-group > header,
  .admin-account-subgroup h4 {
    align-items: flex-start;
    flex-direction: column;
  }
}

.admin-wizard-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.admin-wizard-card {
  display: grid;
  gap: 8px;
  min-height: 150px;
  border: 1px solid #e4e8ef;
  border-radius: 20px;
  padding: 20px;
  color: #111827;
  background: var(--dull-white);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
  text-align: left;
  cursor: pointer;
}

.admin-wizard-card:hover {
  border-color: #e30613;
  transform: translateY(-1px);
}

.admin-wizard-card strong {
  font-size: 18px;
  font-weight: 900;
}

.admin-wizard-card span {
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
}

.admin-wizard-card em {
  align-self: end;
  color: #991b1b;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.admin-wizard-head {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.admin-detail-editor {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-detail-editor label:nth-child(4),
.admin-detail-editor label:nth-child(5) {
  grid-column: 1 / -1;
}

@media (max-width: 620px) {
  .admin-wizard-grid,
  .admin-detail-editor {
    grid-template-columns: 1fr;
  }

  .admin-wizard-head {
    grid-template-columns: 1fr;
  }
}

.admin-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border-radius: 14px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.09);
}

.admin-mode-switch button {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.76);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.admin-mode-switch button.active {
  color: #111827;
  background: var(--dull-white);
}

/* Neutral full-width admin layout */
.site .page.admin-page {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  grid-template-columns: 280px minmax(0, 1fr);
  background: #f3f4f6;
  color: #111827;
}

.admin-sidebar {
  gap: 18px;
  padding: 22px 16px;
  background: #ffffff;
  color: #111827;
  border-right: 1px solid #e5e7eb;
  box-shadow: none;
}

.admin-header {
  gap: 14px;
  padding: 0 0 18px;
  border-bottom: 1px solid #e5e7eb;
  color: #111827;
}

.admin-header span {
  color: #6b7280;
}

.admin-header h2 {
  color: #111827;
  font-size: 22px;
}

.admin-header button {
  width: 100%;
  color: #111827;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  box-shadow: none;
}

.admin-header button:hover {
  background: #e5e7eb;
}

.admin-mode-switch {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

.admin-mode-switch button {
  border: 0;
  color: #6b7280;
  background: transparent;
}

.admin-mode-switch button.active {
  color: #111827;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.admin-sidebar .admin-tabs {
  gap: 4px;
}

.admin-sidebar .admin-tabs button,
.admin-tabs button {
  border: 0;
  border-radius: 10px;
  padding: 12px 13px;
  color: #4b5563;
  background: transparent;
  box-shadow: none;
  font-weight: 700;
}

.admin-sidebar .admin-tabs button:hover,
.admin-tabs button:hover {
  color: #111827;
  background: #f3f4f6;
}

.admin-sidebar .admin-tabs button.active,
.admin-tabs button.active {
  color: #111827;
  background: #e5e7eb;
  box-shadow: none;
}

.admin-workspace {
  min-width: 0;
  width: 100%;
  padding: 28px 32px;
  background: #f3f4f6;
}

.admin-workspace-head {
  max-width: none;
  margin: 0 0 18px;
  padding: 0;
}

.admin-workspace-head span {
  color: #6b7280;
}

.admin-workspace-head strong {
  color: #111827;
  font-size: 28px;
}

.admin-panels {
  width: 100%;
  max-width: none;
  margin: 0;
}

.admin-panel {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px;
  background: #ffffff;
  box-shadow: none;
}

.admin-panel input,
.admin-panel textarea,
.admin-panel select {
  background: #ffffff;
}

.admin-panel input:focus,
.admin-panel textarea:focus,
.admin-panel select:focus {
  border-color: #2563eb;
  outline: 3px solid rgba(37, 99, 235, 0.14);
  background: #ffffff;
}

.admin-section-title button,
.admin-actions button[type="submit"],
.admin-editor-head .admin-editor-save {
  color: #ffffff;
  background: #2563eb;
  box-shadow: none;
}

.admin-section-title button:hover,
.admin-actions button[type="submit"]:hover,
.admin-editor-head .admin-editor-save:hover {
  background: #1d4ed8;
}

.admin-section-hero,
.admin-editor-head {
  color: #111827;
  background: #eef2ff;
  border: 1px solid #dbeafe;
}

.admin-section-hero p,
.admin-section-hero h3,
.admin-section-hero span,
.admin-editor-head p,
.admin-editor-head h3,
.admin-editor-head span {
  color: #111827;
}

.admin-section-hero p,
.admin-editor-head p {
  color: #6b7280;
}

.admin-section-hero button,
.admin-editor-head button {
  color: #111827;
  background: #ffffff;
  border: 1px solid #d1d5db;
}

.admin-list-card,
.admin-editor-card,
.admin-wizard-card,
.admin-actions {
  border-color: #e5e7eb;
  background: #ffffff;
  box-shadow: none;
}

.admin-list-head {
  background: #f9fafb;
}

.admin-list-row {
  background: #ffffff;
}

.admin-list-row:hover {
  background: #f9fafb;
}

.admin-row-actions button:first-child {
  color: #111827;
  background: #e5e7eb;
}

.admin-row-actions button:last-child,
.admin-user-actions button,
.admin-repeat-card > button {
  color: #991b1b;
  background: #fee2e2;
}

.admin-user-card,
.admin-repeat-card,
.admin-data-group,
.admin-wizard-card {
  background: #ffffff;
}

.admin-user-avatar {
  background: #374151;
}

.admin-wizard-card:hover {
  border-color: #2563eb;
}

.admin-wizard-card em {
  color: #2563eb;
}

@media (max-width: 900px) {
  .site .page.admin-page {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    border-right: 0;
    border-bottom: 1px solid #e5e7eb;
  }

  .admin-workspace {
    padding: 22px;
  }
}

/* Admin card grids for users and accounts */
.admin-card-search {
  grid-column: 1 / -1;
}

.admin-card-search input {
  width: 100%;
  min-height: 48px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  padding: 0 16px;
  background: #ffffff;
  color: #111827;
  font-size: 15px;
}

.admin-card-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.admin-entity-card {
  display: grid;
  gap: 16px;
  min-width: 0;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 18px;
  background: #ffffff;
}

.admin-entity-card[hidden] {
  display: none;
}

.admin-entity-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.admin-entity-card > header span {
  display: block;
  color: #6b7280;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-entity-card > header strong {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: #111827;
  font-size: 18px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-entity-card > header small {
  display: block;
  margin-top: 4px;
  color: #6b7280;
  font-size: 13px;
}

.admin-account-status-stack {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.admin-status-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 112px;
  min-height: 34px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  color: #374151;
  background: #f3f4f6;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-status-toggle i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #9ca3af;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}

.admin-status-toggle.active {
  border-color: #86efac;
  color: #166534;
  background: #dcfce7;
}

.admin-status-toggle.active i {
  background: #16a34a;
}

.admin-status-toggle.blocked {
  border-color: #fecaca;
  color: #991b1b;
  background: #fee2e2;
}

.admin-status-toggle.blocked i {
  background: #dc2626;
}

.admin-card-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.admin-card-meta div {
  min-width: 0;
  border-radius: 12px;
  padding: 11px;
  background: #f9fafb;
}

.admin-card-meta dt {
  color: #6b7280;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-card-meta dd {
  overflow: hidden;
  margin: 5px 0 0;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-card-meta code {
  font-family: inherit;
}

.admin-entity-card .admin-row-actions {
  justify-content: flex-start;
}

@media (max-width: 620px) {
  .admin-card-grid,
  .admin-card-meta {
    grid-template-columns: 1fr;
  }
}

/* Admin wizard */
.admin-other-tabs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-bottom: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 6px;
  background: #f9fafb;
}

.admin-other-tabs button {
  flex: 1 1 130px;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  color: #4b5563;
  background: transparent;
  font-size: 13px;
  font-weight: 900;
}

.admin-other-tabs button.active {
  color: #ffffff;
  background: #2563eb;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
}

.admin-other-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.48);
}

.admin-modal {
  display: grid;
  gap: 18px;
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 22px;
  padding: 22px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

.admin-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 14px;
}

.admin-modal > header p {
  margin: 0;
  color: #6b7280;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-modal > header h3 {
  margin: 5px 0 4px;
  color: #111827;
  font-size: 22px;
}

.admin-modal > header span {
  color: #6b7280;
  font-size: 13px;
}

.admin-modal > header button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  color: #111827;
  background: #f3f4f6;
  font-size: 22px;
}

.admin-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-modal-grid label {
  display: grid;
  gap: 7px;
  color: #374151;
  font-size: 12px;
  font-weight: 900;
}

.admin-modal-grid input,
.admin-modal-grid select {
  min-height: 44px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 0 12px;
  color: #111827;
  background: #ffffff;
  font-size: 14px;
}

.admin-modal footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
}

.admin-modal footer button {
  min-height: 42px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 0 16px;
  color: #111827;
  background: #ffffff;
  font-weight: 900;
}

.admin-modal footer button:last-child {
  color: #ffffff;
  background: #2563eb;
  border-color: #2563eb;
}

.admin-wizard-head-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.admin-wizard-head-actions button {
  min-height: 40px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 0 14px;
  color: #111827;
  background: #ffffff;
  font-weight: 900;
}

.admin-wizard-head-actions .admin-editor-save {
  color: #ffffff;
  background: #2563eb;
  border-color: #2563eb;
}

.admin-wizard-control-tabs {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 6px;
  background: #f9fafb;
}

.admin-wizard-control-tabs button {
  flex: 1 1 0;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  color: #4b5563;
  background: transparent;
  font-size: 14px;
  font-weight: 900;
}

.admin-wizard-control-tabs button.active {
  color: #ffffff;
  background: #2563eb;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
}

.admin-wizard-controls {
  grid-column: 1 / -1;
  display: grid;
  gap: 18px;
  width: 100%;
}

.admin-control-section {
  display: grid;
  gap: 16px;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 18px;
  background: #ffffff;
}

.admin-control-section > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #eef2f7;
  padding-bottom: 14px;
}

.admin-control-section > header p,
.admin-wizard-tool-head h3 {
  margin: 0;
}

.admin-control-section > header p {
  color: #6b7280;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-control-section > header h4 {
  margin: 5px 0 4px;
  color: #111827;
  font-size: 20px;
}

.admin-control-section > header span {
  color: #6b7280;
  font-size: 13px;
}

.admin-control-section > header button {
  flex: 0 0 auto;
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  padding: 0 14px;
  color: #ffffff;
  background: #2563eb;
  font-weight: 900;
}

.admin-wizard-repeat {
  display: grid;
  gap: 14px;
}

.admin-wizard-tool-head {
  margin-top: 4px;
  border-radius: 14px;
  background: #f9fafb;
}

@media (max-width: 620px) {
  .admin-modal-grid {
    grid-template-columns: 1fr;
  }

  .admin-wizard-control-tabs {
    flex-direction: column;
  }
}

/* Business service screens: match the compact native-app reference spacing. */
.site .page.service-page {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.service-header {
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  min-height: calc(58px + var(--safe-top));
  padding: calc(6px + var(--safe-top)) 14px 9px;
}

.service-header-with-action {
  grid-template-columns: 40px minmax(0, 1fr) 58px;
}

.service-header h2 {
  font-size: 17px;
  line-height: 1.2;
}

.service-back {
  width: 36px;
  height: 36px;
}

.service-back::before {
  left: 10px;
  top: 10px;
  width: 13px;
  height: 13px;
  border-width: 0 0 1.5px 1.5px;
}

.service-menu-row {
  grid-template-columns: minmax(0, 1fr) 22px;
  min-height: 68px;
  padding: 0 28px;
}

.service-menu-row > span:last-child {
  font-size: 16px;
  line-height: 1.25;
}

.service-menu-row::after {
  width: 10px;
  height: 10px;
  border-width: 1.5px 1.5px 0 0;
}

.service-menu-row.linked-cards-row {
  grid-template-columns: 28px minmax(0, 1fr) 22px;
  gap: 10px;
}

.linked-card-icon {
  width: 22px;
  height: 22px;
  transform: scale(0.88);
  transform-origin: left center;
}

/* Business admin: account-scoped payee wizard controls. */
.admin-payee-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px;
  background: #f9fafb;
}

.admin-payee-card .admin-repeat-head {
  align-items: center;
}

.admin-payee-card .admin-repeat-head > div:first-child {
  display: grid;
  gap: 4px;
}

.admin-payee-card .admin-repeat-head span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.admin-payee-card .admin-card-meta {
  margin: 14px 0 0;
}

.admin-payee-modal .admin-modal-grid label:last-child {
  grid-column: 1 / -1;
}

.admin-payee-modal-error {
  margin: 0 24px 14px;
  padding: 10px 12px;
  border-left: 3px solid #db0011;
  background: #fff1f2;
  color: #9f1239;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.admin-payee-modal [data-payee-modal-save]:disabled {
  cursor: wait;
  opacity: 0.65;
}

/* Keep the balance label and information icon visible on narrow phones. */
@media (max-width: 430px) {
  .detail-label {
    display: inline-block;
    max-width: 100%;
    overflow: visible;
    font-size: clamp(10px, 3.35vw, 14px);
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
  }

  .detail-label::after {
    display: inline-grid;
    width: 17px;
    height: 17px;
    margin-left: 4px;
    font-size: 11px;
    vertical-align: middle;
  }
}

@media (max-width: 620px) {
  .admin-payee-modal .admin-modal-grid label:last-child {
    grid-column: auto;
  }
}

/* Transaction details must fill the viewport without the generic page gutters. */
.site .page.transaction-detail-page {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* Native-style business contact details. */
.business-contact-body {
  padding: 26px 0 70px;
}

.business-contact-body > h3 {
  margin: 18px 28px 34px;
  font-size: 29px;
  font-weight: 300;
}

.business-contact-body .contact-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.business-contact-body .contact-group + .contact-group {
  margin-top: 34px;
}

.business-contact-body .contact-group h4 {
  margin: 0;
  padding: 0 28px 16px;
  font-size: 18px;
  font-weight: 500;
}

.business-contact-body .contact-value-row {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 78px;
  margin: 0;
  padding: 15px 58px 14px 28px;
  border: 0;
  border-bottom: 1px solid rgba(125, 132, 137, 0.18);
  background: #fff;
  color: #6c7379;
  text-align: left;
}

.business-contact-body .contact-value-row strong {
  color: #343a40;
  font-size: 17px;
  font-weight: 500;
}

.business-contact-body .contact-value-row span {
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.22;
  white-space: pre-line;
}

.business-contact-body .contact-action-row::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  width: 12px;
  height: 12px;
  border-top: 1.5px solid #636b72;
  border-right: 1.5px solid #636b72;
  transform: translateY(-50%) rotate(45deg);
}

.business-contact-body .contact-address-group .contact-value-row {
  min-height: 132px;
}

/* Linked cards reference screen. */
.linked-cards-page { background: #fff; }
.linked-cards-body { display: flex; flex-direction: column; min-height: calc(100vh - 76px - var(--safe-top)); padding: 28px 27px calc(28px + var(--safe-bottom)); }
.linked-cards-list .service-card-summary { width: 100%; padding: 0 0 18px; border: 0; border-bottom: 1px solid rgba(125, 132, 137, 0.24); background: transparent; text-align: left; }
.linked-cards-list .service-card-account-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-bottom: 18px; }
.linked-cards-list .service-card-account-row strong { font-size: 20px; font-weight: 400; }
.linked-cards-list .service-card-account-row span { justify-self: end; font-size: 15px; text-align: right; white-space: nowrap; }
.linked-cards-list .service-card-detail-row { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
.linked-cards-list .service-card-image { width: 50px; height: 56px; overflow: visible; border-radius: 0; background: transparent; }
.linked-cards-list .service-card-image img { display: block; width: 50px; height: 56px; object-fit: fill; }
.linked-cards-list .service-card-detail-row strong { font-size: 19px; font-weight: 400; }
.linked-cards-list .service-card-detail-row small { margin-top: 5px; font-size: 14px; font-weight: 300; }
.linked-cards-help { margin-top: auto; padding-top: 58px; }
.linked-cards-help > strong { display: block; margin-bottom: 8px; color: #2d3338; font-size: 16px; font-weight: 500; }
.linked-cards-help p { margin: 0 0 22px; color: #666e75; font-size: 14px; font-weight: 300; line-height: 1.45; }
.linked-cards-help button { width: 100%; min-height: 58px; border: 1px solid #4f565c; background: #fff; color: #33393e; font: inherit; font-size: 17px; }

/* Match the View PIN card selector to the linked-card layout. */
.pin-select-body .service-card-account-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.pin-select-body .service-card-account-row span { justify-self: end; text-align: right; white-space: nowrap; }
.pin-select-body .service-card-detail-row { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
.pin-select-body .service-card-image { width: 50px; height: 56px; overflow: visible; border-radius: 0; background: transparent; }
.pin-select-body .service-card-image img { display: block; width: 50px; height: 56px; object-fit: fill; }

/* Existing-payee payment flow: full-width, plain-white native layout. */
.site .page[data-page="existing-payee"],
.site .page.payment-review-page,
.site .page.payment-success-page {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  background: #fff;
}

.site:has(.page[data-page="existing-payee"]:not([hidden])) .mobile-app,
.site:has(.payment-review-page:not([hidden])) .mobile-app,
.site:has(.payment-success-page:not([hidden])) .mobile-app {
  padding-bottom: 0;
  background: #fff;
}

.page[data-page="existing-payee"] .payee-header,
.payment-review-page .payee-header {
  grid-template-columns: 40px minmax(0, 1fr) 62px;
  min-height: 76px;
  padding: calc(10px + var(--safe-top)) 20px 6px;
  border: 0;
  border-bottom: 1px solid rgba(213, 218, 222, 0.22);
  background: #fff;
  color: #303840;
}

.page[data-page="existing-payee"] .payee-header h2,
.payment-review-page .payee-header h2 {
  color: #20272d;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.page[data-page="existing-payee"] .payee-back,
.page[data-page="existing-payee"] .payee-cancel,
.payment-review-page .payee-back,
.payment-review-page .payee-cancel {
  color: #303840;
}

.page[data-page="existing-payee"] .payee-back,
.payment-review-page .payee-back {
  width: 36px;
  height: 36px;
}

.page[data-page="existing-payee"] .payee-back::before,
.payment-review-page .payee-back::before {
  left: 11px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-left-width: 1.5px;
  border-bottom-width: 1.5px;
}

.page[data-page="existing-payee"] .payee-cancel,
.payment-review-page .payee-cancel {
  font-size: 15px;
  font-weight: 400;
}

.page[data-page="existing-payee"] .payee-form {
  padding: 26px 0 0;
}

.page[data-page="existing-payee"] .payee-select-row {
  min-height: 92px;
  gap: 9px;
  padding: 0 30px 20px;
  border-bottom-color: rgba(196, 202, 207, 0.48);
}

.page[data-page="existing-payee"] .payee-select-row + .payee-select-row {
  padding-top: 20px;
}

.page[data-page="existing-payee"] .payee-select-row span {
  color: #303840;
  font-size: 14px;
  font-weight: 400;
}

.page[data-page="existing-payee"] .payee-select-row strong {
  color: #313941;
  font-size: 19px;
  font-weight: 500;
}

.page[data-page="existing-payee"] .payee-select-row small {
  margin-top: -5px;
  color: #8b949d;
  font-size: 13px;
  font-weight: 300;
}

.page[data-page="existing-payee"] .payee-select-row::after {
  right: 31px;
  bottom: 39px;
  width: 11px;
  height: 11px;
  border-width: 1.5px 1.5px 0 0;
}

.page[data-page="existing-payee"] .payment-entry-form {
  gap: 24px;
  padding: 26px 30px calc(34px + var(--safe-bottom));
  color: #303840;
}

.page[data-page="existing-payee"] .payment-entry-form label,
.page[data-page="existing-payee"] .payment-entry-form fieldset,
.page[data-page="existing-payee"] .payment-entry-form legend {
  color: #303840;
  font-size: 14px;
  font-weight: 400;
}

.page[data-page="existing-payee"] .payment-entry-form input[type="text"] {
  min-height: 38px;
  border-bottom-color: #aeb6bd;
  color: #626c75;
  font-size: 20px;
  font-weight: 300;
}

.page[data-page="existing-payee"] .payment-entry-form label small {
  color: #9aa2a9;
  font-size: 12px;
}

.page[data-page="existing-payee"] .payment-money-input {
  border-bottom-color: #aeb6bd;
}

.page[data-page="existing-payee"] .payment-money-input em {
  color: #4e5862;
  font-size: 18px;
}

.page[data-page="existing-payee"] .payment-standing-row {
  min-height: 58px;
  font-size: 16px;
}

.page[data-page="existing-payee"] .payment-standing-row input {
  appearance: none;
  -webkit-appearance: none;
  width: 51px;
  min-width: 51px;
  height: 31px;
  min-height: 31px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: #8e8e93;
  box-shadow: none;
  outline: 0;
}

.page[data-page="existing-payee"] .payment-standing-row input::before {
  width: 27px;
  height: 27px;
  margin: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.page[data-page="existing-payee"] .payment-standing-row input:checked {
  background: #34c759;
}

.page[data-page="existing-payee"] .payment-standing-row input:checked::before {
  transform: translateX(20px);
}

.page[data-page="existing-payee"] .payment-radio-row {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 48px;
  color: #737d86;
  font-size: 18px;
  font-weight: 300;
}

.page[data-page="existing-payee"] .payment-radio-row input {
  width: 24px;
  height: 24px;
}

.page[data-page="existing-payee"] .payment-radio-row strong {
  color: #59636d;
  font-size: 17px;
  font-weight: 400;
}

.page[data-page="existing-payee"] .review-transaction-button {
  min-height: 58px;
  margin-top: 26px;
  font-size: 17px;
  font-weight: 500;
}

.payment-flow-header {
  position: relative;
  top: auto;
  z-index: 2;
  box-shadow: none;
}

.payment-review-body {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 30px calc(34px + var(--safe-bottom));
  background: #fff;
}

.payment-summary-list > div {
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 18px;
  min-height: 84px;
  padding: 20px 0;
  border-bottom-color: rgba(196, 202, 207, 0.48);
}

.payment-summary-list dt {
  color: #6d7780;
  font-size: 15px;
  font-weight: 300;
}

.payment-summary-list dd strong {
  color: #303840;
  font-size: 16px;
  font-weight: 500;
}

.payment-summary-list dd small {
  color: #858f98;
  font-size: 13px;
}

.payment-information {
  padding: 26px 0;
  border-bottom-color: rgba(196, 202, 207, 0.48);
}

.payment-information h3 {
  gap: 13px;
  margin-bottom: 19px;
  color: #303840;
  font-size: 17px;
  font-weight: 500;
}

.payment-information p {
  color: #68727b;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
}

.payment-review-page .payment-primary-button {
  min-height: 58px;
  margin-top: 26px;
}

.payment-success-header {
  min-height: 78px;
  padding: calc(22px + var(--safe-top)) 24px 14px;
  border: 0;
  background: #fff;
}

.payment-success-header h2 {
  color: #20272d;
  font-size: 16px;
  font-weight: 400;
}

.payment-success-body {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px 30px calc(34px + var(--safe-bottom));
  background: #fff;
}

.payment-success-body > h2 {
  font-size: 27px;
  font-weight: 300;
}

.payment-success-body > p {
  margin: 24px auto 20px;
  font-size: 15px;
  line-height: 1.45;
}

.payment-success-body .payment-summary-list > div {
  min-height: 80px;
}

.payment-success-body .payment-primary-button,
.payment-success-body .payment-secondary-button {
  min-height: 58px;
}

@media (max-width: 420px) {
  .page[data-page="existing-payee"] .payee-header,
  .payment-review-page .payee-header {
    padding-right: 18px;
    padding-left: 18px;
  }

  .page[data-page="existing-payee"] .payment-entry-form,
  .payment-review-body,
  .payment-success-body {
    padding-right: 28px;
    padding-left: 28px;
  }
}

/* Compact phone proportions from the side-by-side payment reference. */
@media (max-width: 600px) {
  .page[data-page="existing-payee"] .payee-header,
  .payment-review-page .payee-header {
    grid-template-columns: 34px minmax(0, 1fr) 56px;
    min-height: 68px;
    padding: calc(8px + var(--safe-top)) 18px 5px;
  }

  .page[data-page="existing-payee"] .payee-header h2,
  .payment-review-page .payee-header h2 {
    font-size: 13px;
  }

  .page[data-page="existing-payee"] .payee-cancel,
  .payment-review-page .payee-cancel {
    font-size: 13px;
  }

  .page[data-page="existing-payee"] .payee-back,
  .payment-review-page .payee-back {
    width: 32px;
    height: 32px;
  }

  .page[data-page="existing-payee"] .payee-back::before,
  .payment-review-page .payee-back::before {
    left: 10px;
    top: 9px;
    width: 10px;
    height: 10px;
    border-left-width: 1.25px;
    border-bottom-width: 1.25px;
  }

  .page[data-page="existing-payee"] .payee-form {
    padding-top: 20px;
  }

  .page[data-page="existing-payee"] .payee-select-row {
    min-height: 86px;
    gap: 6px;
    padding: 0 25px 14px;
  }

  .page[data-page="existing-payee"] .payee-select-row + .payee-select-row {
    padding-top: 14px;
  }

  .page[data-page="existing-payee"] .payee-select-row span {
    font-size: 12px;
  }

  .page[data-page="existing-payee"] .payee-select-row strong {
    font-size: 15px;
    font-weight: 400;
  }

  .page[data-page="existing-payee"] .payee-select-row small {
    margin-top: -2px;
    font-size: 11px;
  }

  .page[data-page="existing-payee"] .payee-select-row::after {
    right: 25px;
    bottom: 31px;
    width: 9px;
    height: 9px;
    border-width: 1.25px 1.25px 0 0;
  }

  .page[data-page="existing-payee"] .payment-entry-form {
    gap: 15px;
    padding: 21px 25px calc(24px + var(--safe-bottom));
  }

  .page[data-page="existing-payee"] .payment-entry-form label,
  .page[data-page="existing-payee"] .payment-entry-form fieldset,
  .page[data-page="existing-payee"] .payment-entry-form legend {
    gap: 7px;
    font-size: 12px;
  }

  .page[data-page="existing-payee"] .payment-entry-form legend {
    margin-bottom: 5px;
  }

  .page[data-page="existing-payee"] .payment-entry-form input[type="text"] {
    min-height: 32px;
    padding: 0;
    border-radius: 0;
    font-size: 16px;
  }

  .page[data-page="existing-payee"] .payment-entry-form label small {
    margin-top: -1px;
    font-size: 11px;
  }

  .page[data-page="existing-payee"] .payment-money-input {
    grid-template-columns: 46px auto 1fr;
    align-items: center;
    column-gap: 5px;
  }

  .page[data-page="existing-payee"] .payment-money-input input[type="text"] {
    width: 46px;
  }

  .page[data-page="existing-payee"] .payment-money-input em {
    padding: 0;
    font-size: 16px;
  }

  .page[data-page="existing-payee"] .payment-standing-row {
    margin-top: 12px;
    min-height: 42px;
    font-size: 14px;
  }

  .page[data-page="existing-payee"] .payment-standing-row input {
    width: 44px;
    min-width: 44px;
    height: 24px;
    min-height: 24px;
  }

  .page[data-page="existing-payee"] .payment-standing-row input::before {
    width: 20px;
    height: 20px;
  }

  .page[data-page="existing-payee"] .payment-standing-row input:checked::before {
    transform: translateX(20px);
  }

  .page[data-page="existing-payee"] .payment-entry-form fieldset {
    margin-top: 8px;
  }

  .page[data-page="existing-payee"] .payment-radio-row {
    grid-template-columns: 23px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 38px;
    font-size: 14px;
  }

  .page[data-page="existing-payee"] .payment-radio-row input {
    width: 18px;
    min-height: 18px;
    height: 18px;
    padding: 0;
  }

  .page[data-page="existing-payee"] .payment-radio-row strong {
    font-size: 14px;
  }

  .page[data-page="existing-payee"] .review-transaction-button {
    min-height: 54px;
    margin-top: 9px;
    font-size: 14px;
    font-weight: 400;
  }
}

@supports (field-sizing: content) {
  @media (max-width: 600px) {
    .page[data-page="existing-payee"] .payment-money-input {
      grid-template-columns: auto auto 1fr;
    }

    .page[data-page="existing-payee"] .payment-money-input input[type="text"] {
      field-sizing: content;
      width: auto;
      min-width: 4ch;
      max-width: 12ch;
    }
  }
}