/* SafeRemit web — component styles mirroring the Flutter design system
   (lib/widgets/ds.dart, common.dart, anim.dart). */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em; margin: 0; color: var(--text-strong); }
p { margin: 0; }
a { color: var(--text-link); text-decoration: none; }
button { font: inherit; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- shell -- */

.sr-app {
  position: relative;
  width: 100%;
  max-width: var(--app-width);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--surface-page);
  display: flex;
  flex-direction: column;
}

@media (min-width: 560px) {
  body { background: var(--warm-200); }
  .sr-app {
    box-shadow: var(--shadow-lg);
    min-height: 100vh;
  }
}

.sr-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--s5) var(--s5) calc(var(--nav-height) + var(--s6));
}

.sr-scroll--flush { padding-left: 0; padding-right: 0; }

/* Auth screens: no bottom nav, so no reserved space. */
.sr-scroll--auth { padding-bottom: var(--s6); }

/* The auth brand panel is a desktop-only second column; web.css reveals it at
   900px. On a phone the form already fills the screen and this would only add
   scroll before the thing the visitor came to do. */
.auth-aside { display: none; }

.sr-stack { display: flex; flex-direction: column; }
.sr-row { display: flex; align-items: center; }
.sr-row--between { justify-content: space-between; }
.sr-spacer { flex: 1; }
.sr-grow { flex: 1; min-width: 0; }
/* A column of reading and one button. On a desk workspace the same markup
   stretches to 1180px, and a block button that wide stops looking pressable. */
.sr-narrow { max-width: 620px; }

.gap-1 { gap: var(--s1); } .gap-2 { gap: var(--s2); } .gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); } .gap-5 { gap: var(--s5); } .gap-6 { gap: var(--s6); }

.mt-1 { margin-top: var(--s1); } .mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); }

/* ------------------------------------------------------------ typography -- */

.t-display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; color: var(--text-strong); }
.t-h1 { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.12; color: var(--text-strong); }
.t-h2 { font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; color: var(--text-strong); }
.t-h3 { font-family: var(--font-display); font-size: 16.5px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-strong); }
.t-body { font-size: 14px; color: var(--text-body); }
.t-sub { font-size: 13.5px; color: var(--text-muted); }
.t-small { font-size: 12.5px; color: var(--text-muted); }
.t-tiny { font-size: 12px; color: var(--text-muted); }
.t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-strong { color: var(--text-strong); font-weight: 700; }
.t-muted { color: var(--text-muted); }
.t-danger { color: var(--red-600); }
.t-success { color: var(--green-600); }
.t-center { text-align: center; }
.t-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The small tracked caps that label a block. Trade calls it the page kicker;
   it is the marketing eyebrow without the rule in front, because in a tool a
   dozen little rules read as decoration rather than as structure. */
.overline {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
  line-height: 1.2;
}

/* ----------------------------------------------------------------- logo -- */

.sr-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-navy);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 800;
  flex: none;
}
.sr-logo .s { color: var(--blue-400); }
.sr-logo .r { color: var(--green-400); }

.sr-wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--text-strong); }
.sr-wordmark .remit { color: var(--gold); }
.sr-wordmark .suffix { font-family: var(--font-sans); font-weight: 600; color: var(--text-muted); }

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: var(--control-md);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-normal) var(--ease-standard),
              background var(--dur-normal) var(--ease-standard),
              border-color var(--dur-normal) var(--ease-standard),
              box-shadow var(--dur-normal) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn:focus-visible { outline: 3px solid var(--ring-focus); outline-offset: 1px; }
.btn[disabled], .btn.is-disabled { opacity: 0.45; pointer-events: none; transform: none; }

.btn--sm { height: var(--control-sm); font-size: 13px; padding: 0 16px; }
.btn--lg { height: var(--control-lg); font-size: 15px; }
.btn--block { display: flex; width: 100%; padding: 0 18px; }

/* Ink is the button that means "do this now", on the marketing site and in
   here, so the two halves of the product press the same shape. Gold is kept
   for the one place ink cannot be seen: a button on the navy balance card. */
