/* Product photography stays separate from the optional illustrative demos. */
.product-showcase { min-width:0; width:100%; text-align:left; }
.product-shots { display:block; min-width:0; margin:0; text-align:left; }
.product-shots-grid { display:block; }
.product-shot { min-width:0; margin:0; }
.product-shot > a { position:relative; display:block; width:100%; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--paper); text-decoration:none; box-shadow:0 18px 50px -30px #132d6066; }
.product-shot img { display:block; width:100%; height:auto; }
.product-shot-zoom { display:block; position:absolute; right:12px; bottom:12px; padding:8px 12px; border:1px solid #dce1e8; border-radius:6px; background:#fff; color:#354057; font:500 12px/1.4 var(--sans,sans-serif); opacity:0; transform:translateY(4px); transition:opacity .15s,transform .15s; }
.product-shot a:hover .product-shot-zoom,.product-shot a:focus-visible .product-shot-zoom { opacity:1; transform:none; }
.product-shot a:focus-visible,.product-example > summary:focus-visible { outline:2px solid #2563eb; outline-offset:4px; }
.product-shot figcaption { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; margin:18px 2px 0; color:var(--muted); font:400 13px/1.6 var(--sans,sans-serif); }
.product-shot figcaption strong { color:var(--ink); font-weight:500; }
.product-shot figcaption small { margin-left:auto; color:var(--muted); font-size:11px; }
.product-example { min-width:0; margin-top:20px; border-top:1px solid var(--line); }
.product-example > summary { min-height:44px; padding:14px 0; color:var(--muted); font:500 13px/1.5 var(--sans,sans-serif); cursor:pointer; }
.product-example[open] > summary { margin-bottom:8px; }
.product-example > :not(summary) { margin:0; }
/* Keep the original alternating story layout: copy opposite the product. */
.showcase .hp-deferred-use-case { min-height:0; }
.showcase .product-shot figcaption { display:grid; gap:4px; font-size:12px; }
.showcase .product-shot figcaption strong { display:none; }
.showcase .product-shot figcaption small { margin-left:0; }
.product-shot[data-shape="portrait"] > a { width:min(250px,100%); margin-inline:auto; border:8px solid #1b2029; border-radius:34px; box-shadow:0 18px 40px -24px #132d6070; background:#fff; }
.product-shot[data-shape="portrait"] figcaption { max-width:420px; margin:20px auto 0; text-align:center; }
.product-shot[data-shape="portrait"] .product-shot-zoom { right:12px; bottom:12px; }
@media (hover:none) { .product-shot-zoom { opacity:1; transform:none; font-size:10px; padding:5px 8px; right:6px; bottom:6px; } }
@media (max-width:760px) {
 .product-shot > a { border-radius:7px; }
 .product-shot figcaption { display:grid; gap:3px; margin-top:12px; }
 .product-shot figcaption small { margin-left:0; }
}
.image-preview-open { overflow: hidden; }
.image-preview { position: fixed; inset: 0; width: min(1440px,calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); box-sizing: border-box; padding: 20px; margin: auto; border: 1px solid var(--line,#d1d5db); border-radius: 12px; background: var(--paper,#fff); color: var(--ink,#111827); }
.image-preview::backdrop { background: #000b; }
.image-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.image-preview-header p { margin: 0; font: 600 18px/1.4 var(--sans,sans-serif); }
.image-preview-header button { min-height: 44px; padding: 8px 16px; border: 1px solid var(--line,#d1d5db); border-radius: 7px; background: var(--surface,#fff); color: var(--ink,#111827); font: 500 14px var(--sans,sans-serif); cursor: pointer; }
.image-preview-header button:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.image-preview figure { margin: 0; }
.image-preview img { display: block; width: auto; max-width: 100%; max-height: calc(100dvh - 180px); height: auto; margin: auto; object-fit: contain; }
.image-preview figcaption { margin-top: 12px; color: var(--muted,#6b7280); font: 400 14px/1.5 var(--sans,sans-serif); }
@media (max-width:760px) { .image-preview { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); padding:12px; } }

@media (max-width:760px) {
 .product-shot-zoom { opacity:1; transform:none; font-size:10px; padding:5px 8px; right:6px; bottom:6px; }
 .image-preview figure { overflow:auto; max-height:calc(100dvh - 140px); }
 .image-preview img { width:1360px; max-width:none; max-height:none; }
}

@media (max-width:760px) { .image-preview img[src$="web-sessions.png"] { width:390px; } }