/* Service previews intentionally use a landscape canvas on phones, including
   when orientation lock is on. Fit the whole screen instead of panning it. */
@media (max-width: 600px), (max-height: 600px) {
  .marketing-site:has(dialog:modal) { overflow: hidden; }
  .marketing-site :is(.mk-image-dialog, .tp-motion-dialog, .ap-live-dialog):modal {
    --viewer-width: 100dvw;
    --viewer-height: 100dvh;
    --viewer-inset: max(8px, env(safe-area-inset-top), env(safe-area-inset-right), env(safe-area-inset-bottom), env(safe-area-inset-left));
    position: fixed;
    inset: 50% auto auto 50%;
    width: var(--viewer-width);
    height: var(--viewer-height);
    max-width: none;
    max-height: none;
    margin: 0;
    padding: var(--viewer-inset);
    border: 0;
    border-radius: 0;
    transform: translate(-50%, -50%);
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .marketing-site .mk-image-dialog:modal {
    padding-right: calc(var(--viewer-inset) + 52px);
  }
  .marketing-site .mk-image-dialog form {
    position: absolute;
    top: var(--viewer-inset);
    right: var(--viewer-inset);
    margin: 0;
  }
  .marketing-site .mk-image-dialog button {
    width: 44px;
    min-height: 44px;
    padding: 4px;
    font-size: 0;
    line-height: 1.4;
  }
  .marketing-site .mk-image-dialog button::after { content: "×"; font-size: 26px; }
  .marketing-site .mk-image-dialog figure {
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    overflow: hidden;
  }
  .marketing-site .mk-image-dialog img {
    width: 100%;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  /* Keep captions available to assistive technology without reducing the image. */
  .marketing-site .mk-image-dialog figcaption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .marketing-site .mk-image-dialog > p,
  .marketing-site .tp-motion-dialog > .tp-small { display: none; }

  .marketing-site .tp-motion-dialog:modal { display: flex; padding-right: calc(var(--viewer-inset) + 124px); }
  .marketing-site .tp-motion-dialog-header { position: absolute; top: var(--viewer-inset); right: var(--viewer-inset); margin: 0; }
  .marketing-site .tp-motion-dialog-header h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .marketing-site .tp-motion-dialog > .textbook-excerpt {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 6px;
  }
  .marketing-site .tp-motion-dialog .tp-motion-scroll {
    display: grid;
    place-items: center;
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    border: 0;
    container-type: size;
  }
  .marketing-site .tp-motion-dialog .textbook-page-window {
    width: min(100cqw, calc(100cqh * 1400 / 825));
    min-width: 0;
    flex: none;
  }
  .marketing-site .tp-motion-dialog .textbook-excerpt-controls { position: absolute; right: var(--viewer-inset); bottom: var(--viewer-inset); width: 116px; margin: 0; flex-direction: column; flex-wrap: nowrap; }
  .marketing-site .tp-motion-dialog .textbook-excerpt-controls button { flex: none; min-height: 44px; padding: 4px 12px; }
  .marketing-site .tp-motion-dialog .textbook-excerpt-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .marketing-site .ap-live-dialog:modal .ap-live-close { min-height: 44px; margin-bottom: 4px; padding: 4px 12px; }
  .marketing-site .ap-live-dialog:modal .ap-live-viewport { height: calc(100% - 48px); }
}

@media (max-width: 600px) and (orientation: portrait) {
  .marketing-site :is(.mk-image-dialog, .tp-motion-dialog, .ap-live-dialog):modal {
    --viewer-width: 100dvh;
    --viewer-height: 100dvw;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}