/* The Payout Success stylesheet supplies the shared case-study layout and themes. */
body.parking-page .parking-hero {
    aspect-ratio:2.7;
}

.parking-page .parking-tablet {
    display:block;
    width:58%;
    height:auto;
    max-width:none;
    flex:none;
    aspect-ratio:1094/776;
    /* Remove the recording's black outer canvas without cropping the tablet screen. */
    clip-path:inset(4.4% 5.5% 4.2% 5.5% round 4% / 5.5%);
}

.parking-page .parking-hero > .parking-tablet {
    margin-bottom:-4%;
}

.parking-page .parking-stage {
    aspect-ratio:1460/682;
    place-items:end center;
}

.parking-page .parking-stage > img,
.parking-page .parking-stage > .parking-screen {
    width:80%;
    height:auto;
    object-fit:contain;
    object-position:center bottom;
}

.parking-page .parking-media {
    position:relative;
    min-width:0;
    overflow:hidden;
    background:#fff;
}

.parking-page .parking-screen {
    aspect-ratio:1460/682;
    border-radius:3.5% 3.5% 0 0 / 7.5% 7.5% 0 0;
}

.parking-page .parking-media > img,
.parking-page .parking-media > video {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
}

.parking-page .parking-media > video {
    position:absolute;
    inset:0;
    opacity:0;
}

.parking-page .parking-media.is-video-ready > video {
    opacity:1;
}

.parking-page .parking-media.is-video-ready > img {
    visibility:hidden;
}

.parking-page .parking-start-motion > video {
    object-fit:cover;
}

.parking-page .parking-evidence {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(1rem,2vw,1.5rem);
}

.parking-page .parking-evidence > .parking-media {
    aspect-ratio:916/700;
    /* Match the rounded source exports so encoded black corners remain clipped. */
    border-radius:10% / 13.086%;
}

.parking-page .parking-notes p {
    padding:1.25rem 1.4rem;
    margin:0 0 .35rem;
    background:var(--ps-callout);
}

.parking-page .parking-notes p:first-child {
    border-radius:16px 16px 4px 4px;
}

.parking-page .parking-notes p:last-child {
    border-radius:4px 4px 16px 16px;
}

.parking-page .parking-concept {
    aspect-ratio:2.4;
    place-items:end center;
    padding:0;
}

.parking-page .parking-concept > .parking-tablet {
    width:60%;
    height:auto;
    margin-bottom:-3%;
    background:#000;
}

.parking-page .parking-concept-summary {
    margin-top:clamp(2rem,4vw,3.5rem);
}

.parking-page .parking-prototype-arrow {
    display:grid;
    place-items:center;
    color:var(--ps-purple);
    margin-block:clamp(2rem,5vw,4rem);
}

.parking-page .parking-concept-summary .ps-lead {
    margin:0 0 1rem;
}

.parking-page.parking-ready .reveal-on-scroll {
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s ease,transform .7s ease;
}

.parking-page.parking-ready .reveal-on-scroll.is-visible {
    opacity:1;
    transform:none;
}

@media(max-width:700px) {
    body.parking-page .parking-hero {
        display:flex;
        align-items:flex-end;
        height:auto;
        aspect-ratio:1.65;
    }

    .parking-page .parking-hero > .parking-tablet {
        width:90%;
        margin-bottom:-3.2%;
    }

    .parking-page .parking-stage > img,
    .parking-page .parking-stage > .parking-screen {
        width:92%;
    }

    .parking-page .parking-stage {
        aspect-ratio:1.8;
    }

    .parking-page .parking-stage:has(> .ps-stage-caption) {
        display:flex;
        flex-direction:column;
        align-items:center;
        aspect-ratio:auto;
        gap:1rem;
        padding:.75rem .75rem 0;
    }

    .parking-page .parking-stage:has(> .ps-stage-caption) > img {
        width:100%;
        height:auto;
        flex:none;
    }

    .parking-page .parking-evidence {
        grid-template-columns:minmax(0,1fr);
    }

    .parking-page .parking-concept {
        aspect-ratio:1.5;
    }

    .parking-page .parking-concept > .parking-tablet {
        width:90%;
    }

    .parking-page .parking-notes p {
        padding:1rem 1.15rem;
    }
}

@media(prefers-reduced-motion:reduce) {
    .parking-page.parking-ready .reveal-on-scroll {
        opacity:1;
        transform:none;
        transition:none;
    }
}