/* One source-image frame, matching the site's existing product framing. */
.knockknock-copy-stack{display:grid;gap:var(--lg);min-width:0}
.knockknock-copy-block{transition:opacity 900ms ease}
.knockknock-ready .knockknock-copy-block:not(.is-active){opacity:.76}
.knockknock-ready .knockknock-copy-block.is-active .eyebrow{color:var(--orange)}
.knockknock-scene-selector{display:inline-flex;align-items:center;gap:var(--md);padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left}
.knockknock-scene-selector:hover{text-decoration:underline;text-underline-offset:var(--sm)}
.knockknock-ready .knockknock-copy-block:focus-within{opacity:1}
.knockknock-demo{min-width:0;margin:0;overflow-anchor:none}
.knockknock-demo:focus-visible{outline:3px solid var(--orange);outline-offset:var(--sm)}
.knockknock-demo-screen{position:relative;aspect-ratio:984 / 1013;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);background:var(--bg);overflow:hidden}
.knockknock-demo-track{position:absolute;inset:0 0 auto;will-change:transform}
.knockknock-demo-scene{width:100%;pointer-events:none}
.knockknock-demo-scene img{display:block;width:100%;height:auto;max-width:none}
.knockknock-demo-captions{display:grid}
.knockknock-demo-caption{grid-area:1 / 1;opacity:0;transition:opacity 900ms ease}
.knockknock-demo-caption.is-active{opacity:1}
/* Both sections share one outer header above their product content and demo. */
.workflow>#maxter>.feature-copy{order:0}
.feature>.product-section-intro{grid-column:1 / -1;grid-row:1}
.products-next-step{padding-bottom:var(--lg)}
.product-section-intro .product-page-title{font-family:var(--font);font-size:1.02rem;line-height:1.6}
.feature-copy .maxter-slogan{margin-top:var(--sm);font-family:var(--display);font-size:1.5rem;line-height:1.2;color:var(--orange)}
.knockknock-overview>.knockknock-demo{grid-column:1;grid-row:2}
.knockknock-overview>.knockknock-copy-stack{grid-column:2;grid-row:2}
.maxter-overview>.maxter-content{grid-column:1;grid-row:2}
.maxter-overview>.maxter-demo{grid-column:2;grid-row:2}
@media(max-width:760px){.knockknock-overview>.knockknock-copy-stack,.maxter-overview>.maxter-content{grid-column:1;grid-row:2}.knockknock-overview>.knockknock-demo,.maxter-overview>.maxter-demo{grid-column:1;grid-row:3}}
@media(prefers-reduced-motion:reduce){.knockknock-copy-block,.knockknock-demo-scene,.knockknock-demo-caption{transition:none!important}.knockknock-ready .knockknock-copy-block:not(.is-active){opacity:1}}

.mobile-workflow-slides{display:none}
@media(max-width:760px){
  .has-mobile-slides{touch-action:pan-y}
  .has-mobile-slides>.knockknock-copy-stack{display:none}
  .has-mobile-slides>.knockknock-demo{grid-column:1;grid-row:3;width:100%;max-width:none;justify-self:stretch}
  .mobile-workflow-slides{display:block;grid-column:1;grid-row:2;min-width:0;touch-action:pan-y}
  .mobile-slide-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--md);margin-bottom:var(--md)}
  .mobile-slide-controls button{display:grid;place-items:center;width:calc(var(--lg)*2);height:calc(var(--lg)*2);padding:0;border:1px solid var(--border);border-radius:var(--r-full);background:transparent;color:var(--text);font-size:1.4rem}
  .mobile-slide-controls button:first-child .icon{transform:rotate(180deg)}
  .mobile-slide-controls span{font-size:.85rem;color:var(--muted)}
  .mobile-slide-copy h2{font-size:2rem;line-height:1.1;margin-bottom:var(--md)}
  .mobile-slide-copy>div{font-size:.95rem;line-height:1.6;color:var(--muted)}
  .mobile-slide-copy p{margin-top:var(--md)}
}

@media(max-width:760px){
  .mobile-workflow-slides{position:relative;overflow:hidden}
  .mobile-slide-outgoing{position:absolute;left:0;right:0;pointer-events:none}
}
.knockknock-demo[data-direct-selection="true"] .knockknock-demo-track{transition:transform 1200ms cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){.knockknock-demo[data-direct-selection="true"] .knockknock-demo-track{transition:none}}

/* Shared caption row keeps navigation with the image at every width. */
.has-mobile-slides .knockknock-demo-captions,.maxter-demo-captions{display:grid;grid-template-columns:calc(var(--lg)*2) minmax(0,1fr) calc(var(--lg)*2);align-items:center;column-gap:var(--md);row-gap:var(--xs)}
.has-mobile-slides .mobile-slide-controls,.maxter-demo-captions .mobile-slide-controls{display:contents}
.mobile-slide-controls button{display:grid;place-items:center;width:calc(var(--lg)*2);height:calc(var(--lg)*2);padding:0;border:1px solid var(--border);border-radius:var(--r-full);background:transparent;color:var(--text);font-size:1.4rem}
.mobile-slide-controls button:first-child{grid-column:1;grid-row:1 / 3}
.mobile-slide-controls button:first-child .icon{transform:rotate(180deg)}
.mobile-slide-controls button:last-child{grid-column:3;grid-row:1 / 3}
.mobile-slide-controls>span{grid-column:2;grid-row:1;font-size:.85rem;color:var(--muted)}
.knockknock-caption-text{display:grid;grid-column:2;grid-row:2}

/* Shared slideshow feedback, preserving the existing outlined control. */
.mobile-slide-controls button,.report-caption button{transition:background-color 180ms ease,border-color 180ms ease,transform 180ms ease}
@media(hover:hover){.mobile-slide-controls button:hover,.report-caption button:hover{background:rgba(255,255,255,.09);border-color:var(--text);transform:scale(1.06)}}
.mobile-slide-controls button:focus-visible,.report-caption button:focus-visible{outline:2px solid var(--text);outline-offset:3px;background:rgba(255,255,255,.09)}
.mobile-slide-controls button:active,.report-caption button:active{transform:scale(.96)}
@media(prefers-reduced-motion:reduce){.mobile-slide-controls button,.report-caption button{transition:none}.mobile-slide-controls button:hover,.report-caption button:hover,.mobile-slide-controls button:active,.report-caption button:active{transform:none}}

.knockknock-copy-block h2 .knockknock-scene-selector{color:var(--text);line-height:inherit;transition:color 300ms ease}
.knockknock-copy-block.is-active h2 .knockknock-scene-selector{color:var(--orange)}
.knockknock-brand{margin:0!important}
.mobile-workflow-slides>.knockknock-brand{margin-bottom:var(--lg)!important}
.mobile-slide-copy h2{color:var(--orange)}