/* Real application windows replace the three explanatory illustrations. */
.feature-layout{grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);gap:clamp(32px,4vw,75px)}
.feature-layout.reverse{grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr)}
.feature-screenshot-anchor{display:block;height:0;scroll-margin-top:110px}
.feature-screenshot{margin:0;min-width:0}
.feature-screenshot .screenshot-preview{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#11111b;box-shadow:0 18px 46px #00000012}
.feature-screenshot img{display:block;width:100%;height:auto;aspect-ratio:1443/903;object-fit:contain}
.feature-screenshot figcaption{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding-top:15px;font:11px/1.7 var(--sans)}
.feature-screenshot figcaption>span{min-width:0}
.feature-screenshot strong{display:block;font-weight:500;color:var(--ink)}
.feature-screenshot small{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.feature-screenshot figcaption>a{flex-shrink:0;color:var(--accent);font-size:10px;text-decoration:underline;text-underline-offset:3px}
.feature-screenshot a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
@media(max-width:960px){.feature-layout,.feature-layout.reverse{grid-template-columns:1fr}.feature-layout.reverse .feature-copy,.feature-layout.reverse .feature-art{order:initial}.feature-art{width:100%}}
@media(max-width:560px){.feature-screenshot .screenshot-preview{border-radius:8px}.feature-screenshot figcaption{gap:12px;font-size:11px;padding-top:12px}.feature-screenshot small,.feature-screenshot figcaption>a{font-size:9px}}