/* Auto Edit examples: a dedicated stage below the original overview artwork. */
.qp-feature-page #main > .qp-auto-edit-section {
  padding-top: 18px !important;
  padding-bottom: 62px !important;
}
.qp-auto-edit-stage {
  grid-template-columns: minmax(0, 1fr) minmax(260px, .82fr);
  gap: clamp(36px, 6vw, 78px);
  align-items: center;
  padding: clamp(32px, 5vw, 64px);
}
.qp-auto-edit-copy { min-width: 0; }
.qp-inner #main .qp-auto-edit-copy .eyebrow {
  margin: 0 0 14px;
  color: #d6bad9 !important;
  font: 400 14px/1.5 'IBM Plex Mono', monospace !important;
  letter-spacing: .09em;
}
.qp-inner #main .qp-auto-edit-copy h2 { margin: 0; }
.qp-inner #main .qp-auto-edit-intro {
  max-width: 470px;
  margin: 18px 0 30px;
}
.qp-inner #main .qp-auto-edit-choose {
  margin: 0 0 12px;
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 600;
}
.qp-auto-edit-stage .edit-example-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}
.qp-auto-edit-stage .edit-example-button {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  white-space: normal;
}
.qp-auto-edit-stage .qp-edit-placeholder,
.qp-auto-edit-stage .qp-edit-placeholder:hover {
  border: 1px dashed #a79aac36;
  background: #ffffff02;
  color: #aaa1b3;
}
.qp-auto-edit-stage .qp-auto-edit-demo { max-width: 400px; }
.qp-auto-edit-stage .qp-auto-edit-demo .comparison { aspect-ratio: 3 / 4; height: auto; }
.qp-inner #main .qp-auto-edit-demo .comparison-hint { margin: 14px 0 0; min-height: 0; }

/* Register only these two genuine Dashboard pairs (750 x 1000 per half).
   Transform the image inside the original clipping layer, so the slider and
   labels still share an exact divider. Source image bytes remain unchanged. */
.qp-auto-edit-stage .comparison[data-edit-example="reduce-glasses-glare"] {
  /* Match the original to the edited frame; no additional crop is needed. */
  --before-align: translate(-.65086677%, -1.17295785%) matrix(1.04272916, .00090163, -.00090163, 1.04272916, 0, 0);
  --after-align: none;
}
.qp-auto-edit-stage .comparison[data-edit-example="fix-stray-hairs"] {
  /* Register the original, then give both halves the same 4% centered crop.
     The small common crop keeps real image pixels at all four frame edges. */
  --before-align: translate(-.37808000%, -2.20901258%) matrix(1.06068273, -.00077444, .00077444, 1.06068273, 0, 0);
  --after-align: translate(-2%, -2%) scale(1.04);
}
.qp-auto-edit-stage .comparison:is([data-edit-example="reduce-glasses-glare"], [data-edit-example="fix-stray-hairs"]) .comparison-image {
  background-image: none;
}
.qp-auto-edit-stage .comparison:is([data-edit-example="reduce-glasses-glare"], [data-edit-example="fix-stray-hairs"]) .comparison-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--edit-image);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  transform-origin: 0 0;
}
.qp-auto-edit-stage .comparison:is([data-edit-example="reduce-glasses-glare"], [data-edit-example="fix-stray-hairs"]) .comparison-before::before {
  background-position: left top;
  transform: var(--before-align);
}
.qp-auto-edit-stage .comparison:is([data-edit-example="reduce-glasses-glare"], [data-edit-example="fix-stray-hairs"]) .comparison-after::before {
  background-position: right top;
  transform: var(--after-align);
}
@media (max-width: 760px) {
  .qp-feature-page #main > .qp-auto-edit-section { padding-top: 8px !important; padding-bottom: 30px !important; }
  .qp-auto-edit-stage { grid-template-columns: 1fr; gap: 32px; padding: 30px 24px; }
  .qp-auto-edit-stage .qp-auto-edit-demo { width: min(100%, 370px); }
  .qp-inner #main .qp-auto-edit-intro { margin: 16px 0 25px; }
}
@media (max-width: 380px) {
  .qp-auto-edit-stage { padding: 25px 18px; }
  .qp-auto-edit-stage .edit-example-button { padding-inline: 7px; font-size: 14px; }
}