.feature-stage{display:flex;height:clamp(420px,61svh,660px);gap:6px;padding:10px;background:var(--bg);isolation:isolate}
.feature-panel{--accent:#e3ba85;--text:#f6f5f2;color:var(--text);position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:#f5f5f7;border:1px solid #dcdce1;transition:flex-grow .55s cubic-bezier(.2,.7,.2,1),filter .45s,border-color .3s,box-shadow .45s,transform .45s;isolation:isolate}
.feature-panel.is-active{flex-grow:3.1;z-index:3;transform:translateY(-4px);border-color:var(--accent);box-shadow:0 10px 35px #24242930}
.feature-stage.has-active .feature-panel:not(.is-active){filter:brightness(.66) saturate(.75)}
.feature-photo{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s,object-position .4s;will-change:transform}
.feature-panel::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(0deg,#08080bf5 0%,#08080b9c 18%,transparent 53%)}
.feature-hit{position:absolute;inset:0;z-index:2;background:transparent;border:0;width:100%;padding:0}
.feature-hit:focus-visible{outline:2px solid var(--accent);outline-offset:-5px}
.feature-number{position:absolute;z-index:3;left:16px;top:17px;pointer-events:none;font-size:12px;color:#efebe5;letter-spacing:2px;text-shadow:0 1px 7px #000;background:#1119;padding:6px 8px}
.feature-caption{position:absolute;z-index:3;left:18px;right:16px;bottom:24px;pointer-events:none}
.feature-caption .eyebrow{font-size:11px;line-height:1.5;letter-spacing:1px;margin:0 0 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feature-caption h2{font-size:clamp(17px,1.6vw,24px);font-weight:500;line-height:1.18;letter-spacing:-.4px;overflow-wrap:break-word;text-wrap:balance}
.feature-panel.is-active h2{font-size:clamp(26px,3.3vw,46px);letter-spacing:-1px}
.feature-open{display:none;pointer-events:auto;align-items:center;gap:15px;margin-top:18px;padding:12px 0;background:transparent;border:0;border-bottom:1px solid #9b815f;color:var(--accent);font-size:14px}
.feature-panel.is-active .feature-open{display:inline-flex}
.feature-hint{margin:0;padding:17px 28px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--muted)}
.feature-panel:hover .feature-hit{cursor:pointer}
#feature-stage{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#feature-stage img{-webkit-user-drag:none}
.feature-touch-hint{display:none}
.feature-stage.is-touch + .feature-hint .feature-mouse-hint{display:none}
.feature-stage.is-touch + .feature-hint .feature-touch-hint{display:inline}
.feature-stage.is-touch .feature-open{font-size:14px;text-align:left;line-height:1.5}
@media(pointer:coarse){.feature-mouse-hint{display:none}.feature-touch-hint{display:inline}}
@media(max-width:900px){.feature-stage{gap:4px;padding:7px}.feature-caption{left:12px;right:10px;bottom:18px}.feature-caption .eyebrow{font-size:10px}.feature-caption h2{font-size:18px}.feature-panel.is-active h2{font-size:30px}.feature-stage.has-active .feature-panel:not(.is-active) .feature-caption{opacity:0}.feature-number{left:10px;top:12px}}
@media(max-width:600px){.feature-stage{height:440px;gap:3px;padding:5px}.feature-caption{opacity:0;left:12px;right:10px;bottom:20px}.feature-panel.is-active .feature-caption{opacity:1}.feature-panel.is-active{flex-grow:6;transform:translateY(-2px)}.feature-panel.is-active h2{font-size:27px}.feature-number{font-size:10px;left:5px;top:10px;padding:4px}.feature-caption .eyebrow{font-size:10px;letter-spacing:.5px;white-space:normal}.feature-open{font-size:13px;gap:9px;margin-top:13px}.feature-hint{font-size:12px;padding:14px 17px}.feature-photo{transition:transform .25s,object-position .25s}}
@media(prefers-reduced-motion:reduce){.feature-panel,.feature-photo{transition:none!important}.feature-panel.is-active{transform:none}}
.feature-hint{font-size:14px}

[data-site-theme="dark"] .feature-stage{background:#0d0d0f}
[data-site-theme="dark"] .feature-panel{--accent:#d8ad77;--text:#eeece7;background:#19191c;border-color:#343438}
[data-site-theme="dark"] .feature-panel.is-active{border-color:var(--accent);box-shadow:0 10px 35px #0009}
[data-site-theme="dark"] .feature-hint{border-top-color:#27272b}

@media(hover:hover) and (pointer:fine){
  .feature-stage:not(.is-touch) .feature-panel:hover{box-shadow:0 12px 36px #0006,0 0 0 1px var(--accent)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .feature-panel .feature-photo{transition:transform .4s,object-position .4s,scale .45s cubic-bezier(.2,.7,.2,1)}
  .feature-stage:not(.is-touch) .feature-panel:hover .feature-photo{scale:1.025}
}