/* ============================================================
   COYNITT PORTAL · WARM EDITION (v3) · 2026-05-08
   Layered on top of app.css. Customer-facing pages only.
   Hard rules: no shadows, no gradients, no descriptive emojis,
   cards ≤5px radius. Light + dark via [data-theme].
   ============================================================ */

:root {
  /* Cards stay sharp — Stanford rule */
  --r-card: 4px;
  --r-input: 6px;
  --r-pill: 999px;

  /* Warmth accents — consumer surfaces only */
  --warm-coral: #FF8A65;
  --warm-honey: #F5C04C;
  --warm-leaf:  #57B894;
  --warm-blush: #FFD7CE;

  /* Hero washes (light) */
  --hero-bg: #FFF8EE;          /* cream wash */
  --bd-card: rgba(13,26,38,0.08);
  --bd-card-hover: rgba(83,198,200,0.40);
}
[data-theme="dark"] {
  --hero-bg: #14283A;
  --bd-card: rgba(83,198,200,0.10);
  --bd-card-hover: rgba(83,198,200,0.40);
}

/* ── Page shell (logged-in pages) ─────────────────────────── */
.page-shell {
  max-width: 1140px;
  margin: 0 auto;
  padding: var(--s8) var(--s5);
}
@media (max-width: 768px) {
  .page-shell { padding: var(--s6) var(--s4); }
}

/* When layout.js wraps a .page-shell / .send-shell inside the global
   .page-content, neutralise the outer padding/cap so the inner shell owns
   width + spacing. Without this, the topbar appeared to "drop to the bottom"
   on M3/M4 pages because the original <main> was left orphaned in the DOM. */
.page-content:has(> .page-shell),
.page-content:has(> .send-shell) {
  padding: 0;
  max-width: none;
}

/* ── Buttons v3 ───────────────────────────────────────────── */
.btn-v3 {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 12px 22px; border-radius: var(--r-pill);
  font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; border: 1px solid transparent; text-decoration: none;
  transition: background var(--tf) var(--ease), border-color var(--tf) var(--ease), transform var(--tf) var(--ease);
  white-space: nowrap;
}
.btn-v3:active { transform: translateY(1px); }
.btn-v3.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-v3.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-primary-v3 { background: var(--teal); color: var(--navy-deep); }
.btn-primary-v3:hover { background: var(--teal-light); color: var(--navy-deep); }
.btn-secondary-v3 { background: transparent; border-color: var(--bd-strong); color: var(--tx1); }
.btn-secondary-v3:hover { border-color: var(--teal); color: var(--teal); }
.btn-ghost-v3 { background: transparent; color: var(--tx2); }
.btn-ghost-v3:hover { background: var(--bg-muted); color: var(--tx1); }
.btn-danger-v3 { background: var(--err); color: #fff; }
.btn-danger-v3:hover { background: #DC2626; }
.btn-link-v3 { background: transparent; color: var(--teal); padding: 4px 0; border-radius: 0; }
.btn-link-v3:hover { color: var(--teal-light); text-decoration: underline; }
.btn-v3[disabled], .btn-v3.is-disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Form fields v3 ────────────────────────────────────────── */
.field-v3 { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.field-v3 label, .field-v3 .field-label { font-size: 13px; font-weight: 600; color: var(--tx1); }
.field-v3 .help { font-size: 12px; color: var(--tx3); }
.field-v3 .err  { font-size: 12px; color: var(--err); }
.input-v3 {
  width: 100%; padding: 12px 14px;
  background: var(--bg-input); color: var(--tx1);
  border: 1px solid var(--bd-card); border-radius: var(--r-input);
  font-family: var(--font); font-size: 14px;
  transition: border-color var(--tf) var(--ease);
}
.input-v3::placeholder { color: var(--tx3); }
.input-v3:focus { outline: none; border-color: var(--teal); }
.input-v3.is-error { border-color: var(--err); }
textarea.input-v3 { min-height: 96px; resize: vertical; }
.input-prefix { position: relative; }
.input-prefix > .prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tx3); font-size: 14px; font-weight: 600; pointer-events: none; }
.input-prefix > .input-v3 { padding-left: 36px; }

/* ── Cards v3 ──────────────────────────────────────────────── */
.card-v3 {
  background: var(--bg-card); color: var(--tx1);
  border: 1px solid var(--bd-card); border-radius: var(--r-card);
  padding: var(--s5);
  transition: border-color var(--tb2) var(--ease);
}
.card-v3.flush { padding: 0; overflow: hidden; }
.card-v3.interactive { cursor: pointer; }
.card-v3.interactive:hover { border-color: var(--bd-card-hover); }

/* ── Section headers ───────────────────────────────────────── */
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s3);
  margin-bottom: var(--s4);
}
.section-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--tx1); }
.section-sub   { font-size: 13px; color: var(--tx2); margin-top: 2px; max-width: 480px; }
.section-link  { font-size: 13px; font-weight: 600; color: var(--teal); text-decoration: none; }
.section-link:hover { color: var(--teal-light); text-decoration: underline; }

