/* The hire's step marker: Meet, Account, Get to know you, Start.
   Carried by the pool (hire.html), the signup (onboarding_conversational.html)
   and the start of /welcome, so the three pages read as one hire rather than
   three products. Its own small file, with its own prefix, because the signup
   page keeps its own stylesheet and must not take julie-hire.css's resets.

   Bars for the steps; on a phone only the CURRENT step keeps its label, so
   the row fits beside the name at 360px. */
.hs-top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:12px;
  padding:max(12px, var(--jsafe-top, env(safe-area-inset-top, 0px))) 16px 10px;
  background:linear-gradient(180deg,rgba(10,12,20,.92),rgba(10,12,20,0))}
.hs-mark{display:flex;align-items:center;gap:8px;min-width:0;color:#E2E8F0;
  text-decoration:none;font:700 15px/1 'Sora',system-ui,sans-serif}
.hs-mark i{width:26px;height:26px;border-radius:8px;display:inline-grid;place-items:center;
  flex-shrink:0;background:linear-gradient(135deg,#0A84FF,#6d5cf6)}
.hs-mark i svg{width:15px;height:15px}
.hs-stages{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.hs-stages li{display:flex;align-items:center;gap:6px;white-space:nowrap;
  font:500 12px/1 'Space Grotesk',system-ui,sans-serif;color:#64748B}
.hs-stages li::before{content:"";display:block;width:18px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.16)}
.hs-stages li.done::before{background:rgba(10,132,255,.55)}
.hs-stages li.on{color:#E2E8F0}
.hs-stages li.on::before{width:26px;background:#0A84FF}
@media (max-width:560px){
  .hs-stages{gap:6px}
  .hs-stages li:not(.on) span{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
}