/* Work section: skip link and screenshot gallery */
.skip{position:fixed;left:16px;top:-80px;z-index:50;padding:12px 18px;border-radius:999px;background:var(--mint);color:#022018;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

.shots{display:grid;gap:clamp(16px,2.4vw,28px);margin-top:clamp(32px,4vw,48px)}
.shot{margin:0;min-width:0}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.shot figcaption{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--muted);max-width:62ch}
.shot.phone{max-width:280px;margin-inline:auto}
@media (min-width:860px){
  .shots{grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:start}
  .shot.full{grid-column:1/-1}
  .shot.phone{max-width:none;margin-inline:0}
}
.shots-note{margin-top:18px;font-size:14.5px;color:var(--muted)}

.case .thumb{display:block;margin-top:22px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.case .thumb img{display:block;width:100%;height:auto}

/* H6: desktop + phone pairs share one frame height (sized from the desktop column's own aspect) */
@media (min-width:860px){
  .shots{container-type:inline-size;column-gap:28px}
  .shots .shot:not(.full) img{height:calc((100cqw - 328px) * .575);object-fit:cover;object-position:top center}
}

/* H6: hub thumbnails, one aspect ratio, in the card's right column above the bullets */
.case .thumb{display:block;margin-top:0;aspect-ratio:16/10;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.case .thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.case-side{display:grid;gap:22px;align-content:start;min-width:0}
@media (min-width:960px){ .case .case-side .hexlist{padding-top:0} }
/* v26: visible case dates under the status line */
.case-date{margin-top:8px;font-size:14px;color:var(--muted)}
/* v33: one-line products note under the comparison table */
.also{margin-top:clamp(20px,2.4vw,28px);max-width:72ch;font-size:16px;line-height:1.55;color:var(--muted)}
/* v33: Screens sit inside "What we built", right after the list and before the diagram */
.case-shots{margin-top:clamp(48px,6vw,80px)}
.case-shots .shots{margin-top:clamp(24px,3vw,36px)}
/* v33: two portrait shots (buy box + phone) side by side at their own height */
@media (min-width:860px){
  .shots.pair-tall{grid-template-columns:repeat(2,minmax(0,340px));justify-content:start}
  .shots.pair-tall .shot:not(.full) img{height:auto}
}
.shots.pair-tall .shot:not(.phone){max-width:420px}
/* v46: three phone screens in a row (one user journey), and a full-width shot under a pair */
.shots.phones{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));justify-items:center}
.shots.phones .shot.phone{max-width:300px;margin-inline:auto}
@media (min-width:860px){
  .shots.phones{grid-template-columns:repeat(3,minmax(0,300px));justify-content:start;justify-items:stretch}
  .shots.phones .shot:not(.full) img{height:auto}
}