/* Full recordings, true 9:16 phone screens, and a wide browser for desktop demos. */
.video-preview { --screen-height: min(640px, calc(100svh - 180px)); margin: 0; min-width: 0; }
.library-device-stage { display: flex; justify-content: center; padding: 0 8px; }
.phone-player {
  position: relative;
  width: min(100%, calc(var(--screen-height) * 9 / 16 + 14px));
  margin-inline: auto;
  padding: 6px;
  border: 1px solid #465570;
  border-radius: 30px;
  background: #101a2c;
  box-shadow: 0 18px 36px -16px #16315b40, inset 0 0 0 2px #ffffff10;
  color-scheme: dark;
}
.phone-player::before, .phone-player::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: #465570; }
.phone-player::before { left: -3px; top: 90px; height: 40px; box-shadow: 0 48px 0 #465570; }
.phone-player::after { right: -3px; top: 116px; height: 56px; }
.phone-screen { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 23px; background: #070e1b; }
/* Full iPhone screen recordings (720x1556) keep their own frame. */
.tall-recording .phone-player { width: min(100%, calc(var(--screen-height) * 720 / 1556 + 14px)); }
.tall-recording .phone-screen { aspect-ratio: 720 / 1556; }
.phone-player .phone-screen video { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; background: #070e1b; }
.preview-play {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 12px;
  border: 1px solid #ffffff60; border-radius: 50%;
  background: #101a2ce0; color: #fff; cursor: pointer;
}
.preview-play[hidden] { display: none; }
.preview-play:hover { background: #2556dc; }
.preview-play:focus-visible { outline: 3px solid #749dff; outline-offset: 3px; }
.preview-play .site-icon { width: 18px; height: 18px; stroke-width: 1.8; }
.preview-error { position: absolute; inset: auto 12px 70px; padding: 12px; border-radius: 8px; background: #101a2ce6; color: #fff; font-size: 12px; text-align: center; }

/* Equal-sized desktop rows alternate media and copy across both format pages. */
.library-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.library-card, .placement-story {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: 'media copy';
  align-items: center;
  gap: 64px;
  min-height: 680px;
  padding: 52px 0;
  border-bottom: 1px solid var(--dark-border);
}
.library-card:nth-of-type(even), .placement-story:nth-of-type(even) { grid-template-areas: 'copy media'; }
.library-card:last-child, .placement-story:last-child { border-bottom: 0; }
.placement-story + .placement-story { margin-top: 0; }
.library-card-heading, .placement-copy { grid-area: copy; width: 100%; max-width: 440px; justify-self: center; }
.library-device-stage, .placement-preview { grid-area: media; }
.library-card .video-preview, .placement-story .video-preview { --screen-height: min(560px, calc(100svh - 180px)); }
.library-meta { justify-content: flex-start; gap: 18px; color: #50617b; margin: 0 0 20px; }
.library-filters button[aria-pressed='true'] { color: #2556dc; }
.library-card h2 { color: #152747; font-size: clamp(32px, 3.8vw, 52px); line-height: 1.1; letter-spacing: -.045em; }

.format-description { margin-top: 22px; color: #50617b; font-size: 16px; line-height: 1.8; }
.format-benefits { list-style: none; display: grid; gap: 12px; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--dark-border); }
.format-benefits li { position: relative; padding-left: 22px; color: #253b5d; font-size: 14px; line-height: 1.65; }
.format-benefits li::before { content: ''; position: absolute; left: 1px; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: #2556dc; }


.placement-story { scroll-margin-top: 110px; }
.browser-player { position: relative; width: 100%; overflow: hidden; border: 1px solid #c7d4e9; border-radius: 12px; background: #fff; box-shadow: 0 18px 36px -20px #16315b30; }
.browser-top { display: flex; gap: 6px; align-items: center; height: 34px; padding-inline: 14px; border-bottom: 1px solid #e1e9f5; background: #f3f7ff; }
.browser-top span { width: 7px; height: 7px; border-radius: 50%; background: #91a9d0; }
.browser-screen { position: relative; aspect-ratio: 16 / 9; }
.browser-screen video { display: block; width: 100%; height: 100%; object-fit: contain; }
.desktop-placement .browser-player { max-width: 520px; margin-inline: auto; }

.demo-dialog { width: min(480px, calc(100% - 32px)); }
.demo-dialog .video-preview { --screen-height: min(620px, calc(100svh - 170px)); }
@media (max-width: 1000px) and (min-width: 801px) {
  .library-card, .placement-story { gap: 40px; }
}
@media (max-width: 800px) {
  .library-card, .placement-story,
  .library-card:nth-of-type(even), .placement-story:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'copy' 'media';
    min-height: 0;
    gap: 28px;
    padding: 40px 0;
  }
  .library-card-heading, .placement-copy { max-width: 520px; }
}
@media (max-width: 640px) {
  .library-card h2 { font-size: 34px; }
  .library-meta { margin-bottom: 12px; }
  .format-description { margin-top: 18px; font-size: 15px; }
  .format-benefits { margin-top: 22px; padding-top: 18px; gap: 10px; }
  .placement-preview { padding-inline: 3px; }
  .demo-dialog { padding: 18px; }
}