#web-feature{display:grid;grid-template-columns:.83fr 1.17fr;align-items:center;gap:4vw;max-width:1800px;min-height:780px;margin:auto;padding:70px 5.8vw;overflow:hidden}
#web-feature .feature-copy{position:relative;z-index:2}
#web-feature .showcase{min-width:0;position:relative;padding-top:10px}
#web-feature .stage-heading{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.17em;padding:0 10px;color:#74786a}
#web-feature .stage-heading b{font-weight:500;color:#262d22}
#web-feature .stage{height:510px;position:relative;perspective:1400px;isolation:isolate;touch-action:pan-y}
#web-feature .orbit-floor{position:absolute;width:88%;height:190px;border:1px solid #a9ae9240;border-radius:50%;left:6%;top:310px;transform:rotateX(68deg);background:radial-gradient(ellipse,#bac09d30,transparent 66%)}
#web-feature .orbit-floor:after{content:'';position:absolute;inset:24px -30px;border:1px solid #b5b7aa30;border-radius:50%}
#web-feature .orbit-card{position:absolute;width:80%;left:10%;top:85px;border-radius:11px;overflow:hidden;background:#f9f9f4;border:1px solid #fff;box-shadow:0 30px 45px -24px #242f2850,0 3px 10px #242f2812;transform-origin:50% 50%;will-change:transform;backface-visibility:hidden}
#web-feature .chrome{height:29px;background:#f8f9f6;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:8px;color:#7b8175;border-bottom:1px solid #e4e7de}
#web-feature .lights{color:#bfc8ad;font-size:8px;letter-spacing:3px}
#web-feature .orbit-card img{width:100%;height:auto;aspect-ratio:1.57;object-fit:cover;object-position:top;display:block}
#web-feature .card-label{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;background:#f9faf5}
#web-feature .card-label strong{font-weight:500;font-size:16px;letter-spacing:-.04em}
#web-feature .card-label>span{font-size:9px;color:#757c6e}
#web-feature .showcase-foot{position:relative;z-index:5;display:flex;align-items:center;gap:20px;padding:0 10px;margin-top:-7px}
#web-feature .selection{flex:1}
#web-feature .selection small{display:block;font-size:9px;letter-spacing:.12em;color:#747c68}
#web-feature .selection a{display:inline-block;font-size:21px;letter-spacing:-.04em;border-bottom:1px solid #a0a58f;line-height:1.7}
#web-feature .controls{display:flex;gap:6px}
#web-feature .controls button{border:1px solid #bfc5b2;background:transparent;width:40px;height:40px;border-radius:50%;font-size:17px}
#web-feature .controls button:hover{background:#e2e6d7}
#web-feature .controls button[aria-pressed=true]{background:#e2e6d7}
#web-feature .progress{display:flex;gap:7px;margin-top:23px;padding:0 10px}
#web-feature .dot{height:3px;flex:1;background:#d7dbcc;border:none;padding:0;position:relative;min-height:14px;background:linear-gradient(#d7dbcc,#d7dbcc) center/100% 2px no-repeat}
#web-feature .dot[aria-current=true]{background:linear-gradient(#7e8d58,#7e8d58) center/100% 3px no-repeat}
#web-feature .showcase:before{content:'';position:absolute;inset:0 -40px 40px;background:radial-gradient(ellipse at 50% 50%,#dce2c66b,transparent 65%);pointer-events:none}
@media(min-width:1600px){#web-feature .stage{height:630px}
#web-feature .orbit-card{top:90px}
#web-feature .orbit-floor{top:370px}
}
@media(max-width:1000px){#web-feature{grid-template-columns:1fr;gap:35px;padding:70px 6vw 45px}
#web-feature .feature-copy{max-width:650px}
#web-feature .showcase{width:100%;max-width:780px;margin:auto}
#web-feature .stage{height:530px}
#web-feature .orbit-card{top:80px}
#web-feature .stage-heading{padding:0}
#web-feature .showcase-foot{margin-top:-5px}
}
@media(max-width:540px){#web-feature{padding:65px 24px 40px;gap:38px;min-height:0}
#web-feature .stage{height:310px;margin:0 -12px}
#web-feature .orbit-card{width:84%;left:8%;top:58px;border-radius:7px}
#web-feature .chrome{height:22px;font-size:6px;padding:0 8px}
#web-feature .card-label{padding:9px 10px}
#web-feature .card-label strong{font-size:12px}
#web-feature .card-label>span{font-size:6px}
#web-feature .stage-heading{font-size:7px;letter-spacing:.1em}
#web-feature .orbit-floor{top:190px;height:140px}
#web-feature .showcase-foot{padding:0;gap:10px}
#web-feature .selection a{font-size:19px}
#web-feature .controls{gap:5px}
#web-feature .controls button{width:35px;height:35px}
#web-feature .progress{padding:0;margin-top:15px}
}
@media(max-width:540px){#web-feature .stage{height:350px}
}
@media(min-width:1001px){#web-feature .showcase{container-type:inline-size}
#web-feature .stage{height:max(570px,calc(51cqw + 205px))}
}