.product-stage{position:relative;padding-top:32px}
.product-stage .product-image-wrap{margin-inline:40px}
.product-stage .hero-toolbar{margin-top:60px}
.feature-highlights{position:absolute;inset:32px 40px auto;aspect-ratio:1207/620;pointer-events:none;z-index:5}
.feature-connectors{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:var(--accent)}
.feature-connectors path{stroke:currentColor;stroke-width:1;opacity:.5;vector-effect:non-scaling-stroke}
.feature-connectors circle{fill:var(--bg);stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke}
.feature-spot{position:absolute;pointer-events:auto;width:288px;z-index:1}
.feature-routing{left:-40px;top:66.666%;--float-duration:6.8s;--float-delay:-1s}
.feature-tuner{right:-40px;top:8%;--float-duration:7.6s;--float-delay:-3.4s}
.feature-controls{right:-40px;bottom:-40px;--float-duration:8.2s;--float-delay:-5.2s}
.feature-spot.is-open{z-index:2}
.feature-trigger{display:flex;align-items:center;gap:16px;width:100%;min-height:100px;padding:10px;background:#292826;color:var(--ink);border-radius:8px;box-shadow:0 20px 40px #0008;text-align:left;transition:background .2s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);animation:feature-float var(--float-duration,7s) ease-in-out var(--float-delay,0s) infinite paused}
.feature-highlights.is-visible:not(.motion-paused) .feature-trigger{animation-play-state:running}
.feature-highlights .feature-spot:hover .feature-trigger,.feature-highlights .feature-spot:focus-within .feature-trigger,.feature-highlights .feature-spot.is-open .feature-trigger{animation-play-state:paused}
.feature-trigger:hover,.feature-trigger[aria-expanded=true]{background:#35312b;transform:translateY(-6px) scale(1.025);box-shadow:0 28px 48px #0009}
.feature-trigger:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.feature-label{font:600 20px/1.15 var(--display);flex:1}
.feature-plus{width:16px;height:16px;color:var(--accent);margin-right:2px;transition:transform .25s var(--ease)}
.feature-trigger[aria-expanded=true] .feature-plus{transform:rotate(45deg)}
.feature-crop{display:block;position:relative;overflow:hidden;aspect-ratio:var(--crop-ratio,1.6);background:#191918}
.feature-crop img{position:absolute;max-width:none;width:var(--crop-width);height:auto;left:var(--crop-left);top:var(--crop-top)}
.feature-trigger>.feature-crop{width:120px;flex-shrink:0;border-radius:4px}
.feature-detail{position:absolute;top:calc(100% + 12px);left:0;width:320px;background:#e2dfd7;color:#292722;border-radius:6px;box-shadow:0 20px 50px #0008;animation:feature-open .25s var(--ease);transform-origin:top left}
.feature-detail[hidden]{display:none}
.feature-detail:after{content:'';position:absolute;left:0;right:0;bottom:100%;height:18px}
.feature-routing .feature-detail{top:auto;bottom:calc(100% + 12px);transform-origin:bottom left}
.feature-routing .feature-detail:after{top:100%;bottom:auto}
.feature-tuner .feature-detail{left:auto;right:0;top:calc(100% + 12px);bottom:auto;transform-origin:top right}
.feature-tuner .feature-detail:after{top:auto;bottom:100%}
.feature-controls .feature-detail{left:auto;right:0;top:auto;bottom:calc(100% + 16px);transform-origin:bottom right}
.feature-controls .feature-detail:after{top:100%;bottom:auto;height:18px}
.feature-magnified{padding:8px 8px 0}
.feature-magnified .feature-crop{border-radius:3px}
.feature-close{position:absolute;right:12px;top:12px;width:44px;height:44px;display:grid;place-items:center;background:#29251ef2;color:#eedbc0;border-radius:3px}
.feature-close:hover{background:#705a3a}
.feature-close .icon{width:18px;height:18px}
.feature-body{padding:20px}
.feature-body h3{font-size:30px;line-height:1.05;text-wrap:pretty}
.feature-body p{font-size:13px;line-height:1.65;margin-top:12px;color:#58534a}
.feature-body .text-link{background:transparent;padding:0;margin-top:12px;gap:16px;font-size:12px;color:#493b27}
.feature-body .text-link:hover{color:#201b15}
@keyframes feature-open{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes feature-float{0%,100%{translate:0 4px}50%{translate:0 -4px}}
@media(max-width:1100px) and (min-width:761px){.feature-spot{width:240px}.feature-label{font-size:18px}.feature-trigger{gap:12px}.feature-trigger>.feature-crop{width:92px}.feature-detail{width:290px}}
@media(max-width:760px){
  .product-stage{padding-top:60px}
  .product-stage .product-image-wrap{margin-inline:0}
  .product-stage .hero-toolbar{margin-top:12px}
  .feature-highlights{inset:60px 0 auto}
  .feature-connectors{display:none}
  .feature-spot{position:static;width:auto;pointer-events:none}
  .feature-trigger{position:absolute;width:72px;min-height:58px;height:58px;padding:6px;pointer-events:auto;gap:0}
  .feature-trigger>.feature-crop{width:60px}
  .feature-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .feature-plus{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;padding:3px;margin:0;background:var(--accent);color:#292117;border-radius:50%}
  .feature-routing .feature-trigger{left:2%;top:-44px}
  .feature-tuner .feature-trigger{left:calc(50% - 36px);top:-40px}
  .feature-controls .feature-trigger{right:2%;top:-44px}
  .feature-detail,.feature-routing .feature-detail,.feature-tuner .feature-detail,.feature-controls .feature-detail{left:0;right:0;top:calc(100% + 12px);bottom:auto;width:100%;pointer-events:auto;transform-origin:top center;translate:none}
  .feature-detail:after,.feature-routing .feature-detail:after,.feature-controls .feature-detail:after{left:0;right:0;top:auto;bottom:100%;height:14px;width:auto}
  .feature-body{padding:18px 20px}
  .feature-body h3{font-size:28px}
}
@media(prefers-reduced-motion:reduce){.feature-detail,.feature-trigger{animation:none}.feature-trigger,.feature-plus{transition:none}.feature-trigger:hover,.feature-trigger[aria-expanded=true]{transform:none}}