/* ══════════════════════════════════════════════════════════════════════════
   text-me.css — the reusable TEXT ME component (see /text-me.js).
   Everything is tm- prefixed, so it can't reach anything else on a page.

   Desktop: one quiet link in the header. Phones: a compact navy pill,
   bottom right, that steps aside for forms, calculator controls, the open
   menu and the keyboard. When a page's own sticky bar is up it sits above it.
   ══════════════════════════════════════════════════════════════════════════ */
.tm-icon { flex: none; display: block; }

/* ── Header link ── */
.tm-nav {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: #002B5C !important;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1.5px rgba(0, 43, 92, .22);
  transition: box-shadow .15s ease, background-color .15s ease;
}
.tm-nav .tm-icon { color: #3A6600; }
.tm-nav:hover { box-shadow: inset 0 0 0 1.5px #002B5C; background: rgba(200, 255, 0, .18); }
.tm-nav:focus-visible { outline: 3px solid #002B5C; outline-offset: 2px; }
/* On /bank-statement's identity bar, pushed to the right edge. */
.tm-nav--bar { margin-left: auto; }
@media (max-width: 768px) { .tm-nav { display: none !important; } }

/* ── Mobile sticky pill ── */
.tm-fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 95;
  display: none;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px 0 15px;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff !important;
  text-decoration: none;
  background: rgba(0, 43, 92, .94);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 25, 56, .26), 0 0 0 1px rgba(255, 255, 255, .22) inset;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .3s cubic-bezier(.32, .72, 0, 1), opacity .2s ease, bottom .3s cubic-bezier(.32, .72, 0, 1);
}
.tm-fab .tm-icon { color: #C8FF00; }
.tm-fab:active { transform: scale(.97); }
.tm-fab:focus-visible { outline: 3px solid #C8FF00; outline-offset: 3px; }
@media (max-width: 768px) { .tm-fab { display: inline-flex; } }

/* Stepping aside: slid down and out, and not tappable. */
.tm-fab.is-yield,
.tm-fab.is-typing,
body.nav-open .tm-fab,
body.lp-form-engaged .tm-fab {
  opacity: 0;
  transform: translateY(calc(100% + 24px));
  pointer-events: none;
}
/* Above a page's own sticky CTA bar while it is showing. */
body:has(.lp-sticky.is-in):not(.lp-sticky-yield):not(.lp-form-engaged) .tm-fab { bottom: calc(80px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .tm-fab { transition: none; } }