/* BETA-031: turquoise Need/Register; green Help; quiet Logout. Hover ring via box-shadow (moves with button). */
.cta-pill__need,
.auth-pill__signup,
#joinBtn{
  color:#07352f !important;
  background:linear-gradient(#2fe0c8,#16b8a6) !important;
  border:1px solid #0e8f82 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 4px 0 #0b6f66,
    0 10px 18px rgba(8,90,80,.22),
    0 0 14px 3px rgba(22,184,166,.35) !important;
}
.cta-pill__need:hover,
html.is-phone .hero-v063 .home-ctas.cta-pill .cta-pill__need:hover,
html.is-phone .hero-v063 .home-ctas.cta-pill .cta-pill__need:focus-visible,
.auth-pill__signup:hover,
#joinBtn:hover,
.cta-pill__need:focus-visible,
.auth-pill__signup:focus-visible,
#joinBtn:focus-visible{
  color:#042823 !important;
  transform:translateY(-2px);
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 6px 0 #0a5f58,
    0 14px 22px rgba(8,90,80,.26),
    0 0 0 2px #d8fff6,
    0 0 18px 4px rgba(64,230,210,.55) !important;
}
.cta-pill__need:active,
html.is-phone .hero-v063 .home-ctas.cta-pill .cta-pill__need:active,
.auth-pill__signup:active,
#joinBtn:active{
  transform:translateY(3px);
  box-shadow:
    inset 0 3px 6px rgba(0,40,36,.25),
    0 1px 0 #0b6f66,
    0 0 0 1px #bff5ec !important;
}

/* Help: keep UX030 catalog-green, add the same attached hover ring. */
.cta-pill__help,
.cta-pill .hero-help-cta{
  color:#1c4a38 !important;
  background:linear-gradient(#f6fff8,#e3f3e8) !important;
  border:1px solid #8fc9a0 !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #2a6b4a,
    0 10px 18px rgba(30,80,50,.18),
    0 0 16px 5px rgba(72,210,130,.42) !important;
}
.cta-pill__help:hover,
.cta-pill .hero-help-cta:hover,
.cta-pill__help:focus-visible,
.cta-pill .hero-help-cta:focus-visible{
  transform:translateY(-2px);
  outline:none;
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 0 #245c40,
    0 14px 22px rgba(30,80,50,.22),
    0 0 0 2px #e9ffe8,
    0 0 20px 6px rgba(80,230,140,.5) !important;
}
.cta-pill__help:active,
.cta-pill .hero-help-cta:active{
  transform:translateY(3px);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.12),
    0 1px 0 #2a6b4a,
    0 0 0 1px #cfe8d4 !important;
}

/* Logout uses same #joinBtn when signed in — quieter than Register, same capsule. */
#joinBtn[data-ux031="out"],
html.is-authed #joinBtn{
  color:#1c3d32 !important;
  background:linear-gradient(#fff,#e8eee6) !important;
  border:1px solid #c5d2c4 !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #b7c4b5,
    0 8px 14px rgba(30,45,35,.12) !important;
}
html.is-authed #joinBtn:hover,
html.is-authed #joinBtn:focus-visible{
  transform:translateY(-2px);
  outline:none;
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 0 #a9b8a7,
    0 12px 18px rgba(30,45,35,.16),
    0 0 0 2px #f3fff4,
    0 0 14px 4px rgba(80,160,110,.28) !important;
}

html.is-phone .cta-pill__need,
html.is-phone .hero-v063 .home-ctas.cta-pill .cta-pill__need,
html.is-phone .auth-pill__signup,
html.is-phone #joinBtn,
html.is-phone #joinBtn.auth-pill__signup{
  border-radius:999px !important;
  color:#07352f !important;
  background:linear-gradient(#2fe0c8,#16b8a6) !important;
  border:1px solid #0e8f82 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 4px 0 #0b6f66,
    0 10px 18px rgba(8,90,80,.22),
    0 0 14px 3px rgba(22,184,166,.35) !important;
}
html.is-phone .cta-pill__help,
html.is-phone .cta-pill .hero-help-cta{
  border-radius:999px !important;
  color:#1c4a38 !important;
  background:linear-gradient(#f6fff8,#e3f3e8) !important;
  border:1px solid #8fc9a0 !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #2a6b4a,
    0 10px 18px rgba(30,80,50,.18),
    0 0 16px 5px rgba(72,210,130,.42) !important;
}
html.is-phone.is-authed #joinBtn{
  color:#1c3d32 !important;
  background:linear-gradient(#fff,#e8eee6) !important;
  border:1px solid #c5d2c4 !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #b7c4b5,
    0 8px 14px rgba(30,45,35,.12) !important;
}

/* Override the earlier mobile joined-pill layout for the separate hero buttons. */
html.is-phone .hero-v063 .home-ctas.cta-pill{
  gap:10px !important;
}