/* Product UI screenshots — theme-aware light/dark swap (2026-09-29) */
.preview--product-ui{padding:12px}
.preview-shot,
.product-ui-shot{
  line-height:0;border-radius:10px;overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface-raised,var(--surface));
}
.preview--product-ui .product-ui,
.product-ui-shot .product-ui,
.product-ui{
  display:block;width:100%;height:auto;
}
.preview--product-ui .product-ui--dark,
.product-ui-shot .product-ui--dark,
.product-ui--dark{display:none}
html[data-theme="dark"] .preview--product-ui .product-ui--light,
html[data-theme="dark"] .product-ui-shot .product-ui--light,
html[data-theme="dark"] .product-ui--light{display:none}
html[data-theme="dark"] .preview--product-ui .product-ui--dark,
html[data-theme="dark"] .product-ui-shot .product-ui--dark,
html[data-theme="dark"] .product-ui--dark{display:block}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .preview--product-ui .product-ui--light,
  html:not([data-theme="light"]) .product-ui-shot .product-ui--light,
  html:not([data-theme="light"]) .product-ui--light{display:none}
  html:not([data-theme="light"]) .preview--product-ui .product-ui--dark,
  html:not([data-theme="light"]) .product-ui-shot .product-ui--dark,
  html:not([data-theme="light"]) .product-ui--dark{display:block}
}
/* Product page feature cards with shot */
.card.split.product-ui-feature{align-items:center;gap:20px}
.product-ui-feature .feature-copy h2{margin:0 0 8px;font-size:clamp(1.15rem,2.4vw,1.45rem);letter-spacing:-.02em;line-height:1.25}
.product-ui-feature .feature-copy p{margin:0;color:var(--muted);font-size:.95rem}
.product-ui-feature .icon-wrap{margin-bottom:12px}
@media (width>=720px){
  .card.split.product-ui-feature{grid-template-columns:1fr 1.15fr}
  .card.split.product-ui-feature:nth-child(even){grid-template-columns:1.15fr 1fr}
  .card.split.product-ui-feature:nth-child(even) .feature-copy{order:2}
  .card.split.product-ui-feature:nth-child(even) .product-ui-shot{order:1}
}