/* Motion adds feedback; it never delays the next action or changes an answer. */
.qf-page.am-motion .qf-goal-chart circle { transform-box: fill-box; transform-origin: center; }
.qf-page.am-motion .qf-progress-segment { transform-origin: left center; }
.qf-page.am-motion .qf-choice-icon svg { width: 46%; height: 46%; overflow: visible; }
.qf-page.am-motion .qf-loading-icon svg { animation: none; }
.qf-page.am-motion [data-motion-toggle] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #d9e5dd;
  border-radius: 8px;
  background: #fff;
  color: #476354;
  font: 550 12px/1.3 var(--body, sans-serif);
  white-space: nowrap;
  cursor: pointer;
}
.qf-page.am-motion [data-motion-toggle]:hover { border-color: #87b39c; background: #f5faf7; }
.qf-page.am-motion [data-motion-toggle]:disabled { cursor: default; color: #627369; background: #f5f8f6; }
.qf-page.am-motion [data-motion-toggle]:focus-visible { outline: 3px solid #146d54; outline-offset: 3px; }
.qf-page.am-motion .am-number { position: relative; white-space: nowrap; }
.qf-page.am-motion .am-number-source {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.qf-page.am-motion .am-number-visual { display: inline-flex; align-items: baseline; white-space: pre; }
.qf-page.am-motion .am-digit-window { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: baseline; }
.qf-page.am-motion .am-digit-reel { display: flex; flex-direction: column; transform: translateY(-50%); }
.qf-page.am-motion .am-digit-reel > span { display: block; height: 1em; line-height: 1; }
.qf-page.am-motion.am-motion-off :is(.qf-option, .qf-treatment-card, .qf-button > span) { transition: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .qf-page.am-motion:not(.am-motion-off) .qf-button > span { transition: transform 160ms ease; }
  .qf-page.am-motion:not(.am-motion-off) .qf-button:is(:hover, :focus-visible) > span { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .qf-page.am-motion :is(.qf-option, .qf-treatment-card, .qf-button > span) { transition: none !important; }
  .qf-page.am-motion .qf-loading-icon svg { animation: none !important; }
}
@media (max-width: 480px) {
  .qf-page.am-motion [data-motion-toggle] { padding-inline: 9px; font-size: 11px; }
}