/* Screenshot compositions for this website. Brand values remain in the design package. */
.shot-showcase { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,5vw,4.5rem); align-items:center; }
.shot-copy { min-width:0; }
.shot-copy h1 { margin-bottom:26px; }
.shot-copy>p { max-width:590px; }
.shot-choices { display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 20px; }
.shot-choices button { border:1px solid var(--border-mid); border-radius:7px; background:transparent; color:var(--neel); min-height:46px; padding:9px 15px; font:500 16px/1.5 var(--f-body); cursor:pointer; }
.shot-choices button:hover { border-color:var(--neel); }
.shot-choices button[aria-pressed="true"] { color:var(--paper); background:var(--neel); border-color:var(--neel); }
.shot-summary { border-left:2px solid var(--terra); padding-left:20px; min-height:142px; margin:0 0 26px; }
.labs-site .shot-summary h3 { font-size:25px; margin:0 0 10px; line-height:1.2; }
.labs-site .shot-summary p { font-size:17px; line-height:1.65; margin:0; }
.shot-stage { position:relative; min-width:0; min-height:670px; display:flex; align-items:center; justify-content:center; }
.shot-stage::before { content:""; position:absolute; width:100%; max-width:510px; aspect-ratio:1; border:1px solid color-mix(in srgb,var(--terra) 20%,transparent); border-radius:50%; background-image:var(--surface-jaali-soft); background-size:110px; opacity:.5; pointer-events:none; }
.shot-stage figure { position:relative; margin:0; max-width:100%; z-index:1; }
.shot-frame { display:block; padding:0; overflow:hidden; border:5px solid var(--neel-deep); border-radius:27px; width:292px; max-width:100%; background:var(--paper); box-shadow:0 18px 40px color-mix(in srgb,var(--neel) 13%,transparent); cursor:zoom-in!important; }
.shot-frame img { width:100%; height:auto; display:block; }
.shot-stage figcaption { font-size:15px; line-height:1.5; text-align:center; color:var(--ink-mute); margin:16px auto 0; max-width:400px; }
.shot-stage[data-crop="voice"] .shot-frame { width:420px; border:1px solid var(--border-mid); border-radius:18px; }
.shot-stage[data-crop="voice"] .shot-frame img { width:100%; height:160px; object-fit:cover; object-position:bottom; }
.shot-note { font-size:16px; color:var(--ink-mute); margin-top:18px!important; }
.ops-showcase { border-top:1px solid var(--border-mid); }
.ops-heading { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,5vw,4.375rem); margin-bottom:24px; align-items:start; }
.ops-heading h2 { margin-bottom:18px; }
.ops-heading>p { margin:0; }
.ops-showcase .shot-choices { margin-top:0; }
.ops-showcase .shot-summary { min-height:0; max-width:840px; margin-bottom:30px; }
.ops-showcase .shot-stage { min-height:0; display:block; }
.ops-showcase .shot-stage::before { display:none; }
.ops-showcase .shot-stage figure { width:100%; }
.ops-showcase .shot-frame { width:100%; border:1px solid var(--border-strong); border-radius:12px; }
.ops-showcase .shot-frame img { width:100%; height:auto; aspect-ratio:1.44; object-fit:contain; }
.ops-showcase .shot-stage figcaption { max-width:none; font-size:16px; }
.ops-note { margin-top:26px!important; max-width:800px; color:var(--ink-soft); }
.shot-viewer { border:1px solid var(--border-mid); border-radius:14px; padding:18px; background:var(--paper); color:var(--neel-deep); max-width:95vw; max-height:95vh; }
.shot-viewer[open] { display:grid; gap:14px; }
html:has(.labs-site .shot-viewer[open]) { overflow:hidden; }
.shot-viewer::backdrop { background:color-mix(in srgb,var(--neel-deep) 78%,transparent); }
.shot-viewer img { width:auto; height:auto; max-width:90vw; max-height:76vh; margin:auto; object-fit:contain; }
.shot-viewer-top { display:flex; align-items:center; justify-content:space-between; gap:25px; }
.shot-viewer-top p { margin:0; font-size:17px; }
.shot-viewer button { padding:8px 16px; min-height:44px; border:1px solid var(--border-mid); border-radius:6px; background:var(--deep); color:var(--neel); }
@media(max-width:1000px) { .shot-showcase { gap:36px; } .shot-choices button { padding-inline:12px; } .ops-heading { gap:35px; } }
@media(max-width:800px) { .shot-showcase { grid-template-columns:minmax(0,1fr); gap:22px; } .shot-copy { max-width:640px; } .shot-stage { min-height:640px; } .shot-summary { min-height:0; } .ops-heading { grid-template-columns:minmax(0,1fr); gap:6px; } }
@media(max-width:500px) { .shot-choices { gap:7px; margin-top:24px; } .shot-choices button { padding:9px 12px; font-size:16px; } .shot-stage { min-height:605px; } .shot-frame { width:267px; } .shot-stage figcaption { font-size:15px; } .shot-stage[data-crop="voice"] { min-height:290px; } .shot-stage[data-crop="voice"] .shot-frame { width:100%; } .shot-stage[data-crop="voice"] .shot-frame img { height:130px; } .shot-stage[data-crop="voice"]::before { max-width:280px; } .ops-showcase .shot-frame { border-radius:7px; } .shot-viewer { padding:12px; } .shot-viewer-top p { font-size:15px; } }

/* Fit the full screenshot and the close control within short viewports. */
.shot-viewer { width:fit-content; max-width:calc(100vw - 2rem); max-height:calc(100dvh - 2rem); overflow:auto; }
.shot-viewer[open] { grid-template-rows:auto minmax(0,1fr); }
.shot-viewer-top { min-width:0; align-items:flex-start; }
.shot-viewer-top p { min-width:0; overflow-wrap:anywhere; }
.shot-viewer-top button { flex-shrink:0; }
.shot-viewer img { max-width:100%; max-height:calc(100dvh - 9rem); min-height:0; }
.shot-choices button { max-width:100%; }
@media(max-width:50rem) {
  .shot-stage { min-height:0; padding-block:.75rem; }
  .shot-stage figure { width:min(100%,18.25rem,calc(80svh * .462)); }
  .shot-frame { width:100%; }
  .shot-stage[data-crop="voice"] { min-height:0; }
  .shot-stage[data-crop="voice"] figure { width:min(100%,28rem); }
  .ops-showcase .shot-stage figure { width:100%; }
}
@media(max-width:24rem) { .shot-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .shot-choices button { padding:.5rem; } }
@media(max-height:32rem) and (orientation:landscape) { .shot-viewer { max-height:calc(100dvh - 1rem); padding:.625rem; } .shot-viewer img { max-height:calc(100dvh - 6rem); } .shot-viewer-top p { font-size:.875rem; } }