/* Shared stage for both prototypes: 540x1170 logical px (a 430x932 phone's aspect), scaled to fit. */
.sh-section { background: #0F3D3E; color: #F5EFE6; position: relative; }
.sh-pin { height: 280svh; position: relative; }
.sh-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
/* absolutely centred, then scaled to fit (a 540 px grid item in a 430 px cell would start at the left edge) */
.sh-fit { position: absolute; left: 50%; top: 50%; width: 540px; height: 1170px; transform-origin: 50% 50%; transform: translate(-50%, -50%); }
.sh-stage { position: relative; width: 540px; height: 1170px; overflow: hidden; background: #0F3D3E; color: #F5EFE6; }
.sh-line { position: absolute; left: 36px; width: 480px; white-space: pre; font-family: "Fraunces", Georgia, serif; font-weight: 900;
           font-size: 62px; line-height: 70px; letter-spacing: -1px; }
#sh-1 { top: 150px; } #sh-2 { top: 220px; } #sh-3 { top: 290px; }
.sh-accent { color: #E8623D; font-style: italic; font-weight: 600; }
.sh-slot { position: absolute; width: 190px; }
.sh-card { margin: 0; width: 190px; border-radius: 14px; overflow: hidden; background: #1B1512; box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
.sh-card img { display: block; width: 190px; height: 190px; object-fit: cover; }
.sh-card figcaption { padding: 10px 12px 12px; font: 400 11px/1.3 "Inter", system-ui, sans-serif; color: #D9D2C7; }
.sh-card figcaption b { display: block; font: italic 600 17px/1.2 "Fraunces", Georgia, serif; color: #F5EFE6; margin-bottom: 3px; }
.sh-note { position: absolute; left: 36px; right: 36px; top: 1060px; margin: 0; font: 400 15px/1.4 "Inter", system-ui, sans-serif; color: rgba(245,239,230,0.75); }
/* Reduced motion: no pin; the note moves up out from under the sticky call bar (the motion version gets there by the
   film's final 0.975 scale). */
@media (prefers-reduced-motion: reduce) { .sh-pin { height: auto; } .sh-sticky { position: relative; height: 100svh; } .sh-note { top: 1010px; } }