.product-demos{margin:48px 0;padding:32px 0;border-top:1px solid var(--border)}
.product-demos h3{font-size:28px;font-weight:800;letter-spacing:-.6px;margin-bottom:10px}
.product-demos>p{max-width:68ch;color:var(--text-2);font-size:14px;line-height:1.7;margin-bottom:24px}
.product-demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:24px}
.product-demo-card{min-width:0}
.product-demo-card h4{font-size:17px;font-weight:700;margin:16px 0 8px;line-height:1.4}
.product-demo-card>p{color:var(--text-2);font-size:13px;line-height:1.7}
.product-demo-card__option{display:inline-block;padding:4px 8px;border-radius:4px;background:#efefeb;color:#505049;font-size:11px;font-weight:700;line-height:1.5;margin-bottom:7px}
.product-demo-card[data-play-match="selected"] .product-demo-card__option{background:#fff1ba;color:#5c4500}
.product-demo-card__option-link{display:inline-flex;align-items:center;min-height:44px;color:var(--text);font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
/* Match Play Ideas card controls while keeping the product player's quality and status controls. */
.product-demos .play-player--compact{--play-unit:clamp(1px,.09765625vw,1.25px)}
.product-demos .play-player--compact .play-player__overlay{display:grid;place-items:center;width:calc(40 * var(--play-unit));height:calc(40 * var(--play-unit));min-height:0;padding:0;border:calc(2 * var(--play-unit)) solid #fff;border-radius:50%;background:rgb(25 25 25 / .38);color:#fff;box-shadow:none}
.product-demos .play-player--compact .play-player__icon{display:grid;place-items:center;width:100%;height:100%}
.product-demos .play-player--compact .play-player__icon svg{display:block;width:calc(32 * var(--play-unit));height:calc(32 * var(--play-unit));fill:currentColor}
.product-demos .play-player--compact .play-player__label{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.product-demos .play-player--compact[data-state='playing'] .play-player__overlay{opacity:0}
.product-demos .play-player--compact[data-state='playing']:hover .play-player__overlay,.product-demos .play-player--compact[data-state='playing']:focus-within .play-player__overlay{opacity:1}
@media(hover:hover){.product-demos .play-player--compact .play-player__overlay:hover{background:rgb(0 0 0 / .6)}}
.product-demos>a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:underline;text-underline-offset:5px}
@media(max-width:768px){.product-demo-grid{grid-template-columns:1fr;gap:28px}.product-demos h3{font-size:24px}}