/* Negative-space eyes share the mark's rounded geometry and blue silhouette. */
.companion-home { display: none; }
.sumlino-companion {
  --companion-size: 88px;
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  width: var(--companion-size);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  pointer-events: none;
  user-select: none;
  transform-origin: 0 0;
}
.companion-figure { display: block; position: relative; padding-bottom: 5px; }
.companion-body {
  display: block;
  position: relative;
  width: 100%;
  transform-origin: 50% 91%;
}
.companion-swap { width: 100%; --icon-swap-start-scale: .96; }
.companion-swap .client-character { display: block; width: 100%; height: auto; overflow: visible; color: var(--character-ink); }
.companion-swap .client-character-eyes { transform-box: fill-box; transform-origin: center; }
.t-icon-swap { position: relative; display: inline-grid; }
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity var(--icon-swap-dur) var(--icon-swap-ease),
    filter var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] { opacity: 1; filter: blur(0); transform: scale(1); }
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] { opacity: 0; filter: blur(var(--icon-swap-blur)); transform: scale(var(--icon-swap-start-scale)); }
.companion-shadow {
  position: absolute;
  bottom: 0;
  left: 22%;
  width: 56%;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #075cff20, #075cff00 72%);
}
.sumlino-companion.is-blinking .client-character-eyes { animation: companion-blink 210ms ease-in-out; }
@keyframes companion-blink {
  0%, 100% { transform: scaleY(1); }
  40%, 55% { transform: scaleY(.12); }
}
@media (min-width: 1100px) {
  .marketing-home .sumlino-companion { transition:none; }
  /* Above the header, so its perch in the corner is never behind the glass. */
  .sumlino-companion { z-index: 31; }
  /* Get Sumlino springs out just after the companion leaves its corner. */
  .has-companion .site-header.has-get-sumlino .header-cta-reveal { transition-delay: 170ms; }
  .marketing-home.has-companion main,
  .marketing-home.has-companion .site-footer,
  .js .marketing-home main,
  .js .marketing-home .site-footer { width: var(--page-column); }
}
@media (max-width: 1099px) {
  /* Reserved from first paint, before the companion module arrives. */
  .has-companion .companion-home,.js .marketing-home .companion-home { display: block; height: 98px; }
  .sumlino-companion { position: absolute; --companion-size: 76px; }
}
/* The companion arrives with the headline instead of popping in when loaded. */
.marketing-home .companion-figure { animation: companion-arrive var(--duration-very-slow) var(--ease-bounce) both; }
@keyframes companion-arrive { from { opacity: 0; transform: translateY(10px) scale(.86); } }
@media (prefers-reduced-motion: reduce) {
  .marketing-home .companion-figure { animation: none; }
  .sumlino-companion.is-blinking .client-character-eyes { animation: none; }
  .companion-body, .client-character-crown, .client-character-eyes { transform: none !important; }
  .t-icon-swap .t-icon { transition: none !important; }
}
/* Wide screens: from the first paint the corner already holds a still companion,
   and the raw Get Sumlino waits for the header script, so nothing flashes in.
   The live companion takes over at the same spot without a second arrival. */
.perch-placeholder { display: none; }
@media (min-width: 1100px) {
  .marketing-home .header-actions { position: relative; }
  .js .marketing-home:not(.has-companion) .site-header:not(.has-get-sumlino) .perch-placeholder { display: block; position: absolute; top: 50%; left: 50%; width: 44px; color: #075cff; translate: 24.4px calc(-50% - 1.7px); margin-left: -22px; pointer-events: none; animation: companion-arrive var(--duration-very-slow) var(--ease-bounce) both; }
  .perch-placeholder svg { display: block; width: 100%; height: auto; }
  .js .marketing-home .site-header:not(.has-scroll-cta) .header-cta { visibility: hidden; }
  .marketing-home .sumlino-companion.is-taking-over .companion-figure { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .perch-placeholder { animation: none !important; } }