/* ZamaSU v7.216 - make the main call to action the first thing the eye finds: the landing page, sign in, create account and the
 * "confirm your email" screen. One primary button per screen, a little larger, with a short halo (three pulses, then still); secondary
 * actions are quieter. Loaded after each page's own stylesheet; every rule is scoped to the classes below, so nothing else on the site moves.
 * Colours are the existing brand greens: white text on #06763a / #056947 / #06627a is 6.7:1 or better (WCAG AA for normal text). */

/* ---------- landing (.zl): the buttons that sign people up ---------- */
/* a row of buttons stretches every button to the tallest one by default; keep the secondary button at its natural size so the sign-up button stays the biggest */
.zl .zl-hero-actions { align-items: center; }
.zl .zl-btn.zl-btn-cta { min-height: 56px; padding: 14px 30px; font-size: .98rem; letter-spacing: .01em; }
.zl .zl-btn.zl-btn-cta.zl-btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 8px rgba(0, 40, 30, .3), 0 0 0 4px rgba(16, 185, 129, .16), 0 16px 34px -10px rgba(10, 170, 100, .85);
}
.zl .zl-btn.zl-btn-cta.zl-btn-gold { min-height: 58px; padding-inline: 34px; }
.zl-nav-actions .zl-btn.zl-btn-cta { min-height: 44px; padding: 10px 18px; }
@media (max-width: 720px) {
  .zl-nav-actions .zl-btn.zl-btn-cta { min-height: 44px; padding: 10px 16px; }
  .zl .zl-hero-actions .zl-btn.zl-btn-cta { min-height: 52px; }
}

/* the live count ("N jobs are waiting for someone to help right now"): a number from the database, shown only when it is above zero */
.zl .zl-live-pill {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 16px; padding: 9px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .95); color: #0d2b1f;
  font-size: .9rem; font-weight: 600; line-height: 1.3; box-shadow: 0 8px 20px -12px rgba(12, 35, 64, .4);
}
.zl .zl-live-pill strong { color: #056947; font-weight: 800; }
.zl-live-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #10b981; animation: zl-live-ping 1.8s ease-out infinite; }
@keyframes zl-live-ping {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .6); }
  100% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
}
.zl .zl-final-note b { color: inherit; font-weight: 800; }

/* the halo: three soft pulses when the page opens, then still (so it draws the eye without becoming noise) */
@keyframes cta-halo {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55), 0 16px 34px -10px rgba(10, 170, 100, .85); }
  70%  { box-shadow: 0 0 0 16px rgba(16, 185, 129, 0), 0 16px 34px -10px rgba(10, 170, 100, .85); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), 0 16px 34px -10px rgba(10, 170, 100, .85); }
}
.cta-halo-once { animation: cta-halo 1.6s ease-out 3; }

/* ---------- sign in / create account (.auth-wrap .auth-card) ---------- */
.auth-wrap .auth-card .btn-primary.cta-main {
  min-height: 58px; margin-top: 10px; font-size: 1.02rem; letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 8px rgba(0, 40, 30, .3), 0 0 0 4px rgba(16, 185, 129, .16), 0 16px 32px -12px rgba(10, 170, 100, .85);
}
.auth-wrap .auth-card .btn-primary.cta-main:hover { transform: translateY(-2px); }
.auth-wrap .auth-card .cta-alt {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 14px;
  border-radius: 999px; border: 1.5px solid rgba(6, 118, 58, .55); background: rgba(255, 255, 255, .72);
  color: #06763a; font-weight: 800; font-size: .98rem; text-decoration: none;
}
.auth-wrap .auth-card .cta-alt:hover { background: #fff; border-color: #06763a; }
.auth-wrap .auth-card .pw-wrap { display: flex; gap: 8px; align-items: stretch; }
.auth-wrap .auth-card .pw-wrap input { flex: 1 1 auto; min-width: 0; }
.auth-wrap .auth-card .pw-toggle {
  flex: 0 0 auto; min-width: 72px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid rgba(6, 118, 58, .45); background: rgba(255, 255, 255, .8); color: #06763a; font-weight: 800; font-size: .9rem; cursor: pointer;
}
.auth-wrap .auth-card .pw-toggle:hover { background: #fff; }
.auth-wrap .auth-card .pw-toggle:focus-visible { outline: 3px solid #0b57d0; outline-offset: 2px; }

/* ---------- any page: a primary action marked cta-main (the confirm-email screen uses it) ---------- */
.btn.btn-primary.cta-main {
  min-height: 56px; font-size: 1rem; font-weight: 800; letter-spacing: .01em; border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -3px 8px rgba(0, 40, 30, .28), 0 0 0 4px rgba(16, 185, 129, .16), 0 14px 28px -12px rgba(10, 170, 100, .8);
}
.btn.btn-primary.cta-main:hover { filter: saturate(1.1); }

@media (prefers-reduced-motion: reduce) {
  .cta-halo-once, .zl-live-dot { animation: none !important; }
}