/* Motion is an optional layer: document content and layout never animate in. */
.page-marketing.route-view-home .hero-workflow-proof-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 20px;
}

.workflow-motion-control {
  display: grid;
  place-items: center;
  width: 116px;
  height: 44px;
}
.workflow-motion-control > * { grid-area: 1 / 1; }
.workflow-motion-control .workflow-motion-fallback {
  color: #c3cfcf;
  font: 400 0.61rem/1.5 var(--kh-mono);
  text-align: center;
}
.workflow-motion-control button {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #8d9d9b;
  border-radius: 4px;
  background: transparent;
  color: #fffdf8;
  font: 600 0.76rem/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.workflow-motion-control button:hover { background: #29495b; border-color: #fffdf8; }
.workflow-motion-control button:disabled { cursor: default; background: transparent; border-color: #60777a; color: #c3cfcf; }
.workflow-motion-control button:focus-visible { outline: 2px solid #f2c19f; outline-offset: 3px; }
.workflow-motion-control [hidden] { display: none; }
.workflow-motion-anchor { position: relative; }
.page-marketing .workflow-motion-decoration {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.page-marketing .workflow-motion-line {
  top: 9px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: #a14e2d;
  transform: scaleX(0);
  transform-origin: left center;
}
.page-marketing .hero-workflow-stage--output .workflow-motion-line { background: #f2c19f; }
.page-marketing .workflow-motion-frame {
  inset: -5px;
  border: 1px solid #a14e2d;
  border-radius: 3px;
}
.page-marketing .hero-workflow-stage--output .workflow-motion-frame { border-color: #f2c19f; }
.page-marketing .hero-workflow-proof-header > .workflow-motion-line {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f2c19f;
}

@media (max-width: 720px) {
  .page-marketing.route-view-home .hero-workflow-proof-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 12px;
  }
  .page-marketing.route-view-home .hero-workflow-proof-title { grid-column: 1 / -1; }
  .page-marketing.route-view-home .hero-workflow-proof-header > a {
    max-width: none;
    white-space: nowrap;
    justify-self: end;
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-marketing .workflow-motion-decoration { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  body :is(.button, [data-public-nav] > nav > a, [data-public-nav] .nav-signin-link, [data-public-nav] > .nav-cta, .kh-mobile-menu > summary, .workflow-motion-control button):not(:disabled):not([aria-disabled="true"]):active {
    transform: translateY(1px);
  }
  .kh-mobile-menu[open] > nav { animation: kh-menu-reveal 140ms ease-out; }
}

@keyframes kh-menu-reveal {
  from { opacity: 0.65; }
  to { opacity: 1; }
}