.feat-wrap{width:100%;max-width:100%}
.feat-image-wrap{position:relative;display:block;width:100%;max-width:100%}
.feat-image{display:block;width:100%;height:auto;max-width:100%}
.feat-hotspots-layer{position:absolute;left:0;top:0;right:0;bottom:0}
.feat-hotspot{position:absolute;transform:translate(-50%,-50%);border:0;background:transparent;cursor:pointer;border-radius:50%;}
.feat-hotspot .feat-pulse{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;border-radius:50%;animation: feat-pulse 1.8s ease-out infinite}
@keyframes feat-pulse{0%{transform:translate(-50%,-50%) scale(0.8);opacity:.9}70%{transform:translate(-50%,-50%) scale(1.3);opacity:.25}100%{transform:translate(-50%,-50%) scale(0.8);opacity:.9}}

.feat-modal{position:absolute;transform:translate(-50%,-10px);min-width:240px;max-width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);padding:16px;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .25s ease}
.feat-modal.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.feat-modal .feat-close{position:absolute;right:8px;top:6px;background:transparent;border:0;font-size:22px;line-height:1;cursor:pointer}
.feat-modal-title{margin:0 24px 8px 0;font-size:1.1rem}
.feat-modal-content{font-size:.95rem;line-height:1.45}

.feat-backdrop{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.08)}

svg.feat-guideline{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none}
.feat-line{fill:none;stroke:#ff3b30;stroke-width:2;stroke-linecap:round;transition:stroke-dashoffset .4s ease}