/* Original Angular mobile components only; desktop snapshots are unchanged. */
@media (max-width:736px) {
  html,body {min-width:0!important;width:100%!important;box-sizing:border-box;overflow-x:visible!important}
  .wrapper.page.odin {min-width:0!important;width:100%!important;transform:none!important}
  my-app>.wrapper>header {display:none!important}
  header-sub {display:block!important;height:36px!important}
  header-sub .header-mobile {height:36px!important}
  header-sub .nav-product-mobile {position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;height:36px!important;box-sizing:border-box}
  header-sub .nav-list-container,header-sub .nav-list {width:100%!important;min-width:0!important;box-sizing:border-box}
  header-sub .nav-list {display:flex!important;justify-content:space-around;gap:6px;padding:0 8px!important;margin:0!important}
  header-sub .nav-list li {float:none!important;flex:0 1 auto;margin:0!important;min-width:0}
  header-sub .nav-list a {font-size:12px!important;white-space:nowrap}
  .wrapper.page.odin .main {margin-top:0!important;padding-top:0!important;min-width:0!important;width:100%!important}
}

@media(max-width:736px){my-app table{width:100%!important;max-width:100%!important;table-layout:fixed!important}my-app table th,my-app table td{width:auto!important;min-width:0!important;overflow-wrap:anywhere;word-break:normal;padding-left:3px!important;padding-right:3px!important}}

/* Pro 2 design posters are static, full-canvas images with no separate
   controls. Fit their complete composition to short desktop viewports while
   leaving the interactive footprints story and all mobile components alone. */
@media screen and (min-width: 1222px) {
  osborn-design-pc #design[_ngcontent-c7] > .design-1[_ngcontent-c7],
  osborn-design-pc #design[_ngcontent-c7] > .design-2[_ngcontent-c7] {
    width: 100%;
    height: auto;
    aspect-ratio: var(--archive-canvas-ratio);
    max-height: calc(100svh - 50px);
  }
  osborn-design-pc #design[_ngcontent-c7] > .design-1[_ngcontent-c7] { --archive-canvas-ratio: 16 / 9; background-color: #0a1a0f; }
  osborn-design-pc #design[_ngcontent-c7] > .design-2[_ngcontent-c7] { --archive-canvas-ratio: 1792 / 912; background-color: #210008; }
  osborn-design-pc #design[_ngcontent-c7] > :is(.design-1, .design-2)[_ngcontent-c7] > figure[_ngcontent-c7] {
    left: 50%;
    right: auto;
    width: min(100%, calc((100svh - 50px) * var(--archive-canvas-ratio)));
    height: 100%;
    transform: translateX(-50%);
    background-size: contain;
    background-position: center;
  }
}

/* Pro 2 OS intro is HTML copy with 100px of fixed vertical breathing room.
   On short desktop iframe viewports, size that outer spacing to the space
   below the native 40px product tabs; keep all copy and its typography intact. */
@media screen and (min-width: 1222px) {
  body:has(script[data-archive-product-slug="upro2"]) os-common-pc .page.osborn-os > section.describe[_ngcontent-c6] {
    padding-top: clamp(24px, calc((100svh - 636px) / 2), 100px) !important;
    padding-bottom: clamp(24px, calc((100svh - 636px) / 2), 100px) !important;
  }
}

/* U3 OS's first intro is fixed to 565px with 100px outer padding. Preserve
   the full logo and HTML copy, but fit that breathing room below its 84px
   product chrome on shorter desktop viewports. The long phone demos remain untouched. */
@media screen and (min-width: 737px) {
  body:has(script[data-archive-product-slug="u3"]) .osborn-os[_ngcontent-c6] .describe[_ngcontent-c6] {
    padding-top: clamp(24px, calc((100svh - 649px) / 2), 100px);
    padding-bottom: clamp(24px, calc((100svh - 649px) / 2), 100px);
  }
}

/* U3 elder mode is a static 833px phone-screen composition below independent
   HTML copy. Scale only that display canvas on desktop, and reduce its outer
   spacing with shorter viewports; preserve the phone frame and screen ratio. */
@media screen and (min-width: 737px) {
  body:has(script[data-archive-product-slug="u3"]) os-common-pc #elder[_ngcontent-c6] {
    --u3-elder-canvas-scale: min(1, calc((100svh - 180px) / 833px));
    padding-top: clamp(32px, calc(20svh - 116px), 100px);
    padding-bottom: clamp(32px, calc(20svh - 116px), 100px);
  }
  body:has(script[data-archive-product-slug="u3"]) os-common-pc #elder-child[_ngcontent-c6] {
    height: calc(833px * var(--u3-elder-canvas-scale));
    transform: scale(var(--u3-elder-canvas-scale));
    transform-origin: center top;
  }
}