.btn--primary { background: var(--navy-800); color: var(--text-inverse); box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--navy-700); box-shadow: var(--shadow-lg); }
.btn--gold { background: var(--gold); color: var(--text-on-gold); box-shadow: var(--gold-glow); }
.btn--gold:hover { background: var(--gold-400); }
.btn--secondary { background: var(--navy-700); color: var(--text-inverse); }
.btn--outline { background: var(--surface-card); color: var(--navy-700); border-color: var(--border-default); }
.btn--outline:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn--ghost { background: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--warm-300); color: var(--text-body); }
.btn--danger { background: var(--red-600); color: var(--text-inverse); }

/* On an ink ground — the balance card, the ink sidebar — a white card button
   is a hole punched in the panel. This one is the panel, lit slightly. */
.btn--on-ink { background: rgba(255, 255, 255, 0.10); color: var(--text-inverse); border-color: var(--border-inverse); }
.btn--on-ink:hover { background: rgba(255, 255, 255, 0.18); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--navy-600);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.icon-btn:hover { border-color: var(--border-strong); }
.icon-btn--sm { width: 40px; height: 40px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.back-link:hover { color: var(--text-body); }

/* --------------------------------------------------------------- badges -- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--navy-50);
  color: var(--navy-500);
  white-space: nowrap;
}
.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.badge--success { background: var(--green-100); color: var(--green-700); }
.badge--warning { background: var(--gold-100); color: var(--gold-700); }
.badge--danger  { background: var(--red-100);   color: var(--red-600); }
.badge--info    { background: var(--blue-100);  color: var(--blue-700); }
.badge--brand   { background: var(--gold-100);  color: var(--gold-700); }
.badge--muted   { background: var(--navy-50);   color: var(--text-muted); }

/* --------------------------------------------------------------- glyphs -- */

.glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--navy-700);
  color: var(--text-inverse);
  font-weight: 700;
  font-size: 14px;
}
/* A tile holding somebody else's mark. Their colour needs a light ground
   to sit on, and the ring stops a white circle vanishing into a white card. */
.glyph--brand {
  background: var(--surface-card);
  box-shadow: inset 0 0 0 1px var(--border-default);
}

/* Named tones, so a screen says what a tile means instead of naming two
   colours inline. Every one of them is a token. */
.glyph--soft   { background: var(--surface-sunken); color: var(--navy-700); }
.glyph--ink    { background: var(--navy-700);  color: var(--text-inverse); }
.glyph--ok     { background: var(--green-100); color: var(--green-700); }
.glyph--gold   { background: var(--gold);      color: var(--navy-800); }
.glyph--danger { background: var(--red-100);   color: var(--red-600); }

.glyph--40 { width: 40px; height: 40px; }
.glyph--42 { width: 42px; height: 42px; }
.glyph--48 { width: 48px; height: 48px; }
.glyph--54 { width: 54px; height: 54px; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-800);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
}

/* ---------------------------------------------------------------- forms -- */

.field { display: block; }
.field + .field { margin-top: var(--s4); }
.field__label { display: block; font-size: 13px; font-weight: 600; color: var(--text-body); margin-bottom: 7px; }
.field__hint { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.field__hint--error { color: var(--red-600); }
.field__section { margin: 22px 0 -2px; font-size: 13px; font-weight: 700;
  color: var(--text-muted); letter-spacing: .02em; }
.field__section:first-child { margin-top: 0; }

.input, .select, textarea.input {
  display: block;
  width: 100%;
  height: var(--control-lg);
  padding: 0 16px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: 14.5px;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
  appearance: none;
}
.input::placeholder { color: var(--text-subtle); }
.input:focus, .select:focus, textarea.input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--ring-focus);
}
.input--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.input[aria-invalid="true"] { border-color: var(--red-600); }
/* A file picker and a paragraph of text don't fit the 54px control height. */
.input[type="file"] { height: auto; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
textarea.input { height: auto; min-height: 92px; padding: 11px 14px; line-height: 1.5; }

/* Password box with a show/hide toggle. The eye sits inside the control rather
   than beside it, so the field keeps the same height as every other one. */
.password { position: relative; display: block; }
.password__input { padding-right: 48px; }
.password__toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: var(--control-lg);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.password__toggle:hover { color: var(--text-body); }
.password__toggle:focus-visible {
  outline: none;
  color: var(--text-body);
  box-shadow: 0 0 0 3px var(--ring-focus);
  border-radius: var(--r-md);
}

/* Upload tile. The browser's own file control is a grey "Choose file" button
   in the OS font, which on a page of designed inputs reads as a bug. The real
   input is still there, just moved out of sight behind the label. */
.upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: 14px 16px;
  background: var(--surface-card);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.upload:hover { background: var(--surface-card-warm); border-color: var(--navy-300); }
.upload:focus-within { outline: 3px solid var(--ring-focus); outline-offset: 1px; }
.upload--have { border-style: solid; border-color: var(--green-500); background: var(--green-100); }
.upload--error { border-color: var(--red-600); }
.upload__title { display: block; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.upload__sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; overflow-wrap: anywhere; }
.upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* A titled block of related questions, so a long form reads as a few short
   ones. */
.fieldset { display: block; }
.fieldset + .fieldset { margin-top: var(--s5); }
.fieldset__head { margin-bottom: var(--s3); }
.fieldset__title { display: block; font-size: 15px; font-weight: 700; color: var(--text-strong); }
.fieldset__sub { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }

/* A label that only a screen reader needs: the search box next to a heading
   that already says what is being searched. */
.sr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.input--search {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238492A8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 13px center;
  padding-left: 40px;
}
.input--search::-webkit-search-cancel-button { cursor: pointer; }

/* A list long enough to need scrolling of its own. Without the cap, choosing a
   country means scrolling past every other one to reach the button below. */
.picker-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
  margin: -2px;
}
.picker-list [hidden] { display: none; }

