/* =============================================================================
   Global help popover + the post-onboarding walkthrough (site-tour.js;
   design_handoff_onboarding §7). The walkthrough is one cutout + one coach
   card, both transitioning between steps — the scrim is the cutout's giant
   box-shadow, so there is exactly one hole in it.
   ============================================================================= */

/* ---- help placeholder popover ---- */
.st-helppop {
  position: fixed; z-index: 1400; width: 240px; padding: 13px 15px;
  border: 1px solid rgba(16, 20, 24, 0.4); border-radius: 12px;
  background: #eceef1; color: #101418;
  box-shadow: 0 18px 44px rgba(16, 20, 24, 0.25);
}
.st-helppop b { display: block; font-size: 13px; font-weight: 850; margin: 0 0 4px; }
.st-helppop span { display: block; font-size: 12px; font-weight: 500; line-height: 1.5; color: rgba(16, 20, 24, 0.65); }
.st-helppop a { color: #101418; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---- accrual chip ---- */
.st-chip {
  position: fixed; z-index: 1450; padding: 7px 14px;
  border: 1px solid rgba(22, 163, 74, 0.5); border-radius: 999px;
  background: #eceef1; color: #15803d; font-size: 12.5px; font-weight: 800;
  white-space: nowrap; box-shadow: 0 10px 26px rgba(16, 20, 24, 0.18);
  animation: stChipPop 0.35s cubic-bezier(0.2, 1.2, 0.4, 1) both;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.st-chip.is-out { opacity: 0; transform: translateY(-6px); }
@keyframes stChipPop {
  0% { transform: scale(0.7) translateY(6px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ---- walkthrough ---- */
.st-overlay { position: fixed; inset: 0; z-index: 1500; }
.st-cutout {
  position: fixed;
  box-shadow: 0 0 0 9999px rgba(16, 20, 24, 0.5);
  transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.st-card {
  position: fixed; width: 300px; padding: 16px 17px; box-sizing: border-box;
  border: 1px solid rgba(16, 20, 24, 0.4); border-radius: 14px;
  background: #eceef1; color: #101418;
  box-shadow: 0 24px 60px rgba(16, 20, 24, 0.35);
  transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.st-eyebrow {
  display: block; font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: rgba(16, 20, 24, 0.5); margin: 0 0 6px;
}
.st-title { display: block; font-size: 16px; font-weight: 850; letter-spacing: -0.3px; margin: 0 0 5px; }
.st-body { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.5; color: rgba(16, 20, 24, 0.7); }
.st-foot { display: flex; align-items: center; gap: 12px; margin-top: 13px; }
.st-dots { display: inline-flex; align-items: center; gap: 5px; flex: 1; }
.st-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(16, 20, 24, 0.2); font-style: normal;
}
.st-dots i.is-on { background: #101418; }
.st-skip {
  margin: 0; padding: 0; border: 0 !important; background: transparent !important;
  box-shadow: none !important; width: auto; font-family: inherit; cursor: pointer;
  font-size: 12px !important; font-weight: 600; color: rgba(16, 20, 24, 0.5) !important;
}
.st-skip:hover { color: #101418 !important; }
.st-next {
  display: inline-flex; align-items: center; height: 30px; margin: 0; padding: 0 16px;
  border: 0 !important; border-radius: 999px !important; background: #101418 !important;
  color: #fff !important; font-size: 12px !important; font-weight: 800;
  font-family: inherit; cursor: pointer; box-shadow: none !important; width: auto;
  line-height: 1 !important;
}
.st-next:hover { background: #000 !important; }

@media (prefers-reduced-motion: reduce) {
  .st-cutout, .st-card, .st-chip { transition: none; animation: none; }
}