.home-section { margin-bottom: var(--s10); animation: slideUp var(--tb2) var(--spring-sm) backwards; }
.home-section:nth-child(1) { animation-delay: 0ms; }
.home-section:nth-child(2) { animation-delay: 60ms; }
.home-section:nth-child(3) { animation-delay: 120ms; }
.home-section:nth-child(4) { animation-delay: 180ms; }
.home-section:nth-child(5) { animation-delay: 240ms; }
.home-section:nth-child(6) { animation-delay: 300ms; }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── Hero greeting (home) ──────────────────────────────────── */
.home-hero {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s6);
  background: var(--hero-bg);
  border: 1px solid var(--bd-card);
  border-radius: var(--r-card);
  padding: var(--s8) var(--s6);
  margin-bottom: var(--s10);
  align-items: center;
}
@media (max-width: 768px) {
  .home-hero { grid-template-columns: 1fr; padding: var(--s6) var(--s4); }
}
.home-hero-title { font-size: 36px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--tx1); margin-bottom: var(--s3); }
.home-hero-title .hero-emph { color: var(--teal-deep); }
[data-theme="dark"] .home-hero-title .hero-emph { color: var(--teal-light); }
.home-hero-sub { font-size: 15px; color: var(--tx2); line-height: 1.5; margin-bottom: var(--s5); max-width: 480px; }
.home-hero-ctas { display: flex; gap: var(--s3); flex-wrap: wrap; }

.home-hero-balance {
  background: var(--bg-card);
  border: 1px solid var(--bd-card);
  border-radius: var(--r-card);
  padding: var(--s5);
}
.balance-label { font-size: 11px; font-weight: 700; color: var(--tx3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--s2); }
.balance-amount { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--tx1); display: flex; align-items: baseline; gap: 4px; line-height: 1.1; }
.balance-currency { font-size: 18px; color: var(--tx2); font-weight: 600; }
.balance-meta { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s3); font-size: 12px; color: var(--tx3); }
.balance-link { color: var(--teal); font-weight: 600; text-decoration: none; }
.balance-link:hover { text-decoration: underline; }

/* ── Quick send row ────────────────────────────────────────── */
.quicksend-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s3);
}
.quicksend-card,
.quicksend-add {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s2);
  background: var(--bg-card);
  border: 1px solid var(--bd-card);
  border-radius: var(--r-card);
  padding: var(--s5) var(--s3);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--tf) var(--ease);
  font-family: var(--font);
  text-align: center;
}
.quicksend-card:hover,
.quicksend-add:hover { border-color: var(--bd-card-hover); }
.quicksend-card .qs-avatar,
.quicksend-add .qs-plus {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--teal-faint); color: var(--teal-deep);
  display: grid; place-items: center; font-weight: 700; font-size: 18px;
}
.quicksend-add .qs-plus { color: var(--teal); }
.quicksend-card .qs-name,
.quicksend-add .qs-name { font-size: 13px; font-weight: 700; color: var(--tx1); }
.quicksend-card .qs-meta { font-size: 11px; color: var(--tx3); }

/* ── Activity card ─────────────────────────────────────────── */
.activity-card {
  background: var(--bg-card);
  border: 1px solid var(--bd-card);
  border-radius: var(--r-card);
  overflow: hidden;
}
.activity-empty {
  text-align: center; padding: var(--s10) var(--s5);
}
.empty-illu {
  width: 80px; height: 80px; margin: 0 auto var(--s4);
  background: var(--teal-faint); color: var(--teal);
  border-radius: 50%; display: grid; place-items: center;
}
.activity-empty h3 { font-size: 17px; font-weight: 800; color: var(--tx1); margin-bottom: var(--s2); }
.activity-empty p { font-size: 13px; color: var(--tx2); max-width: 380px; margin: 0 auto var(--s5); line-height: 1.55; }

