.kommo-page,
.site-header--kommo {
  --kommo-purple: #5f43d0;
  --kommo-purple-hover: #4b32b1;
  --paper: #f9f7ff;
  --soft: #f3efff;
  --line: #dfd8ed;
}
.kommo-page { background: var(--paper); }
.site-header.site-header--kommo { background: #f9f7fff2; }
.site-header--kommo .site-nav { background: var(--paper); }
.kommo-page .kommo-feature__media,
.kommo-page .kommo-testimonial__media { background: var(--soft); }
.kommo-page .button,
.kommo-page .closing-cta .button,
.site-header--kommo .nav-cta {
  background: var(--kommo-purple);
  color: #fff;
}
.kommo-page .button:hover,
.kommo-page .button:focus-visible,
.kommo-page .closing-cta .button:hover,
.kommo-page .closing-cta .button:focus-visible,
.site-header--kommo .nav-cta:hover,
.site-header--kommo .nav-cta:focus-visible { background: var(--kommo-purple-hover); color: #fff; }
.kommo-page .kommo-testimonial__play > span:first-child { background: var(--kommo-purple); }
.kommo-page .kommo-testimonial__play:hover > span:first-child { background: var(--kommo-purple-hover); }
.kommo-page .kommo-testimonials__controls button { background: var(--kommo-purple); border-color: var(--kommo-purple); color: #fff; }
.kommo-page .kommo-testimonials__controls button:hover:not(:disabled) { background: var(--kommo-purple-hover); border-color: var(--kommo-purple-hover); }
.kommo-page :is(.button, .kommo-testimonial__play, .kommo-testimonials__controls button):focus-visible,
.site-header--kommo .nav-cta:focus-visible { outline: 2px solid var(--kommo-purple); outline-offset: 4px; }
.kommo-page .closing-cta .button:focus-visible { outline-color: #f3efff; }
.kommo-page .kommo-testimonial__play:focus-visible { outline-offset: -3px; }
.kommo-page .kommo-testimonial__media noscript iframe { border: 0; height: 100%; inset: 0; position: absolute; width: 100%; }
.kommo-page .kommo-feature-grid,
.kommo-page .kommo-feature { border: 0; }
.kommo-page .kommo-feature__media { margin-top: 0; }

/* Decorative characters float in the section gutters, clear of text and controls. */
.kommo-page .kommo-hero__visual,
.kommo-page .kommo-partner,
.kommo-page .kommo-features { position: relative; }
.kommo-page .kommo-hero__visual { padding-top: 202px; }
.kommo-page .kommo-partner { padding-bottom: calc(clamp(7rem, 11vw, 11rem) + 80px); }
.kommo-page .kommo-mascot {
  --mascot-tilt: -16deg;
  --mascot-lift: -13px;
  --mascot-drift: 4px;
  animation: kommo-mascot-float 6s ease-in-out infinite;
  display: block;
  height: auto;
  pointer-events: none;
  position: absolute;
  user-select: none;
}
.kommo-page .kommo-mascot--lightning {
  left: 16%;
  top: 12px;
  width: 128px;
}
.kommo-page .kommo-mascot--heart {
  --mascot-tilt: 14deg;
  --mascot-lift: -8px;
  --mascot-drift: -7px;
  animation-delay: -2.8s;
  animation-duration: 7.5s;
  bottom: 26px;
  left: calc(var(--pad) + 4%);
  width: clamp(110px, 12vw, 152px);
}
.kommo-page .kommo-mascot--star {
  --mascot-tilt: 22deg;
  --mascot-lift: -18px;
  --mascot-drift: 8px;
  animation-delay: -4.3s;
  animation-duration: 5.8s;
  right: calc(var(--pad) + 14%);
  top: 38px;
  width: 62px;
}
@keyframes kommo-mascot-float {
  0%, 100% { transform: translate(0, 0) rotate(var(--mascot-tilt)); }
  50% { transform: translate(var(--mascot-drift), var(--mascot-lift)) rotate(calc(var(--mascot-tilt) + 5deg)); }
}
@media (max-width: 720px) {
  .kommo-page .kommo-hero__visual { padding-top: 134px; }
  .kommo-page .kommo-partner { padding-bottom: 170px; }
  .kommo-page .kommo-mascot--lightning { left: 12%; top: 12px; width: 82px; }
  .kommo-page .kommo-mascot--heart { bottom: 24px; left: calc(var(--pad) + 6%); width: 100px; }
  .kommo-page .kommo-mascot--star { right: calc(var(--pad) + 12%); top: 42px; width: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .kommo-page .kommo-mascot { animation: none; transform: rotate(var(--mascot-tilt)); }
}