/* Only the screenshot framing differs from the shared Plan & Schedule layout. */
.invoice-stage-page .invoice-screen {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 0.45rem;
    background: #ffffff;
}

.invoice-stage-page .invoice-screen img {
    position: absolute;
    display: block;
    max-width: none;
    height: auto;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    transform: none;
    object-fit: initial;
}

.invoice-stage-page .plan-stage-product-grid figure > div {
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
}

.invoice-stage-page .plan-stage-product-grid .invoice-screen {
    width: min(100%, calc(100cqh * var(--invoice-screen-ratio)));
    flex: 0 0 auto;
}

/* Keep the original system pixels, excluding circles beyond the screenshot panels. */
.invoice-stage-page .plan-stage-product-grid img[src$="/invoicing-staging/invoice-schedule.png"],
body.page-id-603 section img[src*="/invoice-picture-screens-1-"] {
    clip-path: inset(14.6590% 12.8646% 15.0414% 13.4375% round .8%);
}
.invoice-stage-page .plan-stage-product-grid img[src$="/invoicing-staging/customer-invoice.png"],
body.page-id-603 section img[src*="/invoice-picture-screens-2-"] {
    clip-path: inset(20.1670% 5.6250% 22.8645% 8.8021% round .8%);
}
.invoice-stage-page .plan-stage-product-grid img[src$="/workflow-staging/invoicing.png"] {
    clip-path: inset(60.1077% 26.8229% 15.6100% 6.9271% round .8%);
}