.select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238492A8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
  cursor: pointer;
}

/* Amount entry — oversized mono figure. */
.amount-input {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--s6) var(--s4);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
}
.amount-input__symbol { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--navy-300); }
.amount-input__field {
  width: 100%;
  max-width: 240px;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 36px;
  font-weight: 700;
  color: var(--text-strong);
  text-align: center;
}
.amount-input__field::placeholder { color: var(--navy-200); }
.amount-input__field::-webkit-outer-spin-button,
.amount-input__field::-webkit-inner-spin-button { appearance: none; margin: 0; }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-body);
}
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox__box {
  width: 22px; height: 22px;
  flex: none;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-xs);
  background: var(--surface-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-800);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.checkbox__box svg { opacity: 0; }
.checkbox input:checked + .checkbox__box { background: var(--gold); border-color: var(--gold); }
.checkbox input:checked + .checkbox__box svg { opacity: 1; }
.checkbox input:focus-visible + .checkbox__box { box-shadow: 0 0 0 3px var(--ring-focus); }

.switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 46px; height: 28px;
  border-radius: var(--r-pill);
  background: var(--navy-100);
  padding: 3px;
  display: inline-flex;
  transition: background var(--dur-fast) var(--ease-standard);
}
.switch__thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.switch input:checked + .switch__track { background: var(--green); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--ring-focus); }

/* ---------------------------------------------------------------- cards -- */

/* The one card shape: white, a hairline of ink at 8%, a 24px radius and no
   shadow. Depth comes from the border and the space around it, so a screen of
   six cards does not read as six floating objects. */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: var(--s5);
}
.card--flush { padding: 0; overflow: hidden; }
.card--warm { background: var(--surface-card-warm); }

.balance-card {
  position: relative;
  overflow: hidden;
  background: var(--grad-navy);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--s5);
  color: var(--text-inverse);
}
/* A wash of brand colour behind the figure, not a disc stuck on the card: a
   hard-edged circle at 22% is exactly what it looked like before. */
.balance-card__glow {
  position: absolute;
  top: -110px; right: -90px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75, 176, 216, 0.38), transparent 68%);
  pointer-events: none;
}
.balance-card::after {
  content: "";
  position: absolute;
  left: 18%; bottom: -190px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(98, 198, 112, 0.22), transparent 68%);
  pointer-events: none;
}
.balance-card__label { color: var(--navy-200); }
.balance-card__figure { display: flex; align-items: flex-end; gap: 4px; margin-top: var(--s2); }
.balance-card__symbol { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.04em; color: var(--navy-200); padding-bottom: 3px; }
.balance-card__amount { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 40px; font-weight: 800; letter-spacing: -0.05em; color: var(--text-inverse); line-height: 1; }
.balance-card__currency { font-size: 13px; font-weight: 600; color: var(--navy-200); padding-bottom: 5px; }
.balance-card__change { display: flex; align-items: center; gap: 4px; margin-top: var(--s2); font-size: 12.5px; font-weight: 600; color: var(--green-400); }
.balance-card__actions { display: flex; gap: 10px; margin-top: var(--s5); }
.balance-card__actions > * { flex: 1; }
/* No glow on the card: gold throwing light onto navy reads as a lit lozenge
   rather than a button. */