.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-row {
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: var(--s4); align-items: center;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--bd-card);
  cursor: pointer;
  transition: background var(--tf) var(--ease);
}
.activity-row:last-child { border-bottom: none; }
.activity-row:hover { background: var(--bg-muted); }
.activity-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.activity-icon.out { background: var(--teal-faint); color: var(--teal-deep); }
.activity-icon.in  { background: var(--ok-bg); color: var(--ok); }
.activity-name { font-weight: 700; font-size: 14px; color: var(--tx1); }
.activity-sub  { font-size: 12px; color: var(--tx3); margin-top: 2px; }
.activity-amt  { text-align: right; font-weight: 700; font-size: 14px; color: var(--tx1); }
.activity-stat { font-size: 11px; font-weight: 600; color: var(--tx3); margin-top: 2px; }
.activity-stat.ok { color: var(--ok); }
.activity-stat.warn { color: var(--warn); }

/* ── Tip card ──────────────────────────────────────────────── */
.tip-card {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: var(--s4); align-items: center;
  background: var(--bg-card); border: 1px solid var(--bd-card); border-radius: var(--r-card);
  padding: var(--s5);
}
@media (max-width: 640px) { .tip-card { grid-template-columns: 1fr; } }
.tip-flag { font-size: 32px; line-height: 1; align-self: start; }
.tip-eyebrow { font-size: 11px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
.tip-title { font-size: 16px; font-weight: 800; color: var(--tx1); margin-bottom: var(--s2); }
.tip-text { font-size: 13px; color: var(--tx2); line-height: 1.55; }
.tip-link { font-size: 13px; font-weight: 600; color: var(--teal); text-decoration: none; align-self: start; }
.tip-link:hover { text-decoration: underline; }

/* ── Discover (Rounds + Harambee promo) ───────────────────── */
.discover-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);
}
@media (max-width: 768px) { .discover-grid { grid-template-columns: 1fr; } }
.discover-card {
  display: flex; flex-direction: column; gap: var(--s2);
  background: var(--bg-card); border: 1px solid var(--bd-card); border-radius: var(--r-card);
  padding: var(--s6);
  text-decoration: none; color: var(--tx1);
  transition: border-color var(--tf) var(--ease);
}
.discover-card:hover { border-color: var(--bd-card-hover); }
.discover-tag {
  display: inline-block; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--teal-faint); color: var(--teal-deep);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  align-self: flex-start;
}
.discover-title { font-size: 18px; font-weight: 800; color: var(--tx1); letter-spacing: -0.01em; line-height: 1.25; }
.discover-text { font-size: 13px; color: var(--tx2); line-height: 1.55; max-width: 440px; }
.discover-link { font-size: 13px; font-weight: 600; color: var(--teal); margin-top: var(--s2); }

/* ── Trust strip ───────────────────────────────────────────── */
.trust-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4);
  background: var(--bg-card); border: 1px solid var(--bd-card); border-radius: var(--r-card);
  padding: var(--s5);
}
@media (max-width: 768px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
.trust-item { text-align: center; }
.trust-label { font-size: 11px; font-weight: 700; color: var(--tx3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--s1); }
.trust-val { font-size: 13px; font-weight: 700; color: var(--tx1); }

/* ── Send-flow scaffolding ─────────────────────────────────── */
.send-shell {
  max-width: 720px; margin: 0 auto; padding: var(--s8) var(--s5);
}
.send-progress {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s8);
}
.send-step {
  flex: 1; height: 4px; background: var(--bd-card); border-radius: 2px;
  position: relative; overflow: hidden;
}
.send-step.active::after,
.send-step.done::after {
  content: ''; position: absolute; inset: 0; background: var(--teal);
  transform-origin: left; animation: sendStepFill var(--tb2) var(--ease) forwards;
}
@keyframes sendStepFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.send-step.upcoming::after { display: none; }

.send-back {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 4px 0; background: transparent; border: none;
  color: var(--tx2); font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--font);
  margin-bottom: var(--s5);
}
.send-back:hover { color: var(--tx1); }

