/* Three coordinated levers lift one company. Scoped to the comparison graphic. */
.seo-lift {
  --lift-accent: var(--purple);
  --lift-line: color-mix(in srgb, var(--purple) 22%, transparent);
  margin: 46px auto 50px;
  max-width: 900px;
  color: var(--white);
}
.seo-lift-stage { position: relative; height: 360px; isolation: isolate; }
.seo-lift-stage::before {
  content: ""; position: absolute; inset: 0 14% 10%; z-index: -1;
  background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--purple) 12%, transparent), transparent 66%);
}
.seo-lift-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seo-lift-wires path { fill: none; stroke: var(--lift-line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.seo-lift-wires .seo-lift-signal { stroke: var(--lift-accent); stroke-dasharray: 9 160; stroke-linecap: round; opacity: 0; }
.seo-lift-routes-mobile { display: none; }
.seo-lift-web {
  position: absolute; top: 20px; left: 50%; width: 232px; height: 146px;
  box-sizing: border-box; transform: translateX(-50%); border-radius: 18px;
  background: #6b269c; color: #fff; overflow: hidden;
  box-shadow: 0 22px 45px #6b269c22;
}
.seo-lift-browser { height: 28px; padding: 0 14px; display: flex; align-items: center; gap: 5px; border-bottom: 1px solid #ffffff30; }
.seo-lift-browser i { width: 4px; height: 4px; border-radius: 50%; background: #ffffff90; }
.seo-lift-browser span { width: 60%; height: 5px; margin-left: 9px; border-radius: 4px; background: #ffffff22; }
.seo-lift-web-body { padding: 19px 22px; }
.seo-lift-web-name { display: block; font: 400 29px/1.2 Caviar, sans-serif; letter-spacing: -.03em; }
.seo-lift-web-caption { display: block; margin-top: 6px; font: 400 12px/1.4 DM, sans-serif; color: #f3e5fc; }
.seo-lift-web-lines { display: flex; gap: 6px; margin-top: 15px; }
.seo-lift-web-lines i { width: 47%; height: 5px; background: #ffffff26; border-radius: 3px; }
.seo-lift-web-lines i + i { width: 24%; }
.seo-lift-destination {
  position: absolute; top: 54px; display: flex; flex-direction: column; align-items: center; gap: 9px;
  transform: translateX(-50%); font: 400 17px/1.2 Caviar, sans-serif; color: var(--white);
}
.seo-lift-destination--search { left: 16.6667%; }
.seo-lift-destination--ai { left: 83.3333%; }
.seo-lift-destination svg { width: 25px; height: 25px; fill: none; stroke: var(--lift-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.seo-lift-lever { position: absolute; top: 65%; height: 25%; width: 4px; transform: translateX(-50%); border-radius: 6px; background: var(--lift-line); }
.seo-lift-lever--one { left: 16.6667%; --lift-delay: .15s; }
.seo-lift-lever--two { left: 50%; --lift-delay: .55s; }
.seo-lift-lever--three { left: 83.3333%; --lift-delay: .95s; }
.seo-lift-lever::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--lift-accent); transform-origin: bottom; }
.seo-lift-knob {
  position: absolute; top: 0; left: 50%; width: 46px; height: 23px;
  transform: translate(-50%, -50%); border: 1px solid var(--lift-accent); border-radius: 20px;
  background: var(--lift-accent); display: grid; place-items: center;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--purple) 20%, transparent);
}
.seo-lift-knob::after { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--bg-deep); }
.seo-lift-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; gap: 12px; }
.seo-lift-number { display: block; margin-bottom: 9px; font: 400 20px/1 Fraunces, serif; color: var(--lift-accent); }
.seo-lift-labels strong { display: block; font: 400 24px/1.2 Caviar, sans-serif; color: var(--white); }
.seo-lift-labels small { display: block; margin-top: 8px; font: 400 13px/1.5 DM, sans-serif; color: var(--gray); }
.seo-lift.js-motion:not(.is-started) .seo-lift-knob { transform: translate(-50%, 70px); }
.seo-lift.js-motion:not(.is-started) .seo-lift-lever::before { transform: scaleY(.04); }
.seo-lift.js-motion:not(.is-started) .seo-lift-web { transform: translate(-50%, 42px); }
.seo-lift.js-motion:not(.is-started) .seo-lift-destination { opacity: 0; }
.seo-lift.js-motion .seo-lift-knob { transition: transform .95s cubic-bezier(.16,1,.3,1) var(--lift-delay); }
.seo-lift.js-motion .seo-lift-lever::before { transition: transform .95s cubic-bezier(.16,1,.3,1) var(--lift-delay); }
.seo-lift.js-motion .seo-lift-web { transition: transform 1.2s cubic-bezier(.16,1,.3,1) .8s; }
.seo-lift.js-motion .seo-lift-destination { transition: opacity .8s ease 1.65s; }
.seo-lift.is-started .seo-lift-signal { opacity: .65; animation: seo-lift-flow 5s linear 2s infinite; }
.seo-lift.is-started .seo-lift-signal--two { animation-delay: 2.4s; }
.seo-lift.is-started .seo-lift-signal--three { animation-delay: 2.8s; }
.seo-lift.is-outside .seo-lift-signal { animation-play-state: paused; }
@keyframes seo-lift-flow { to { stroke-dashoffset: -169; } }
@media (max-width: 600px) {
  .seo-lift-routes-desktop { display: none; }
  .seo-lift-routes-mobile { display: block; }
  .seo-lift { margin: 36px auto 38px; }
  .seo-lift-stage { height: 306px; }
  .seo-lift-web { top: 14px; width: 152px; height: 126px; border-radius: 14px; }
  .seo-lift-web-body { padding: 16px 14px; }
  .seo-lift-web-name { font-size: 22px; }
  .seo-lift-web-caption { font-size: 10px; }
  .seo-lift-web-lines { margin-top: 12px; }
  .seo-lift-destination { top: 22px; font-size: 12px; gap: 7px; }
  .seo-lift-destination--search { left: 8%; }
  .seo-lift-destination--ai { left: 92%; white-space: nowrap; }
  .seo-lift-destination svg { width: 22px; height: 22px; }
  .seo-lift-labels { gap: 6px; }
  .seo-lift-number { font-size: 17px; }
  .seo-lift-labels strong { font-size: 17px; }
  .seo-lift-labels small { font-size: 11px; line-height: 1.4; }
  .seo-lift-knob { width: 38px; height: 21px; }
  .seo-lift.js-motion:not(.is-started) .seo-lift-knob { transform: translate(-50%, 55px); }
}
@media (max-width: 380px) {
  .seo-lift-web { width: 132px; }
  .seo-lift-web-name { font-size: 20px; }
  .seo-lift-web-caption { font-size: 9.5px; }
  .seo-lift-destination { font-size: 11px; text-align: center; }
  .seo-lift-destination--ai { width: 62px; white-space: normal; }
  .seo-lift-labels strong { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .seo-lift.js-motion .seo-lift-knob { transform: translate(-50%, -50%) !important; }
  .seo-lift.js-motion .seo-lift-lever::before { transform: none !important; }
  .seo-lift.js-motion .seo-lift-web { transform: translateX(-50%) !important; }
  .seo-lift.js-motion .seo-lift-destination { opacity: 1 !important; }
  .seo-lift *, .seo-lift *::before { transition: none !important; animation: none !important; }
  .seo-lift .seo-lift-signal { opacity: 0 !important; }
}
body.effects-paused .seo-lift *, body.effects-paused .seo-lift *::before { transition: none !important; animation: none !important; }
body.effects-paused .seo-lift.js-motion .seo-lift-knob { transform: translate(-50%, -50%); }
body.effects-paused .seo-lift.js-motion .seo-lift-lever::before { transform: none; }
body.effects-paused .seo-lift.js-motion .seo-lift-web { transform: translateX(-50%); }
body.effects-paused .seo-lift.js-motion .seo-lift-destination { opacity: 1; }