/* Grade Drafter product visuals: composed hero image + current workflow screenshots. */

/* Hero: use one composed product image so annotations stay fixed across breakpoints. */
.product-stage-editorial{
  position:relative;
  margin-top:6px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  min-height:auto;
}
.product-stage-editorial:before{display:none!important;content:none!important}
.product-sheet{
  position:relative;
  border:0;
  background:transparent;
  overflow:visible;
  box-shadow:none;
}
.product-sheet img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:top center;
  background:transparent;
  filter:none;
}
.product-sheet-main{
  width:118%;
  max-width:920px;
  margin-left:-42px;
  right:auto;
  top:auto;
  z-index:2;
  height:auto;
}
.product-stage-editorial .stage-label,
.product-stage-editorial .insights-arrow{display:none!important}

/* Workflow and whole-class visuals follow the original split editorial treatment. */
.workflow-demo .screenshot-frame img{max-height:690px;object-fit:contain;object-position:top center}
.insights-demo{grid-template-columns:.95fr 1.05fr}
.insights-demo .screenshot-frame img{max-height:none;object-fit:contain;object-position:top center}

/* Images themselves provide the shape; CSS provides the shadow where needed. */
.screenshot-frame{border:0;background:transparent;padding:0;border-radius:0;box-shadow:none;overflow:visible}
.screenshot-frame img{display:block;border:0;border-radius:0;background:transparent;filter:drop-shadow(0 16px 25px rgba(23,34,49,.12))}

/* Setup 04 stays a supporting visual and reuses the same canonical ready-state asset. */
.setup-product-shot{width:36%;max-width:300px;margin-top:16px}
.setup-product-shot img{display:block;width:100%;height:auto;border:0;border-radius:0;box-shadow:none;background:transparent;filter:drop-shadow(0 14px 22px rgba(23,34,49,.11))}

@media(max-width:1100px){
  .product-sheet-main{width:112%;max-width:840px;margin-left:-24px}
}

@media(max-width:900px){
  .product-stage-editorial{max-width:680px}
  .product-sheet-main{width:100%;max-width:680px;margin-left:0}
  .insights-demo{grid-template-columns:1fr}
  .setup-product-shot{width:44%;max-width:280px}
}

@media(max-width:560px){
  .product-sheet-main{width:100%;max-width:100%;margin-left:0}
  .setup-product-shot{width:64%;max-width:none}
}