.send-h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--tx1); margin-bottom: var(--s2); line-height: 1.1; }
.send-sub { font-size: 14px; color: var(--tx2); margin-bottom: var(--s6); max-width: 520px; line-height: 1.55; }

/* Country picker grid */
.country-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s3);
}
.country-tile {
  display: flex; flex-direction: column; gap: var(--s2);
  background: var(--bg-card); border: 1px solid var(--bd-card); border-radius: var(--r-card);
  padding: var(--s5);
  cursor: pointer; transition: border-color var(--tf) var(--ease);
  text-decoration: none; color: inherit;
}
.country-tile:hover { border-color: var(--bd-card-hover); }
.country-tile.is-selected { border-color: var(--teal); }
.country-tile .country-flag { font-size: 32px; line-height: 1; }
.country-tile .country-name { font-size: 14px; font-weight: 700; color: var(--tx1); }
.country-tile .country-meta { font-size: 11px; color: var(--tx3); font-weight: 600; }

.recent-corridor {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--teal-faint); border: 1px solid var(--bd-card);
  border-radius: var(--r-card); margin-bottom: var(--s6);
}
.recent-corridor-flag { font-size: 24px; line-height: 1; }
.recent-corridor-body { flex: 1; }
.recent-corridor-eyebrow { font-size: 11px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 0.08em; }
.recent-corridor-title { font-size: 14px; font-weight: 700; color: var(--tx1); margin-top: 2px; }

/* Recipient list */
.recipient-list { display: flex; flex-direction: column; gap: var(--s3); }
.recipient-tile {
  display: grid; grid-template-columns: 48px 1fr auto;
  gap: var(--s4); align-items: center;
  background: var(--bg-card); border: 1px solid var(--bd-card); border-radius: var(--r-card);
  padding: var(--s4) var(--s5);
  cursor: pointer; transition: border-color var(--tf) var(--ease);
  text-decoration: none; color: inherit;
}
.recipient-tile:hover { border-color: var(--bd-card-hover); }
.recipient-tile .ravatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--teal-faint); color: var(--teal-deep);
  display: grid; place-items: center; font-weight: 700; font-size: 16px;
}
.recipient-tile .rname { font-weight: 700; font-size: 15px; color: var(--tx1); }
.recipient-tile .rmeta { font-size: 12px; color: var(--tx3); margin-top: 2px; }
.recipient-tile .rflag { font-size: 22px; line-height: 1; }

.add-recipient-tile {
  display: grid; grid-template-columns: 48px 1fr;
  gap: var(--s4); align-items: center;
  border: 1px dashed var(--bd-strong); border-radius: var(--r-card);
  padding: var(--s4) var(--s5);
  cursor: pointer; transition: border-color var(--tf) var(--ease), background var(--tf) var(--ease);
  text-decoration: none; color: var(--tx1); background: transparent;
}
.add-recipient-tile:hover { border-color: var(--teal); background: var(--teal-faint); }
.add-recipient-tile .qs-plus {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--teal-faint); color: var(--teal);
  display: grid; place-items: center; font-weight: 700; font-size: 22px;
}

/* Hero amount input */
.amount-hero-block {
  background: var(--bg-card); border: 1px solid var(--bd-card); border-radius: var(--r-card);
  padding: var(--s8) var(--s6); text-align: center;
  margin-bottom: var(--s5);
}
.amount-hero-block .amount-eyebrow {
  font-size: 12px; font-weight: 700; color: var(--tx3);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--s4);
}
.amount-row { display: flex; align-items: baseline; justify-content: center; gap: var(--s2); }
.amount-currency { font-size: 28px; font-weight: 600; color: var(--tx2); }
.amount-input {
  font-family: var(--font); font-size: 64px; font-weight: 800;
  background: transparent; border: none; outline: none; color: var(--tx1);
  width: 280px; max-width: 90%; text-align: center; letter-spacing: -0.03em;
}
.amount-input::placeholder { color: var(--tx3); opacity: 0.4; }
.amount-conv { font-size: 16px; color: var(--tx2); margin-top: var(--s4); }
.amount-conv strong { color: var(--tx1); font-weight: 800; }

