/* TRES saved marketing looks. Spec: README.md (not deployed). */

/* Look 1: Map Grid. Dark street map; three highlighted pins = the three agents Google shows. */
.look-mapgrid{
  --mg-grid:rgba(242,243,241,.045);
  background-color:var(--graphite,#16191D);
  background-image:linear-gradient(var(--mg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--mg-grid) 1px,transparent 1px);
  background-size:48px 48px;background-position:-1px -1px;
  position:relative;overflow:hidden;isolation:isolate}
.look-mapgrid>.wrap{position:relative;z-index:1}
.mapgrid-art{position:absolute;z-index:0;top:0;right:0;bottom:0;width:min(46vw,660px);pointer-events:none}
.mapgrid-art svg{display:block;width:100%;height:100%}
.mapgrid-art .road{fill:none;stroke:#2A3037;stroke-width:7;stroke-linecap:round}
.mg-pin{--mg-ring:rgba(242,243,241,.35)}
.mg-pin.o{--mg-fill:#FF5B26}
.mg-pin.p{--mg-fill:rgba(242,243,241,.9)}
.mg-pin.s{--mg-fill:#6B7480;opacity:.42}
.mg-pulse{fill:none;stroke:#FF5B26;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;animation:mgPulse 3.6s ease-out infinite}
.mg-pulse.d2{animation-delay:1.8s}
@keyframes mgPulse{0%{opacity:.55;transform:scale(.55)}100%{opacity:0;transform:scale(1.6)}}
@media (prefers-reduced-motion:reduce){.mg-pulse{animation:none;display:none}}
/* Compact trio shown under the buttons when the side art is hidden */
.mapgrid-trio{display:none;margin-top:30px;height:58px;width:auto}
@media(max-width:1000px){.mapgrid-art{display:none}.mapgrid-trio{display:block}}
@media(max-width:420px){.mapgrid-trio{height:48px}}

/* Footer: long email address wraps instead of widening the page */
.fgrid li{overflow-wrap:anywhere}