.balance-card__actions .btn--gold { box-shadow: none; }

/* Virtual payment card. Capped, because it is a picture of a card: stretched
   to the width of a desk workspace it stops reading as one. */
.pay-card {
  position: relative;
  overflow: hidden;
  max-width: 440px;
  aspect-ratio: 1.586;
  background: var(--grad-navy);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  color: var(--text-inverse);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pay-card__glow { position: absolute; bottom: -80px; left: -50px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 189, 63, 0.34), transparent 68%); }
.pay-card__number { font-family: var(--font-mono); font-size: 18px; font-weight: 700; letter-spacing: 1px; }
.pay-card__meta { display: flex; gap: var(--s5); }
.pay-card__label { color: var(--navy-300); }
/* The card does not exist yet, so the one on the Cards screen is a drawing of
   it. Dimmed and unreadable on purpose: at full strength it is indistinguishable
   from a card somebody could spend. */
.pay-card--preview { box-shadow: var(--shadow-md); }
.pay-card--preview .pay-card__number { color: rgba(255, 255, 255, 0.5); letter-spacing: 2px; }
.pay-card--preview .pay-card__value { color: rgba(255, 255, 255, 0.42); }
.pay-card--preview > svg { color: rgba(255, 255, 255, 0.3); }
.pay-card__value { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-inverse); }
.pay-card__brand { font-size: 12px; font-weight: 700; color: var(--navy-200); }
.pay-card__frozen {
  position: absolute; inset: 0;
  background: rgba(15, 22, 38, 0.72);
  backdrop-filter: blur(3px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2);
  color: var(--text-inverse); font-weight: 700;
}

/* The one big number a screen leads with — a balance, an amount converted, an
   invoice still to pay. Display face rather than mono: the figure is the
   headline here, not a column to be scanned down. */
.figure {
  display: block;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: var(--text-strong);
}
.figure--sm { font-size: 25px; }

/* ----------------------------------------------------------------- rows -- */

.row-card {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-normal) var(--ease-standard),
              box-shadow var(--dur-normal) var(--ease-standard),
              transform var(--dur-normal) var(--ease-standard);
}
.row-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.row-card:focus-visible { outline: 3px solid var(--ring-focus); outline-offset: 1px; }
.row-card--selected { border-color: var(--navy-800); background: var(--surface-card); box-shadow: var(--shadow-sm); }
.row-card__title { display: block; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.row-card__sub { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.row-card__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; color: var(--text-strong); }

.txn-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: 12px 10px;
  margin: 0 -10px;
  background: none;
  border: 0;
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
}
.txn-row:hover { background: var(--surface-page-alt); }
.txn-row:focus-visible { outline: 3px solid var(--ring-focus); }
.txn-row__title { display: block; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.txn-row__sub { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.txn-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.txn-row__amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.txn-row__amount--in { color: var(--value-up); }

.detail-rows {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.detail-rows__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
}
.detail-rows__row + .detail-rows__row { border-top: 1px solid var(--border-soft); }
.detail-rows__label { font-size: 13.5px; color: var(--text-muted); flex: none; }
.detail-rows__value { flex: 1; text-align: right; font-size: 13.5px; font-weight: 700; color: var(--text-strong); word-break: break-word; }
.detail-rows__value--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.detail-rows__footer { border-top: 1px solid var(--border-soft); padding: 14px 18px; }

/* --------------------------------------------------------------- alerts -- */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.55;
}
.alert--danger  { background: var(--red-100);   color: var(--red-600);   border-color: var(--red-500); }
.alert--warning { background: var(--gold-100);  color: var(--gold-700);  border-color: var(--gold-300); }
.alert--success { background: var(--green-100); color: var(--green-700); border-color: var(--green-300); }
.alert--info    { background: var(--blue-100);  color: var(--blue-700);  border-color: var(--blue-300); }
.alert svg { flex: none; margin-top: 1px; }
/* A link in a red panel should be red. The page link colour reads as a second
   message sitting inside the first. */
.alert a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.kyc-banner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s4);
  background: var(--gold-100);
  border: 1px solid var(--gold-300);
  border-radius: var(--r-xl);
  text-align: left;
  cursor: pointer;
  color: var(--text-body);
  transition: border-color var(--dur-normal) var(--ease-standard);
}
.kyc-banner:hover { border-color: var(--gold); }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding: var(--s7) var(--s4);
  text-align: center;
  color: var(--text-muted);
}
.empty-state__icon {
  width: 58px; height: 58px;
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-300);
}
/* An empty list says the thing that is missing, then what to do about it. */
.empty-state__title { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-strong); }
.empty-state__body { max-width: 34ch; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }

