/* Media conditions keep their original values and cascade order:
 * (prefers-reduced-motion: reduce)
 * (hover: hover) and (pointer: fine)
 * print
 */
/* Motion modes, state-dependent effects and keyframe definitions. */
@media (prefers-reduced-motion: reduce) {
  *:not(.band-card):where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ),
  *:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    )::before,
  *:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    )::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
html.m-off
  *:not(.band-card):where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ),
html.m-off
  *:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  )::before,
html.m-off
  *:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  )::after {
  transition: none !important;
  animation: none !important;
}
html.m-off
  .band-card:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  animation-play-state: paused !important;
}
.m-on
  .cover-band.m-live
  .band-card:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  animation-play-state: running;
}
.m-on #hero:not(.m-hero-skip) .hero-label {
  animation: m-rise var(--m-reveal) var(--m-out) var(--m-hero-label-delay)
    backwards;
}
.m-on #hero:not(.m-hero-skip) h1 {
  animation: m-rise var(--m-reveal) var(--m-out) var(--m-hero-heading-delay)
    backwards;
}
.m-on #hero:not(.m-hero-skip) .hero-actions {
  animation: m-rise var(--m-reveal) var(--m-out) var(--m-hero-actions-delay)
    backwards;
}
.m-on #hero:not(.m-hero-skip) .cover-band {
  animation: m-fade var(--m-reveal) var(--m-out) backwards;
}
@media (hover: hover) and (pointer: fine) {
  .m-on #hero .cover-band {
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .band-card:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    animation-play-state: paused !important;
  }
}
@keyframes gleam {
  to {
    translate: 120% 0;
  }
}
@keyframes ripple {
  from {
    scale: 0;
    opacity: 1;
  }
  to {
    scale: 4;
    opacity: 0;
  }
}
[data-count]:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  font-variant-numeric: tabular-nums;
}
[data-count]:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  display: inline-block;
  white-space: nowrap;
}
[data-m-el]:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  pointer-events: none;
}
[data-m-el="sr"]:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  position: absolute;
  width: var(--mv-1);
  height: var(--mv-1);
  overflow: hidden;
  clip-path: inset(var(--mv-2));
  white-space: nowrap;
}
.m-on
  .m-await:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  opacity: var(--mv-3);
}
.m-on
  .m-enter:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  animation: m-rise var(--m-reveal) var(--m-out) backwards;
}
.m-on
  .m-enter[data-reveal="heading"]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  animation-name: m-heading;
  animation-duration: var(--m-heading);
}
.m-on
  .m-enter[data-reveal="photo"]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  animation-name: m-photo;
  animation-duration: var(--m-photo);
}
.m-on
  .m-enter[data-reveal="fade"]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  animation-name: m-fade;
}
@keyframes m-rise {
  from {
    opacity: var(--mv-3);
    translate: var(--mv-3) var(--m-distance);
  }
  to {
    opacity: var(--mv-4);
    translate: var(--mv-3) var(--mv-3);
  }
}
@keyframes m-heading {
  from {
    opacity: var(--mv-3);
    clip-path: inset(var(--mv-3) var(--mv-3) var(--mv-5) var(--mv-3));
    translate: var(--mv-3) var(--mv-6);
  }
  to {
    opacity: var(--mv-4);
    clip-path: inset(var(--mv-7));
    translate: var(--mv-3) var(--mv-3);
  }
}
@keyframes m-photo {
  from {
    opacity: var(--mv-3);
    clip-path: inset(var(--m-photo-inset) round var(--m-photo-radius));
    scale: var(--mv-8);
  }
  to {
    opacity: var(--mv-4);
    clip-path: inset(var(--mv-3));
    scale: var(--mv-4);
  }
}
@keyframes m-fade {
  from {
    opacity: var(--mv-3);
  }
  to {
    opacity: var(--mv-4);
  }
}
@keyframes m-fill {
  from {
    scale: var(--mv-3) var(--mv-4);
  }
  to {
    scale: var(--value, 1) var(--mv-4);
  }
}
.m-on
  .m-fill:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  animation: m-fill var(--m-fill) var(--m-inout) backwards;
}
@keyframes m-band-turn {
  0% {
    transform: rotateY(var(--mv-11))
      translateZ(calc(var(--m-band-radius) * var(--mv-12)))
      rotateY(var(--mv-13)) scale(var(--mv-14), var(--mv-4));
    visibility: hidden;
  }
  21% {
    transform: rotateY(var(--mv-15))
      translateZ(calc(var(--m-band-radius) * var(--mv-12)))
      rotateY(var(--mv-16)) scale(var(--mv-14), var(--mv-4));
    visibility: hidden;
  }
  21.01% {
    transform: rotateY(var(--mv-17))
      translateZ(calc(var(--m-band-radius) * var(--mv-12)))
      rotateY(var(--mv-18)) scale(var(--mv-14), var(--mv-4));
    visibility: visible;
  }
  50% {
    transform: rotateY(var(--mv-19))
      translateZ(calc(var(--m-band-radius) * var(--mv-12)))
      rotateY(var(--mv-19)) scale(var(--mv-20));
    visibility: visible;
  }
  78.99% {
    transform: rotateY(var(--mv-21))
      translateZ(calc(var(--m-band-radius) * var(--mv-12)))
      rotateY(var(--mv-22)) scale(var(--mv-14), var(--mv-4));
    visibility: visible;
  }
  79% {
    transform: rotateY(var(--mv-23))
      translateZ(calc(var(--m-band-radius) * var(--mv-12)))
      rotateY(var(--mv-24)) scale(var(--mv-14), var(--mv-4));
    visibility: hidden;
  }
  100% {
    transform: rotateY(var(--mv-25))
      translateZ(calc(var(--m-band-radius) * var(--mv-12)))
      rotateY(var(--mv-26)) scale(var(--mv-14), var(--mv-4));
    visibility: hidden;
  }
}
[data-m-el="wipe"]:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  position: absolute;
  inset: var(--mv-3);
  background: var(--lp-color-white);
  z-index: var(--mv-3);
  transform-origin: right bottom;
}
[data-m-el="days"]:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  display: flex;
  gap: var(--mv-27);
  height: var(--m-tick-height);
  position: absolute;
  left: var(--mv-3);
  right: var(--mv-3);
  top: var(--mv-3);
}
[data-m-el="day"]:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  flex: var(--mv-4);
  background: currentColor;
  opacity: var(--mv-28);
  border-radius: var(--mv-1);
}
[data-m-el="day"].m-lit:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  opacity: var(--mv-4);
}
.m-on
  .cost-ticks.m-ticks
  i:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  opacity: var(--mv-28);
}
.m-on
  .cost-ticks.m-ticks
  i.m-lit:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  opacity: var(--mv-4);
}
#cost .m-marker-ready {
  background: none;
}
.m-on #cost.m-cost-finish .cost-conclusion {
  animation: m-mark var(--m-fast) var(--m-inout);
}
@keyframes m-mark {
  from {
    opacity: var(--mv-30);
  }
  to {
    opacity: var(--mv-4);
  }
}
.m-on
  .flow-step:not(.m-reached)
  .flow-number:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  background: var(--lp-color-hex-d6e4f0);
  color: var(--lp-color-ink);
}
.m-on
  .flow-step.m-reached
  .flow-number:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  background: var(--m-blue);
  color: var(--lp-color-white);
}
[data-m-el="attention"]:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  position: absolute;
  inset: var(--mv-3);
  overflow: hidden;
  border-radius: inherit;
}
[data-m-el="attention"]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  )::before {
  content: "";
  position: absolute;
  inset: var(--mv-3);
  translate: var(--mv-31) var(--mv-3);
  background: linear-gradient(
    var(--mv-32),
    transparent var(--mv-33),
    var(--lp-color-hex-ffffff55) var(--mv-2),
    transparent var(--mv-34)
  );
  animation: m-sheen var(--m-heading) var(--m-inout);
}
[data-m-el="attention"]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  )::after {
  content: "";
  position: absolute;
  inset: var(--mv-3);
  border: var(--m-ring-size) solid var(--lp-color-hex-0064ed66);
  border-radius: inherit;
  animation: m-ring var(--m-pulse-time) ease-in-out var(--mv-35);
}
@keyframes m-sheen {
  to {
    translate: var(--mv-36) var(--mv-3);
  }
}
@keyframes m-ring {
  0%,
  100% {
    scale: var(--mv-4);
    opacity: var(--mv-3);
  }
  45% {
    scale: var(--mv-37);
    opacity: var(--mv-4);
  }
}
.m-on #prompt-demo.m-demo-good #demo-bad {
  opacity: var(--mv-38);
}
.m-on #prompt-demo [data-marker]:not(.m-marked) {
  background: none;
}
.m-on #prompt-demo [data-marker].m-marker-ready {
  background: none;
}
[data-m-el="marker"]:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  position: absolute;
  left: var(--mv-3);
  right: var(--mv-3);
  bottom: var(--mv-3);
  height: var(--mv-41);
  background: var(--lp-color-hex-0064ed25);
  transform-origin: left center;
}
@media (hover: hover) and (pointer: fine) {
  .m-on
    .feature-row
    .learning-screen:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ),
  .m-on
    .price-card:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ),
  .m-on
    #fit
    [data-reveal="card"]:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ),
  .m-on
    .paper:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    transition: translate var(--m-base) var(--m-out);
  }
  .m-on
    .feature-row
    .learning-screen:hover:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ),
  .m-on
    .price-card:hover:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ),
  .m-on
    #fit
    [data-reveal="card"]:hover:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ),
  .m-on
    .paper:hover:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    translate: var(--mv-3) calc(var(--m-lift) * var(--mv-12));
  }
  .m-on .cover-rail img {
    transition: translate var(--m-base) var(--m-out);
  }
  .m-on .cover-rail img:hover {
    translate: var(--mv-3) calc(var(--m-cover-lift) * var(--mv-12));
  }
  .m-on
    .comparison-table
    tr:hover:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    background: var(--m-tint);
  }
  .m-on
    [data-bar]:hover:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    background: var(--m-tint);
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-await:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ),
  .m-enter:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    opacity: var(--mv-4) !important;
    animation: none !important;
  }
  [data-m-el="attention"]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ),
  [data-m-el="wipe"]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    display: none !important;
  }
}
@media print {
  .m-await:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ),
  .m-enter:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    opacity: var(--mv-4) !important;
    animation: none !important;
  }
  [data-m-el="attention"]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ),
  [data-m-el="wipe"]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ),
  [data-m-el="days"]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hw-desktop-cta:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    transition: none;
  }
  body.handwritten-preview #problem [data-reveal],
  body.handwritten-preview #fit [data-reveal] {
    opacity: 1;
    transform: none;
  }
  body.handwritten-preview
    :is(#prompt-demo, #features, #learning-map, #usecases)
    [data-reveal] {
    opacity: 1;
    transform: none;
  }
  body.handwritten-preview
    :is(#pricing, #contact)
    .button
    .arrow:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    transition: none;
  }
}
.hw-motion-controlled
  .hw-m-pending:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  opacity: 0;
}
.hw-motion-controlled
  :is(.m-await, .m-enter):where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  animation: none !important;
}
.hw-motion-controlled #hero :is(.hero-label, .hero-actions, h1 .phrase) {
  animation: none !important;
}
.hw-motion-controlled
  [data-m-el]:not([data-m-el="sr"]):where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  display: none !important;
}
.hw-motion-controlled
  .hw-marker-motion:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  background: none !important;
  isolation: isolate;
}
.hw-motion-controlled
  .hw-marker-motion:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  )::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hw-marker-paint);
  clip-path: inset(0 var(--hw-marker-remainder, 0%) 0 0);
  pointer-events: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hw-motion-controlled
  .hw-marker-motion.hw-m-marker-pending:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  )::before {
  clip-path: inset(0 100% 0 0);
}
.hw-motion-controlled
  [data-hw-draw]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.hw-motion-controlled
  [data-hw-draw].hw-m-line-pending:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  stroke-dashoffset: 1;
}
.hw-motion-controlled
  path.hw-m-line-pending:not([data-hw-draw]):where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  clip-path: inset(0 100% 0 0);
}
.hw-motion-controlled
  .hw-button:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ),
