/* Full native viewport inside a consistent phone; scoped to these five heroes. */
.segment-video-figure { width: 300px; max-width: 100%; margin-inline: auto; }
.segment-video-phone { display: block; position: relative; width: 100%; padding: 22px 8px 14px; border: 2px solid transparent; border-radius: 34px; background: linear-gradient(#12161c,#12161c) padding-box,linear-gradient(135deg,#bbc6ce,#35424c 28%,#7e8a95 60%,#202a32) border-box; box-shadow: 0 14px 36px #092c3820; }
.segment-video-phone::before { content: ''; position: absolute; width: 46px; height: 4px; top: 9px; left: calc(50% - 23px); border-radius: 6px; background: #4c5963; }
.segment-video-phone::after { content: ''; position: absolute; width: 76px; height: 3px; bottom: 6px; left: calc(50% - 38px); border-radius: 6px; background: #6f7a84; }
.segment-video-phone video, .segment-video-phone img { display: block; width: 100%; height: auto; aspect-ratio: 390/844; border-radius: 20px; background: #fff; object-fit: contain; }
.segment-video-phone video[hidden], .segment-video-phone img[hidden], .segment-video-control[hidden] { display: none; }
.segment-video-control { display: block; width: 100%; min-height: 44px; margin-top: 14px; padding: 10px 14px; border: 1px solid #cce0cf; border-radius: 12px; color: #20692e; background: #fff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.segment-video-control:hover { background: #f3f8f3; }
.segment-video-control:focus-visible { outline: 3px solid #ad6300; outline-offset: 4px; }
@media (max-width: 760px) { .segment-video-figure { width: 266px; } }

/* Keep the confectionery proof points after the video on narrow screens. */
.segment-video-hero { grid-template-areas: "copy video" "proof video"; row-gap: 0; }
.segment-video-hero .hero__content { grid-area: copy; }
.segment-video-hero .hero__visual { grid-area: video; }
.segment-video-hero > .hero__proof { grid-area: proof; }
@media (max-width: 1120px) {
 .segment-video-hero { grid-template-areas: "copy" "video" "proof"; grid-template-columns: minmax(0,1fr); row-gap: 28px; }
 .segment-video-hero > .hero__proof { margin: 0; }
}