/* Shared product screenshot frame (module pages) */
.h1shot{margin:0;border-radius:16px;overflow:hidden;background:#0d1a33;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px -12px rgba(0,0,0,.55),0 8px 20px -8px rgba(0,0,0,.4);position:relative;z-index:10}
.h1shot-bar{display:flex;gap:6px;align-items:center;height:28px;padding:0 12px;background:#14213d;border-bottom:1px solid rgba(255,255,255,.08)}
.h1shot-bar span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}
.h1shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.h1shot figcaption{padding:10px 14px;font-size:.85rem;line-height:1.4;color:rgba(255,255,255,.65);border-top:1px solid rgba(255,255,255,.08);text-align:left}
/* Lightbox */
.h1shot{cursor:zoom-in}
.h1shot img:focus-visible{outline:3px solid #00E6C3;outline-offset:-3px}
.h1shot-zoom{position:absolute;top:36px;right:8px;display:flex;align-items:center;gap:0;height:28px;min-width:28px;padding:0 7px;border-radius:8px;background:rgba(10,20,40,.78);color:#fff;font-size:16px;line-height:28px;pointer-events:none;transition:background .2s}
.h1shot-zoom b{font-weight:400}.h1shot-zoom em{font-style:normal;font-size:.78rem;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .25s,opacity .2s}
.h1shot:hover .h1shot-zoom,.h1shot:focus-within .h1shot-zoom{background:rgba(0,0,0,.85)}
.h1shot:hover .h1shot-zoom em,.h1shot:focus-within .h1shot-zoom em{max-width:140px;opacity:1;margin-left:6px}
.h1hm-shot .h1shot-zoom{top:40px}
.h1lb{position:fixed;inset:0;z-index:1000;background:rgba(5,10,22,.92);display:flex;align-items:center;justify-content:center;padding:48px 56px;overflow:auto}
.h1lb[hidden]{display:none}
.h1lb-f{margin:0;max-width:1440px;width:100%}
.h1lb-f img{display:block;width:100%;height:auto;max-height:calc(100vh - 140px);object-fit:contain;border-radius:12px}
.h1lb-f figcaption{color:rgba(255,255,255,.8);text-align:center;padding:12px 8px 0;font-size:.95rem}
.h1lb button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:999px;width:44px;height:44px;font-size:28px;line-height:44px;cursor:pointer}
.h1lb button:focus-visible{outline:3px solid #00E6C3}
.h1lb-x{top:12px;right:12px}.h1lb-p{left:8px;top:50%}.h1lb-n{right:8px;top:50%}
.h1lb button[hidden]{display:none}
html.h1lb-open{overflow:hidden}
@media (max-width:640px){.h1lb{padding:56px 8px}.h1lb-p,.h1lb-n{top:auto;bottom:12px}}
/* Layout: a screenshot sits beside the cards it explains (one column each, alternating as in the markup).
   Below 1024px everything stacks: the cards first, then their screenshot. */
figure.h1shot--wide{width:100%;max-width:100%}
.grid>figure.h1shot--wide,.grid>:has(>figure.h1shot--wide){align-self:center}
@media (max-width:1023px){.grid>figure.h1shot--wide,.grid>:has(>figure.h1shot--wide),.grid>:has(>*>figure.h1shot--wide){order:2}}
.grid:has(>*>figure.h1shot--card),.grid:has(>*>*>figure.h1shot--card),.grid:has(>*>*>*>figure.h1shot--card){grid-template-columns:repeat(2,minmax(0,1fr))!important}
figure.h1shot--card{width:100%;margin:0 0 16px}
@media (max-width:767px){.grid:has(>*>figure.h1shot--card),.grid:has(>*>*>figure.h1shot--card),.grid:has(>*>*>*>figure.h1shot--card){grid-template-columns:1fr!important}}
/* Small feature-card shots keep the card's original image size */
.h1shot--small{margin:0 auto 16px;max-width:100%}
.h1shot--small img{aspect-ratio:auto;object-fit:cover;object-position:top left}
.h1shot--small figcaption{font-size:.78rem;padding:8px 10px}