.feature-hotspots-section{--fh-media-ratio:45%;--fh-pulse:var(--foreground)}.feature-hotspots-section__stage{z-index:0;position:relative}.feature-hotspots-section__media{aspect-ratio:1;position:relative;overflow:hidden}@media (min-width:768px){.feature-hotspots-section__media{width:var(--fh-media-ratio);margin-inline:auto}}.feature-hotspots-section__image{object-fit:cover;object-position:center center;width:100%;height:100%;position:absolute;inset:0}.feature-hotspots-section__spot{animation:2s cubic-bezier(0,0,.3,1) infinite fh-pulse;position:absolute;transform:translate(-50%,-50%)translate(0,0)}.feature-hotspots-section__spot,.feature-hotspots-section__spot:hover{background-color:var(--foreground);color:var(--background)}.feature-hotspots-section__spot:hover,.feature-hotspots-section__spot[data-active=true]{animation-duration:.5s}@media not (min-width:768px){.feature-hotspots-section__media{margin-bottom:2rem}.feature-hotspots-section__feature{border-radius:calc(var(--radius) * .7);background:color-mix(in srgb, var(--foreground) 5%, transparent);padding:1rem}.feature-hotspots-section__feature:not(:last-of-type){margin-bottom:1rem}.feature-hotspots-section__feature[data-active=true]{animation:1s infinite fh-pulse}}@media (min-width:768px){.feature-hotspots-section__features{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.feature-hotspots-section__feature{transform:var(--fh-box-transform,translateY(-100%));visibility:hidden;opacity:0;position:absolute}.feature-hotspots-section__feature[data-direction=horizontal]{max-width:calc((100% - var(--fh-media-ratio)) / 2);pointer-events:auto;padding-bottom:.5rem}.feature-hotspots-section__feature[data-direction=vertical]{pointer-events:none;flex-direction:column-reverse;align-items:flex-start;display:flex;left:0;right:0;transform:none}.feature-hotspots-section__feature[data-direction=vertical][data-box-side=below]{flex-direction:column}.feature-hotspots-section__feature[data-direction=vertical] .feature-hotspots-section__copy{max-width:var(--fh-media-ratio);margin-left:var(--fh-copy-x,0);text-align:center;pointer-events:auto;padding-bottom:.5rem;transform:translate(-50%)}.feature-hotspots-section__feature[data-direction=vertical][data-box-side=below] .feature-hotspots-section__copy{padding-top:.5rem;padding-bottom:0}.feature-hotspots-section__feature[data-revealed=true]{visibility:visible;animation:.3s cubic-bezier(0,0,.3,1) .5s forwards fh-fade-in}.feature-hotspots-section__feature[data-direction=horizontal][data-position=left]{left:0;right:auto}.feature-hotspots-section__feature[data-direction=horizontal][data-position=right]{left:auto;right:0}.feature-hotspots-section__line{background:var(--foreground);visibility:hidden;height:1px;position:absolute}.feature-hotspots-section__line[data-position=left]{left:0;right:auto}.feature-hotspots-section__line[data-position=right]{left:auto;right:0}.feature-hotspots-section__line[data-revealed=true]{visibility:visible}.feature-hotspots-section__line[data-direction=horizontal][data-revealed=true]{animation:.5s cubic-bezier(0,0,.3,1) forwards fh-grow-width}.feature-hotspots-section__line[data-direction=horizontal][data-position=left]{transform-origin:100%}.feature-hotspots-section__line[data-direction=horizontal][data-position=right]{transform-origin:0}.feature-hotspots-section__line[data-direction=vertical]{flex:1;width:1px;height:auto;min-height:1.25rem;position:static}.feature-hotspots-section__line[data-direction=vertical][data-revealed=true]{animation:.5s cubic-bezier(0,0,.3,1) forwards fh-grow-height}.feature-hotspots-section__line[data-direction=vertical][data-box-side=above]{transform-origin:bottom}.feature-hotspots-section__line[data-direction=vertical][data-box-side=below]{transform-origin:top}}@media (min-width:1280px){.feature-hotspots-section__feature[data-direction=horizontal],.feature-hotspots-section__feature[data-direction=vertical] .feature-hotspots-section__copy{max-width:30rem}}@keyframes fh-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--fh-pulse) 50%, transparent)}to{box-shadow:0 0 0 .5rem color-mix(in srgb, var(--fh-pulse) 0%, transparent)}}@keyframes fh-fade-in{0%{opacity:.01}to{opacity:1}}@keyframes fh-grow-width{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes fh-grow-height{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@media (prefers-reduced-motion:reduce){.feature-hotspots-section__spot{animation:none}@media (min-width:768px){.feature-hotspots-section__feature{visibility:visible;opacity:1;animation:none}.feature-hotspots-section__line{visibility:visible;animation:none}}}