/* Local iPhone 17 Pro Max silver experiment. Shared image/annotation coordinates remain unchanged. */
#lightbox .modal-img > .bench-iphone-mockup {overflow:visible;}
@media(min-width:761px){
 #lightbox .modal-img {box-sizing:border-box;padding:28px 24px;}
 #lightbox img.modal-content {max-width:92%;}
}
@media(max-width:760px){
 #lightbox img.modal-content {max-width:92% !important;max-height:calc(100dvh - 150px - var(--bench-mobile-tools-height,62px) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) !important;}
}

/* A display-only counter must never intercept screenshot zoom clicks. */
#lightbox .modal-img-counter, #lightbox .modal-img-counter * {pointer-events:none !important;}
@media(min-width:761px){
 #lightbox .modal-img-counter {width:max-content !important;bottom:auto !important;transform:translateX(-50%);margin:0 !important;}
}

/* Video posters share the screenshot contour; play icons and playback are untouched. */
.video-block_img > img, .benchmark-gamification-card__preview > img {
 border-radius:0 !important;outline:none !important;border:none !important;background:transparent !important;
}
.benchmark-gamification-card__preview {
 border-radius:0 !important;outline:none !important;border:none !important;background:transparent !important;overflow:hidden !important;
}

/* Keep the shared preview fade without a second card-level animation. */
#content.benchmark-content--gamification .benchmark-gamification-results,
#content.benchmark-content--gamification .benchmark-gamification-grid,
#content.benchmark-content--gamification .benchmark-gamification-card {
 transform:none !important;backface-visibility:visible !important;will-change:auto !important;
}
#content.benchmark-content--gamification .benchmark-gamification-card {animation:none !important;}

/* Match catalog filter geometry: icons fit inside the shared 20px line. */
.benchmark-smart-tab.benchmark-smart-tab--app {
    padding: 14px 20px 13px;
    gap: 9px;
}
.benchmark-smart-tab--app .benchmark-smart-tab__icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
}

/* Inline icon preserves the video badge's existing line height and padding. */
#modal-video-title .benchmark-video-title-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    object-fit: cover;
    border-radius: 50%;
    vertical-align: -0.12em;
    margin-right: 0.4em;
}

/* Fullscreen flows share the grid contour; inset the scrolling viewport itself. */
.benchmark-flow-fullscreen__stage .benchmark-flow-fullscreen__track {
    width: calc(100% - 64px);
    margin-inline: 32px;
    padding-inline: 0;
}
.benchmark-flow-fullscreen__stage .benchmark-flow-fullscreen__screen {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
@media (max-width: 630px) {
    .benchmark-flow-fullscreen__stage .benchmark-flow-fullscreen__track {
        width: calc(100% - 36px);
        margin-inline: 18px;
    }
}
.benchmark-flow-fullscreen__screen img {
    border-radius: 0 !important;
    border: 0 !important;
    outline: none !important;
}
/* Transparent corners must stay transparent behind the shared image clip. */
.benchmark-flow-fullscreen__stage .benchmark-flow-fullscreen__screen {
    background: transparent !important;
}
.collection-shots-grid .collection-shot-thumb.item-thumbnail,
.collection-shots-grid .collection-shot-thumb.item-thumbnail img {
    background: transparent !important;
}
@media (hover: hover) and (pointer: fine) {
    .collection-shots-grid.collection-smart-grid .collection-shot-card.resource-item-card:hover .collection-shot-thumb.item-thumbnail {
        box-shadow: none !important;
        filter: brightness(.96) drop-shadow(0 18px 19px rgba(15,23,42,.12));
    }
}
/* Fade overflowing flow screens at the viewport edges, above slides but below arrows. */
.benchmark-flow-screens-swiper::before,
.benchmark-flow-screens-swiper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 3;
    pointer-events: none;
}
.benchmark-flow-screens-swiper::before {
    left: 0;
    background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}
.benchmark-flow-screens-swiper::after {
    right: 0;
    background: linear-gradient(to left, #fff, rgba(255,255,255,0));
}
.benchmark-flow-screens-swiper .benchmark-flow-swiper-button { z-index: 4; }
.benchmark-flow-screens-swiper.is-flow-static::before,
.benchmark-flow-screens-swiper.is-flow-static::after { display: none; }
html[data-bench-theme="dark"] .benchmark-flow-screens-swiper::before,
body.dark-theme .benchmark-flow-screens-swiper::before { background: linear-gradient(to right, #090909, transparent); }
html[data-bench-theme="dark"] .benchmark-flow-screens-swiper::after,
body.dark-theme .benchmark-flow-screens-swiper::after { background: linear-gradient(to left, #090909, transparent); }
@media (max-width: 630px) {
    .benchmark-flow-screens-swiper::before, .benchmark-flow-screens-swiper::after { width: 24px; }
}
/* Fixed edge fades sit outside the scrolling track; leave its scrollbar exposed. */
.benchmark-flow-fullscreen__stage::before,
.benchmark-flow-fullscreen__stage::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 30px;
    width: 40px;
    z-index: 3;
    pointer-events: none;
}
.benchmark-flow-fullscreen__stage::before {
    left: 32px;
    background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}
.benchmark-flow-fullscreen__stage::after {
    right: 32px;
    background: linear-gradient(to left, #fff, rgba(255,255,255,0));
}
@media (max-width: 630px) {
    .benchmark-flow-fullscreen__stage::before { left: 18px; width: 24px; }
    .benchmark-flow-fullscreen__stage::after { right: 18px; width: 24px; }
}
/* Cover the clipped boundary by two CSS pixels to avoid Chromium subpixel seams. */
.benchmark-flow-screens-swiper { isolation: isolate; }
.benchmark-flow-screens-swiper::before,
.benchmark-flow-screens-swiper::after {
    top: -2px;
    bottom: -2px;
    height: auto;
    width: 42px;
    z-index: 10;
    transform: translateZ(0);
}
.benchmark-flow-screens-swiper::before {
    left: -2px;
    background: linear-gradient(to right, #fff 0 2px, rgba(255,255,255,0) 100%);
}
.benchmark-flow-screens-swiper::after {
    right: -2px;
    background: linear-gradient(to left, #fff 0 2px, rgba(255,255,255,0) 100%);
}
.benchmark-flow-screens-swiper .benchmark-flow-swiper-button { z-index: 11 !important; }
@media (max-width: 630px) {
    .benchmark-flow-screens-swiper::before, .benchmark-flow-screens-swiper::after { width: 26px; }
}