.feature-showcase { margin-top: 40px; }
.feature-showcase-stage { display: grid; }
.feature-showcase-stage .showcase-card { grid-area: 1 / 1; display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; transition: opacity .6s ease, transform .6s ease; }
.feature-showcase-stage .showcase-card img { grid-column: 2; grid-row: 1; border-left: 1px solid #d8e8dc; }
.feature-showcase-stage .showcase-copy { grid-column: 1; grid-row: 1; }
.feature-showcase.is-ready .showcase-card { opacity: 0; transform: translateX(20px); pointer-events: none; visibility: hidden; transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s; }
.feature-showcase.is-ready .showcase-card.is-active { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.feature-showcase:not(.is-ready) .feature-showcase-stage { display: grid; gap: 18px; }
.feature-showcase:not(.is-ready) .showcase-card { grid-area: auto; }
.feature-showcase:not(.is-ready) .feature-controls { display: none; }
.feature-controls { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap; }
.feature-controls button { min-height:44px; padding:0 16px; border:1px solid #b8d4c1; border-radius:24px; background:white; color:#164d36; font:inherit;font-size:13px;font-weight:700; cursor:pointer; }
.feature-controls button:hover, .feature-controls button:focus-visible { background:#dff4e5; }
.feature-controls button[aria-current="true"] { background:#1d7450; color:white; border-color:#1d7450; }
.feature-status { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media (max-width:720px) { .feature-showcase-stage .showcase-card { display:flex; flex-direction:column; align-items:stretch; } .feature-showcase-stage .showcase-card img { border-left:0; border-top:1px solid #d8e8dc; } }
@media (prefers-reduced-motion:reduce) { .feature-showcase.is-ready .showcase-card { transition:none; } }