/* Homepage "Where it's used" map (js/where-used.js) */
.wu-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.wu-head .section-desc { margin: 0 auto; }
.wu-head .section-title { max-width: none; text-wrap: balance; }
.wu-map { position: relative; max-width: 1040px; margin: 0 auto; aspect-ratio: 975 / 745; }
.wu-map > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none;
  /* fade the clipped Canada edges into the section background */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 14%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 14%);
  mask-composite: intersect; }
.wu-pins { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wu-b { cursor: pointer; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.3);
  transition: opacity .45s ease var(--d), transform .6s cubic-bezier(.2,1.5,.4,1) var(--d); }
.wu-b circle { fill: var(--red); stroke: #fff; stroke-width: var(--sw, 1.3); }
.wu-b.multi circle { fill: rgba(188, 47, 44, .82); }
.wu-b text { fill: #fff; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; font-family: inherit; }
.wu-map.in .wu-b { opacity: 1; transform: scale(1); }
.wu-map.in .wu-b:hover, .wu-b.is-on { transform: scale(1.18); transition-delay: 0s; }
.wu-b:hover circle, .wu-b.is-on circle { fill: var(--black); }
.wu-tip { position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 14px)); white-space: nowrap; pointer-events: none;
  padding: 7px 12px; border-radius: 6px; background: var(--black); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); opacity: 0; transition: opacity .15s ease; }
.wu-tip::after { content: ""; position: absolute; left: calc(50% + var(--ax, 0px)); top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--black); }
.wu-tip.show { opacity: 1; }
.wu-stats { display: flex; justify-content: center; gap: clamp(28px, 7vw, 96px); margin: 36px auto 0; padding: 0; list-style: none; }
.wu-stats li { text-align: center; }
.wu-stats strong { display: block; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--black); }
.wu-stats span { display: block; margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.wu-note { text-align: center; margin: 22px auto 0; font-size: .85rem; color: var(--gray); }
@media (max-width: 639px) { .wu-stats { gap: 22px; } .wu-head { margin-bottom: 24px; } .wu-tip { white-space: normal; width: max-content; max-width: min(240px, 80vw); text-align: center; line-height: 1.35; } }
@media (prefers-reduced-motion: reduce) { .wu-b { transition: none; } }