/* Fee breakdown table — fully visible, no hover */
.fee-breakdown {
  background: var(--bg-card); border: 1px solid var(--bd-card); border-radius: var(--r-card);
  padding: var(--s5); margin-bottom: var(--s5);
}
.fee-breakdown h3 {
  font-size: 13px; font-weight: 700; color: var(--tx2);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--s4);
}
.fee-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s2) 0; font-size: 14px; color: var(--tx2);
  border-bottom: 1px dashed var(--bd-card);
}
.fee-row:last-of-type { border-bottom: none; }
.fee-row.total { padding-top: var(--s3); margin-top: var(--s2); border-top: 1px solid var(--tx1); border-bottom: none; }
.fee-row.total .fee-label, .fee-row.total .fee-val { font-weight: 800; color: var(--tx1); font-size: 15px; }
.fee-compare {
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  background: var(--ok-bg); color: var(--ok);
  border-radius: var(--r-input);
  font-size: 13px; font-weight: 600; text-align: center;
}

/* Quote countdown */
.quote-card {
  background: var(--bg-card); border: 1px solid var(--bd-card); border-radius: var(--r-card);
  padding: var(--s5); margin-bottom: var(--s5);
}
.quote-rate { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s2) 0; font-size: 14px; color: var(--tx2); }
.quote-rate strong { color: var(--tx1); font-weight: 700; }
.quote-countdown {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3); margin-top: var(--s4);
  background: var(--warn-bg); color: var(--warn);
  border-radius: var(--r-input); font-size: 13px; font-weight: 600;
}
.quote-countdown .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn);
  animation: notif-pulse 1.5s ease-in-out infinite;
}

/* Confirmation review */
.review-block {
  background: var(--bg-card); border: 1px solid var(--bd-card); border-radius: var(--r-card);
  padding: var(--s6); margin-bottom: var(--s5);
}
.review-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--s4) 0; border-bottom: 1px solid var(--bd-card);
}
.review-row:last-child { border-bottom: none; }
.review-label { font-size: 12px; font-weight: 700; color: var(--tx3); text-transform: uppercase; letter-spacing: 0.06em; }
.review-val   { font-size: 15px; font-weight: 700; color: var(--tx1); text-align: right; }
.review-val small { display: block; font-size: 12px; color: var(--tx3); font-weight: 500; margin-top: 2px; letter-spacing: 0; text-transform: none; }
.review-recipient {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s4); background: var(--teal-faint);
  border: 1px solid var(--bd-card); border-radius: var(--r-card); margin-bottom: var(--s5);
}
.review-recipient .ravatar { width: 48px; height: 48px; border-radius: 50%; background: var(--teal); color: var(--navy-deep); display: grid; place-items: center; font-weight: 800; font-size: 16px; flex-shrink: 0; }
.review-recipient .rinfo { flex: 1; }
.review-recipient .rinfo .rname { font-size: 16px; font-weight: 800; color: var(--tx1); }
.review-recipient .rinfo .rmeta { font-size: 12px; color: var(--tx2); margin-top: 2px; }

.consent-block { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s5); }
.consent-row {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s4); background: var(--bg-card); border: 1px solid var(--bd-card);
  border-radius: var(--r-card); cursor: pointer;
}
.consent-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--teal); margin-top: 2px; flex-shrink: 0; }
.consent-row .consent-text { font-size: 13px; color: var(--tx2); line-height: 1.5; }
.consent-row .consent-text strong { color: var(--tx1); font-weight: 700; }

/* Confirmation success state */
.send-success {
  text-align: center; padding: var(--s12) var(--s5);
}
.success-circle {
  width: 96px; height: 96px; margin: 0 auto var(--s5);
  background: var(--ok); color: #fff;
  border-radius: 50%; display: grid; place-items: center;
  animation: successPop var(--tb3) var(--spring) backwards;
}
@keyframes successPop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.send-success h2 { font-size: 28px; font-weight: 800; color: var(--tx1); margin-bottom: var(--s3); letter-spacing: -0.02em; }
.send-success p  { font-size: 15px; color: var(--tx2); max-width: 480px; margin: 0 auto var(--s6); line-height: 1.6; }
.send-success .success-ctas { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }

/* ── Mobile niceties ───────────────────────────────────────── */
@media (max-width: 480px) {
  .home-hero-title { font-size: 28px; }
  .send-h1 { font-size: 24px; }
  .amount-input { font-size: 48px; }
}