/* ==========================================================================
   ScoutMail Design System
   Built to match the same visual pattern used in Kreddlo.
   Plus Jakarta Sans font, navy and green color system, pill shaped buttons,
   glass style navigation, blurred blob decoration, fade up animation.
   Mobile first. Base styles target small phone screens, media queries at
   768px and 1024px scale the layout up. Tailwind CDN handles layout
   utilities like flex, grid, and spacing. This file only holds what
   Tailwind does not, colors as variables, custom components, and motion.
   No em dashes are used anywhere in this file or any file in this project.
   ========================================================================== */

/* ── Base ── */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #f8f9fb;
  color: #0d2145;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
}

*:focus-visible {
  outline: 2px solid #2d8a5e;
  outline-offset: 2px;
}

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

/* ── Glass ── */
.glass {
  background: rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(13, 33, 69, 0.08);
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0d2145;
  color: #fff;
  border-radius: 50px;
  padding: 12px 28px;
  font-weight: 600;
  font-size: 15px;
  border: 2px solid #0d2145;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary:hover { background: #162f5e; transform: translateY(-1px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #0d2145;
  border-radius: 50px;
  padding: 12px 28px;
  font-weight: 600;
  font-size: 15px;
  border: 2px solid #0d2145;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-secondary:hover { background: #0d2145; color: #fff; transform: translateY(-1px); }

.btn-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2d8a5e;
  color: #fff;
  border-radius: 50px;
  padding: 12px 28px;
  font-weight: 600;
  font-size: 15px;
  border: 2px solid #2d8a5e;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-green:hover { background: #236b49; border-color: #236b49; transform: translateY(-1px); }

/* ── Blob decoration ── */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.blob-navy {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(13,33,69,0.10) 0%, transparent 70%);
  top: -120px;
  right: -120px;
}
.blob-green {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(45,138,94,0.08) 0%, transparent 70%);
  bottom: -80px;
  left: -100px;
}

/* ── Float animation, used for the hero record card ── */
@keyframes floatUp {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
.float-card { animation: floatUp 4s ease-in-out infinite; }

/* ── Step arrow, used between numbered steps on larger screens ── */
.step-arrow {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, #2d8a5e, #3dbd7a);
  position: relative;
  flex-shrink: 0;
}
.step-arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -4px;
  border-left: 8px solid #3dbd7a;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* ── Nav mobile menu ── */
#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

/* ── Pulse dot, used inside small live status badges ── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.live-dot { animation: pulse 1.8s ease-in-out infinite; }

/* ── Section fade in on load ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.7s ease both; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* ── Filter field, used by every input, select, and checkbox inside the
   search page filters panel, keeps them touch friendly on small screens
   and consistent on larger ones ── */
.filter-field {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(13, 33, 69, 0.15);
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: #0d2145;
  min-height: 44px;
}
.filter-field:focus {
  outline: none;
  border-color: #2d8a5e;
  box-shadow: 0 0 0 3px rgba(45, 138, 94, 0.15);
}
input[type="checkbox"].filter-field {
  min-height: 0;
  padding: 0;
  accent-color: #2d8a5e;
}

/* ── Found stamp, ScoutMail specific, a small badge marking a channel
   record where a contact email was located ── */
.found-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(45, 138, 94, 0.10);
  border: 1px solid rgba(45, 138, 94, 0.25);
  color: #2d8a5e;
  border-radius: 50px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}

/* ── Install banner, shown when the browser offers installing ScoutMail
   as an app, or as a manual instruction banner on iOS Safari, which has
   no install prompt event of its own. Mobile first, fixed to the bottom
   on small screens, becomes a smaller floating card on larger screens. ── */
.scoutmail-install-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scoutmail-install-text {
  font-size: 14px;
  font-weight: 500;
  color: #0d2145;
  margin: 0;
  line-height: 1.5;
}

.scoutmail-install-actions {
  display: flex;
  gap: 10px;
}

.scoutmail-install-actions .btn-green,
.scoutmail-install-actions .btn-secondary {
  padding: 10px 18px;
  font-size: 13px;
  flex: 1;
}

@media (min-width: 768px) {
  .scoutmail-install-banner {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: 340px;
  }

  .scoutmail-install-actions .btn-green,
  .scoutmail-install-actions .btn-secondary {
    flex: none;
  }
}