/* ------------------------------------------------------------- progress -- */

.step-bar { display: flex; gap: var(--s2); }
.step-bar__seg { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--navy-100); }
.step-bar__seg--on { background: var(--gold); }

/* ------------------------------------------------------------------ pin -- */

.pin-dots { display: flex; justify-content: center; gap: 14px; }
.pin-dots__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--navy-200);
  background: transparent;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.pin-dots__dot--on { background: var(--navy-700); border-color: var(--navy-700); }

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
}
.pin-pad__key {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--r-lg);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-strong);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.pin-pad__key:hover { background: var(--surface-sunken); }
.pin-pad__key:active { background: var(--navy-100); }
.pin-pad__key--blank { visibility: hidden; pointer-events: none; }

/* ---------------------------------------------------------------- sheet -- */

.sheet-scrim {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 40;
  animation: sr-fade var(--dur-normal) var(--ease-standard);
}

.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-width);
  max-height: 92vh;
  max-height: 92dvh;
  z-index: 41;
  background: var(--surface-page);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow: var(--sheet-shadow);
  display: flex;
  flex-direction: column;
  animation: sr-sheet-in var(--dur-slow) var(--ease-emphasis);
}
.sheet__grip {
  width: 40px; height: 4px;
  border-radius: 99px;
  background: var(--navy-200);
  margin: 16px auto 0;
  flex: none;
}
.sheet__body {
  overflow-y: auto;
  padding: 16px 20px 30px;
  padding-bottom: calc(30px + env(safe-area-inset-bottom));
}

@keyframes sr-sheet-in {
  from { transform: translate(-50%, 60px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}
@keyframes sr-fade { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ nav -- */

/* A bar that floats clear of the bottom edge rather than being welded to it,
   the way Trade's does. The rounded white plate reads as one more card, and
   the selected tab is the same ink pill as the desktop rail's. */
.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: calc(100% - 20px);
  max-width: calc(var(--app-width) - 20px);
  z-index: 30;
  display: flex;
  gap: 4px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.bottom-nav__item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 58px;
  background: none;
  border: 0;
  border-radius: var(--r-lg);
  color: var(--navy-300);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-normal) var(--ease-standard),
              color var(--dur-normal) var(--ease-standard);
}
.bottom-nav__item--on { background: var(--navy-800); color: var(--text-inverse); }
.bottom-nav__item--on svg { stroke-width: 2.4; }

.app-header {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s5) var(--s5) var(--s3);
}
.app-header__bell { position: relative; }
.app-header__badge {
  position: absolute;
  top: 8px; right: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red-500);
  border: 2px solid var(--surface-page);
}

/* -------------------------------------------------------- quick actions -- */

.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) 4px;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--dur-normal) var(--ease-standard),
              transform var(--dur-normal) var(--ease-standard);
}
.quick-action:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.quick-action__label { font-size: 11.5px; font-weight: 700; color: var(--text-body); }

/* --------------------------------------------------------------- chips --- */

.chips { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-soft);
  background: var(--surface-card);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
}
.chip--on { background: var(--navy-800); border-color: var(--navy-800); color: var(--text-inverse); }

/* ------------------------------------------------------------ walkthrough */

.walk {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--s5);
  background: var(--grad-warm);
}
.walk__art {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 260px;
}
.walk__dots { display: flex; justify-content: center; gap: var(--s2); margin: var(--s5) 0; }
.walk__dot { width: 8px; height: 8px; border-radius: 99px; background: var(--navy-200); transition: width var(--dur-normal) var(--ease-emphasis); }
.walk__dot--on { width: 24px; background: var(--gold); }