.hw-motion-controlled
  .hero-actions
  .button:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  transition:
    transform 160ms var(--hw-motion-out),
    box-shadow 160ms var(--hw-motion-out);
}
.hw-motion-controlled
  :is(.hw-button, .hero-actions .button).is-pressed:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  transform: translate(
    var(--hw-button-shadow, 8px),
    var(--hw-button-shadow, 8px)
  );
  box-shadow: 0 0 0 var(--hw-cyan);
  scale: 1;
}
@media (hover: hover) and (pointer: fine) {
  .hw-motion-controlled
    :is(.hw-button, .hero-actions .button)
    .arrow:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    transition: transform 160ms var(--hw-motion-out);
  }
  .hw-motion-controlled
    :is(.hw-button, .hero-actions .button):hover
    .arrow:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    transform: translateX(4px);
    translate: none;
  }
}
.hw-motion-off
  .hw-m-pending:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ),
.hw-capture
  .hw-m-pending:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  opacity: 1 !important;
}
.hw-motion-off
  [data-hw-draw]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  stroke-dashoffset: 0 !important;
}
.hw-motion-off
  .hw-marker-motion:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  )::before,
.hw-capture
  .hw-marker-motion:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  )::before {
  clip-path: none !important;
}
.hw-motion-off
  :is(.hw-button, .hero-actions .button):where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .hw-m-pending:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    opacity: 1 !important;
  }
  [data-hw-draw]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    stroke-dashoffset: 0 !important;
  }
  .hw-marker-motion:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    )::before {
    clip-path: none !important;
  }
  .hw-motion-controlled
    :is(.hw-button, .hero-actions .button):where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ),
  .hw-motion-controlled
    .arrow:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    transition: none !important;
  }
}
@media print {
  .hw-m-pending:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    opacity: 1 !important;
  }
  .hw-marker-motion:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    )::before {
    clip-path: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.fv-wall-layout #hero .fc-card {
    will-change: auto;
  }
}
html.m-on
  body.handwritten-preview
  #contact
  .final-band.m-live
  .band-card[data-source-limited]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  animation-play-state: running;
}
@keyframes audit-contact-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5px;
  }
}
html.m-on
  body.handwritten-preview
  #contact
  .final-band.m-live
  .band-ring:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  animation-play-state: running;
}
@keyframes contact-fullwidth-flow {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
html:not(.m-on)
  body.handwritten-preview
  #contact
  .final-band
  .band-ring:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  body.handwritten-preview
    #contact
    .final-band
    .band-ring:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    animation: none !important;
    transform: none;
  }
}

html.m-on
  body.handwritten-preview
  main
  > section#prompt-demo
  .agenda-result-table
  thead[data-marker="format"]:not(.m-marked) {
  background: transparent;
  outline-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  #prompt-demo.prompt-demo-live *,
  #prompt-demo.prompt-demo-live *::before {
    animation: none !important;
    transition: none !important;
  }
}
html.m-off #prompt-demo.prompt-demo-live *,
html.m-off #prompt-demo.prompt-demo-live *::before {
  animation: none !important;
  transition: none !important;
}