/* ==========================================================
   HERO · ARIA NUDGE (black status pill)
   Sits directly under "More booked appointments." inside the H1.
   Black pill + green online pulsing dot. Not purple.
   ========================================================== */
.hero-spot h1 .h1-nudge{
  display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  padding:10px 18px 10px 14px;border-radius:999px;
  background:#111114;color:#fff;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 28px -14px rgba(0,0,0,.55);
  font-size:clamp(13px,1.1vw,16px);font-weight:500;letter-spacing:-.005em;line-height:1.35;
  text-align:left;max-width:100%;
}
.hero-spot h1 .hn-txt{white-space:nowrap}
.hero-spot h1 .h1-nudge b{font-weight:700;color:#fff}
.hero-spot h1 .hn-dot{
  position:relative;flex:none;width:9px;height:9px;border-radius:50%;
  background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.55);
}
.hero-spot h1 .hn-dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(34,197,94,.45);animation:hnPulse 2s ease-out infinite;
}
@keyframes hnPulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-spot h1 .hn-dot::after{animation:none}}
@media (max-width:900px){
  .hero-spot h1 .hn-txt{white-space:normal}
  .hero-spot h1 .h1-nudge{border-radius:999px;padding:10px 14px;max-width:min(100%,420px)}
}
@media (max-width:600px){
  .hero-spot h1 .h1-nudge{align-items:flex-start;border-radius:18px;font-size:13px}
  .hero-spot h1 .hn-dot{margin-top:5px}
}