/* ---------- US availability / territory map ---------- */
.avail { background: var(--ink); position: relative; overflow: clip; }
.map-wrap {
  display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem;
  align-items: center; margin-top: 3rem;
}
.us-map {
  position: relative; width: 100%; aspect-ratio: 960 / 600;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.45));
}
.us-svg {
  width: 100%; height: 100%; display: block;
}
.us-map .us-svg path {
  fill: #142840;
  stroke: rgba(120,190,255,.22);
  stroke-width: 1.2;
}

/* pins */
.pin {
  position: absolute; transform: translate(-50%, -50%);
  z-index: 2;
}
.pin-dot {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, #ff3b3b 70%);
  box-shadow: 0 0 0 4px rgba(255,59,59,.22), 0 4px 12px rgba(255,59,59,.5);
  position: relative;
}
.pin-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(255,59,59,.5);
  animation: pinPulse 2.4s ease-out infinite;
}
@keyframes pinPulse {
  0% { transform: scale(.7); opacity: .9; }
  100% { transform: scale(2.6); opacity: 0; }
}
.pin-label {
  position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%);
  white-space: nowrap; font-size: .72rem; font-weight: 800;
  background: #0b1424; color: #fff; padding: .25rem .55rem; border-radius: 6px;
  border: 1px solid rgba(255,59,59,.4);
  opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.pin:hover { z-index: 5; }
.pin:hover .pin-label { opacity: 1; transform: translate(-50%, -115%); }
.pin:hover .pin-dot { box-shadow: 0 0 0 6px rgba(255,59,59,.3), 0 4px 16px rgba(255,59,59,.7); }

/* legend */
.map-legend { align-self: center; }
.ml-row { display: flex; align-items: center; gap: .6rem; font-weight: 600; margin-bottom: .7rem; }
.ml-swatch { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; }
.ml-swatch.taken { background: #ff3b3b; box-shadow: 0 0 0 3px rgba(255,59,59,.22); }
.ml-swatch.open { background: #16263f; border: 1px solid rgba(120,190,255,.3); }
.ml-note { font-size: .85rem; color: var(--text-dim); margin-top: .6rem; line-height: 1.5; }

@media (max-width: 860px) {
  .map-wrap { grid-template-columns: 1fr; gap: 1.5rem; }
  .pin-label { font-size: .62rem; }
  .pin-dot { width: 13px; height: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .pin-dot::after { animation: none; }
}