/* Movement supports the conversation. It never changes the supplied words. */
.motion-enhanced .transcript-word {
  display: inline-block;
  position: relative;
  opacity: 1;
  transition: opacity 220ms ease, translate 280ms cubic-bezier(.2,.7,.2,1);
}
.motion-enhanced .demo-playing .transcript-word:not(.word-seen) {
  opacity: .3;
  translate: 0 3px;
}
.motion-enhanced .transcript-word.word-current::after {
  content: '';
  position: absolute;
  bottom: -.07em;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}
.motion-enhanced .waveform i {
  transform-origin: center;
  animation: notule-wave var(--wave-duration, 1100ms) ease-in-out var(--wave-offset, 0ms) infinite alternate;
  animation-play-state: paused;
  will-change: transform;
}
.motion-enhanced[data-motion="running"] .hero-proof.is-in-view .waveform i {
  animation-play-state: running;
}
@keyframes notule-wave {
  0% { transform: scaleY(var(--wave-low, .25)); opacity: .58; }
  34% { transform: scaleY(.82); opacity: .92; }
  65% { transform: scaleY(.38); opacity: .75; }
  100% { transform: scaleY(1); opacity: 1; }
}

.transcript-demo-controls {
  --demo-ink: #577568;
  --demo-edge: #c6d7cb;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px 18px;
  min-height: 58px;
  padding: 12px 24px;
  color: var(--demo-ink);
  background: #ecf1e8;
  border-top: 1px solid var(--demo-edge);
  font-family: var(--font);
  font-size: .75rem;
  line-height: 1.5;
}
.demo-description { display: inline-flex; align-items: center; gap: 8px; }
.demo-state-mark { width: 6px; height: 6px; background: currentColor; border-radius: 50%; flex-shrink: 0; }
.demo-status { margin-left: auto; opacity: .85; }
.demo-replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 9px;
  background: transparent;
  border: 1px solid var(--demo-edge);
  border-radius: 3px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.demo-replay svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.demo-replay:disabled { opacity: .55; cursor: default; }
.demo-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; background: transparent; pointer-events: none; }
.demo-progress i { display: block; width: 100%; height: 100%; background: var(--teal); transform: scaleX(0); transform-origin: left; }
.direction-bold .transcript-demo-controls { --demo-ink: #c5e1d7; --demo-edge: #526675; background: #2e3b48; padding-inline: 30px; }
.direction-bold .demo-progress i { background: var(--gold); }
.direction-editorial .transcript-demo-controls { --demo-ink: #6c6c4b; --demo-edge: #d4d0ba; background: #f0ecdc; padding: 13px 16px; }
.direction-editorial .demo-status { display: none; }
.direction-product .transcript-demo-controls { --demo-ink: #52735f; --demo-edge: #cbdccd; background: #eaf2e7; }
.direction-product .demo-status { display: none; }
.direction-product .demo-replay { margin-left: auto; }
.direction-editorial .demo-replay { margin-left: auto; }

.motion-enhanced .product-result > h3,
.motion-enhanced .product-result > p,
.motion-enhanced .product-next,
.motion-enhanced .product-deadline {
  transition: opacity 450ms ease, translate 500ms cubic-bezier(.2,.7,.2,1);
}
.motion-enhanced .demo-playing .product-result > h3:not(.result-ready),
.motion-enhanced .demo-playing .product-result > p:not(.result-ready),
.motion-enhanced .demo-playing .product-next:not(.result-ready),
.motion-enhanced .demo-playing .product-deadline:not(.result-ready) {
  opacity: .3;
  translate: 0 8px;
}
.motion-enhanced .flow-node { transition: scale 450ms ease, background 450ms ease, color 450ms ease, box-shadow 450ms ease; }
.motion-enhanced[data-motion="running"] .flow-current .flow-node { scale: 1.08; background: #71d7bf; color: #233f43; border-color: #71d7bf; box-shadow: 0 0 0 5px #71d7bf16; }
.direction-bold.motion-enhanced[data-motion="running"] .flow-current .flow-node { background: transparent; color: #ffbf3c; box-shadow: none; }
.motion-enhanced .button .icon,
.motion-enhanced .text-link .icon,
.motion-enhanced .sign-in .icon,
.motion-enhanced .price-plan .price { transition: translate 220ms ease; }
@media (hover: hover) and (pointer: fine) {
  .motion-enhanced[data-motion="running"] .button:hover .icon,
  .motion-enhanced[data-motion="running"] .text-link:hover .icon,
  .motion-enhanced[data-motion="running"] .sign-in:hover .icon { translate: 4px 0; }
  .motion-enhanced[data-motion="running"] .price-plan:hover .price { translate: 0 -3px; }
  .motion-enhanced[data-motion="running"] .demo-replay:hover svg { animation: notule-replay-turn 500ms ease; }
}
@keyframes notule-replay-turn { from { rotate: -35deg; } to { rotate: 0deg; } }

.motion-toggle {
  position: fixed;
  right: 20px;
  bottom: 18px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid #d2e2d5;
  border-radius: 24px;
  background: #384150;
  color: #f8f7f2;
  font-family: var(--font);
  font-size: .75rem;
  line-height: 1.3;
  box-shadow: 0 3px 14px #172b2516;
  cursor: pointer;
}
.motion-toggle-icon { width: 11px; height: 11px; position: relative; }
.motion-toggle-icon::before,
.motion-toggle-icon::after { position: absolute; content: ''; top: 0; bottom: 0; width: 3px; background: #8ce2ce; border-radius: 1px; }
.motion-toggle-icon::before { left: 1px; }
.motion-toggle-icon::after { right: 1px; }
.motion-toggle[aria-pressed="true"] .motion-toggle-icon::before { width: 0; height: 0; left: 2px; top: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid #8ce2ce; background: transparent; border-radius: 0; }
.motion-toggle[aria-pressed="true"] .motion-toggle-icon::after { display: none; }
.motion-toggle:disabled { cursor: default; }
.motion-toggle:disabled .motion-toggle-icon { display: none; }
.motion-enhanced[data-motion="paused"] *,
.motion-enhanced[data-motion="hidden"] * { animation-play-state: paused !important; transition: none !important; }
.motion-enhanced[data-motion="reduced"] *,
.motion-enhanced[data-motion="reduced"] *::before,
.motion-enhanced[data-motion="reduced"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

@media (max-width: 760px) {
  .transcript-demo-controls { gap: 9px 12px; padding: 12px 18px; }
  .direction-bold .transcript-demo-controls { padding-inline: 18px; }
  .demo-status { display: none; }
  .demo-replay { margin-left: auto; }
  .demo-description { font-size: .75rem; }
  .demo-replay { font-size: .75rem; min-height: 37px; }
  .demo-state-mark { display: none; }
  .motion-toggle { bottom: 12px; right: 12px; min-height: 38px; padding: 9px 12px; }
  .motion-enhanced .site-footer { padding-bottom: 74px; }
}
@media (max-width: 360px) {
  .transcript-demo-controls { padding-inline: 13px; }
  .demo-description { max-width: 116px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-enhanced *, .motion-enhanced *::before, .motion-enhanced *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motion-enhanced .transcript-word,
  .motion-enhanced .product-result > h3,
  .motion-enhanced .product-result > p,
  .motion-enhanced .product-next,
  .motion-enhanced .product-deadline { opacity: 1 !important; translate: none !important; }
}