.orbit { position: relative; width: 240px; height: 240px; }
.orbit__ring {
  position: absolute; inset: 0;
  border: 2px dashed var(--gold-300);
  border-radius: 50%;
  animation: sr-spin 18s linear infinite;
}
.orbit__core {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.orbit__chip {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
  font-weight: 700;
  color: var(--navy-700);
}

@keyframes sr-spin { to { transform: rotate(360deg); } }
@keyframes sr-float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes sr-float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes sr-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes sr-slide-in { from { transform: translateX(34px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes sr-ring { from { transform: scale(0.55); opacity: 0.55; } to { transform: scale(1.45); opacity: 0; } }

.anim-float-a { animation: sr-float-a 6s var(--ease-standard) infinite; }
.anim-float-b { animation: sr-float-b 7s var(--ease-standard) infinite; }
.anim-pop { animation: sr-pop 460ms var(--ease-emphasis) both; }
.anim-slide-in { animation: sr-slide-in 420ms var(--ease-emphasis) both; }

.pulse-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--green);
  animation: sr-ring 2.4s var(--ease-standard) infinite;
}

.success-mark {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-600);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  animation: sr-pop 460ms var(--ease-emphasis) both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------- invoice --- */

.invoice-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding: var(--s6) var(--s4);
  background: var(--surface-card-warm);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-xl);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.invoice-drop:hover { border-color: var(--gold); background: var(--gold-100); }
.invoice-drop input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }

.invoice-preview {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  background: var(--surface-card);
}

/* ---------------------------------------------------------------- misc --- */

.divider { display: flex; align-items: center; gap: var(--s3); color: var(--text-subtle); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.section-head__link { font-size: 12.5px; font-weight: 700; color: var(--text-link); }
.section-head__link:hover { color: var(--navy-800); }

.list-divider > * + * { border-top: 1px solid var(--border-soft); }

.spinner {
  width: 20px; height: 20px;
  border: 2.4px solid rgba(13, 27, 47, 0.2);
  border-top-color: var(--navy-800);
  border-radius: 50%;
  animation: sr-spin 700ms linear infinite;
  flex: none;
}
.btn--primary .spinner { border-color: rgba(255, 255, 255, 0.3); border-top-color: var(--text-inverse); }
.btn--gold .spinner { border-color: rgba(13, 27, 47, 0.25); border-top-color: var(--navy-800); }

.qr-frame {
  width: 176px; height: 176px;
  margin: 0 auto;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  color: var(--navy-800);
}
.qr-frame__chip {
  position: absolute;
  width: 34px; height: 34px;
  border-radius: var(--r-xs);
  border: 3px solid var(--surface-card);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-inverse); font-weight: 700; font-size: 15px;
}

.copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 4px 0;
  color: var(--text-link); font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.copy-btn:hover { text-decoration: underline; }

.mono-block {
  font-family: var(--font-mono);
  font-size: 13px;
  word-break: break-all;
  background: var(--surface-sunken);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  color: var(--text-strong);
}

.settings-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: 15px 18px;
  background: var(--surface-card);
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text-body);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.settings-row:hover { background: var(--surface-card-warm); }
/* A row title and the line under it are two lines. As inline spans they ran
   together into one sentence, which is why every screen was passing
   display:block in a style attribute. */
.settings-row__title { display: block; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.settings-row__sub { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* Sheet rendered as its own page. In the app a step swaps inside one bottom
   sheet; on the web each step is a real URL, so the sheet becomes the page
   while keeping the same chrome. */
.sheet-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  animation: sr-sheet-page-in var(--dur-normal) var(--ease-emphasis);
}
.sheet-page__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s5) var(--s5) var(--s3);
}
.sheet-page__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--s5) calc(var(--s6) + env(safe-area-inset-bottom));
}
.sheet-page__title { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -0.04em; color: var(--text-strong); }
.sheet-page__sub { font-size: 13.5px; color: var(--text-muted); margin-top: 5px; }
@keyframes sr-sheet-page-in {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Auth / marketing hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-navy);
  border-radius: var(--r-2xl);
  padding: var(--s6) var(--s5);
  color: var(--text-inverse);
}
.hero__glow {
  position: absolute; top: -90px; right: -70px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(75, 176, 216, 0.4), transparent 68%);
}
.hero__title { font-family: var(--font-display); font-size: 27px; font-weight: 800; letter-spacing: -0.05em; line-height: 1.1; color: var(--text-inverse); }

.value-row { display: flex; align-items: flex-start; gap: var(--s3); }
.value-row__icon {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--navy-700);
  display: flex; align-items: center; justify-content: center;
}

