/* ============================================================
   SANKEY MOTION — MULTI-DEVICE GEOMETRY v1

   One final responsive layer for the gateway, Studio, Learn and
   Playground. It deliberately follows the historical page CSS so
   phone, in-app browser and tablet layouts cannot inherit a desktop
   grid column or a default figure margin.
   ============================================================ */

/* Gateway: remove the browser's default figure inset and preserve the
   complete Input → Outcome movie rather than cropping its outer columns. */
.movie-card {
  margin: 0 !important;
}

.movie-viewport video {
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

@media (max-width: 1050px) {
  .surface-studio .family-hero-grid,
  .surface-learn .family-hero-grid,
  .surface-playground .family-hero-grid {
    box-sizing: border-box !important;
    width: min(calc(100% - 48px), var(--sm-hero-max)) !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 42px 0 48px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 26px !important;
    overflow: visible !important;
  }

  .surface-learn .neutral-product-hero,
  .surface-playground .neutral-product-hero {
    height: auto !important;
    min-height: 0 !important;
  }

  .surface-learn .family-hero-copy,
  .surface-playground .family-hero-copy,
  .surface-studio .intro {
    grid-column: 1 !important;
    grid-row: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }

  .surface-studio .family-hero-media,
  .surface-learn .family-hero-media,
  .surface-playground .family-hero-media {
    grid-column: 1 !important;
    grid-row: 2 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    overflow: visible !important;
  }

  .surface-studio .movie-wrap,
  .surface-studio .movie-stage,
  .surface-learn .hero-flow-film,
  .surface-playground .hero-flow-film,
  .surface-studio .sankey-media-frame,
  .surface-learn .sankey-media-frame,
  .surface-playground .sankey-media-frame {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  .surface-studio .family-hero-media video,
  .surface-learn .family-hero-media video,
  .surface-playground .family-hero-media video {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }
}

@media (max-width: 620px) {
  .surface-studio .family-header,
  .surface-learn .family-header,
  .surface-playground .family-header {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 16px 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  .surface-studio .family-header .family-brand,
  .surface-learn .family-header .family-brand,
  .surface-playground .family-header .family-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 8px !important;
  }

  .surface-studio .family-header .family-nav,
  .surface-learn .family-header .family-nav,
  .surface-playground .family-header .family-nav {
    grid-column: 1 !important;
    grid-row: 2 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 8px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  .surface-studio .family-header .family-nav::-webkit-scrollbar,
  .surface-learn .family-header .family-nav::-webkit-scrollbar,
  .surface-playground .family-header .family-nav::-webkit-scrollbar {
    display: none !important;
  }

  .surface-studio .family-hero-grid,
  .surface-learn .family-hero-grid,
  .surface-playground .family-hero-grid {
    width: calc(100% - 32px) !important;
    padding: 34px 0 40px !important;
    gap: 22px !important;
  }

  .surface-studio .family-hero-grid h1,
  .surface-studio .hero h1 {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: clamp(48px, 14vw, 58px) !important;
  }

  .movie-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   /SANKEY MOTION — MULTI-DEVICE GEOMETRY v1
   ============================================================ */