/* Verification code entry */
.code-input {
  width: 100%;
  height: 62px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 10px;
  text-indent: 10px;
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
}
.code-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--ring-focus); }
.code-input::placeholder { color: var(--navy-200); letter-spacing: 10px; }

/* Long scrolling pickers (countries, networks, accounts) */
.picker-list { display: flex; flex-direction: column; gap: var(--s2); }
.picker-list__group { margin-top: var(--s4); }

.notif-row { display: flex; gap: var(--s3); padding: 14px 0; color: inherit; text-decoration: none; }
.notif-row__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; margin-top: 6px; }
.notif-row__icon {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--text-inverse);
}
.notif-row__icon--green { background: var(--green-500); }
.notif-row__icon--blue  { background: var(--blue-500); }
.notif-row__icon--navy  { background: var(--navy-700); }
.notif-row__icon--gold  { background: var(--gold); color: var(--navy-800); }

.walk__body { flex: 1; display: flex; }
.walk__slide[hidden] { display: none; }
.walk__slide {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: sr-slide-in 420ms var(--ease-emphasis) both;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + 16px);
  transform: translateX(-50%);
  z-index: 60;
  background: var(--navy-800);
  color: var(--text-inverse);
  padding: 11px 18px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: sr-pop 240ms var(--ease-emphasis) both;
}


/* ---- Invoice balances and receipt trail --------------------------------- */

.t-left { text-align: left; }

/* How much of an invoice has been paid down. A bar rather than a number
   because "nearly there" is the thing people read off it at a glance. */
.meter {
  display: block;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}
.meter__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--green-500);
  transition: width 320ms var(--ease-emphasis);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill--soon { background: var(--surface-sunken); color: var(--text-muted); }
.pill--live { background: var(--green-100); color: var(--green-700); }

/* A funding route that is on the way. It stays on the list, greyed rather
   than removed, so nobody wonders where their option went. */
.row-card--soon { cursor: default; opacity: .62; }
.row-card--soon:hover { background: var(--surface-card); border-color: var(--border-soft); box-shadow: none; transform: none; }

/* The life of one transfer: submitted, processing, delivered. */
.timeline { list-style: none; margin: 0; padding: 14px 16px; }
.timeline__step { display: flex; gap: var(--s3); padding-bottom: 16px; position: relative; }
.timeline__step:last-child { padding-bottom: 0; }
.timeline__step::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 2px;
  width: 2px;
  background: var(--border-soft);
}
.timeline__step:last-child::before { display: none; }
.timeline__mark {
  position: relative;
  z-index: 1;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-sunken);
  color: var(--text-muted);
}
.timeline__step--done .timeline__mark { background: var(--green-100); color: var(--green-700); }
.timeline__step--current .timeline__mark { background: var(--gold-100); color: var(--gold-700); }
.timeline__step--failed .timeline__mark { background: var(--red-100); color: var(--red-600); }
.timeline__text { display: flex; flex-direction: column; gap: 2px; }
.timeline__label { font-size: 13.5px; font-weight: 700; color: var(--text-strong); }
.timeline__step--todo .timeline__label { color: var(--text-muted); }
.timeline__body { font-size: 12.5px; color: var(--text-muted); }
.timeline__at {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* A figure that just changed, and the note that says why. Both are deliberately
   quiet: money moving is not an occasion for a fanfare. */
.balance-card__amount.is-updated,
.row-card__value.is-updated { animation: sr-bump 1.2s var(--ease-standard); }
@keyframes sr-bump {
  0% { transform: scale(1); }
  22% { transform: scale(1.045); }
  100% { transform: scale(1); }
}

.live-note {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom));
  transform: translate(-50%, 14px);
  z-index: 90;
  display: grid;
  gap: 2px;
  max-width: min(420px, calc(100vw - 28px));
  padding: 13px 18px;
  border-radius: var(--r-lg);
  background: var(--navy-800);
  color: #fff;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity .22s var(--ease-standard), transform .22s var(--ease-standard);
}
.live-note.is-in { opacity: 1; transform: translate(-50%, 0); }
.live-note b { font-size: 14px; font-weight: 750; }
.live-note span { font-size: 12.5px; color: rgba(255, 255, 255, .72); }

@media (prefers-reduced-motion: reduce) {
  .balance-card__amount.is-updated { animation: none; }
  .live-note { transition: none; }
}