@property --wxn-orbit-reveal {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.live-demo-orbit,
.live-demo-pedestal,
.live-demo-contact-shadow,
.wxn-live-demo-selector,
.wxn-live-demo-progress {
  display: none;
}

@media (max-width: 680px) {
  body.home section.experience#experience {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(28px, 5.2vh, 44px) 0 clamp(128px, 33vw, 152px) !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 52%, rgba(255,255,255,.92), rgba(250,247,242,.72) 42%, transparent 68%),
      linear-gradient(180deg, #faf7f2 0%, #f5efe7 100%) !important;
  }

  body.home section.experience#experience::before {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    background:
      radial-gradient(circle at 50% 70%, rgba(193,145,72,.08), transparent 26%),
      linear-gradient(118deg, transparent 7%, rgba(255,255,255,.54) 30%, transparent 52%) !important;
    content: "" !important;
    pointer-events: none !important;
  }

  body.home section.experience#experience::after {
    position: absolute !important;
    right: 8% !important;
    bottom: 3% !important;
    left: 8% !important;
    z-index: 0 !important;
    display: block !important;
    height: 18% !important;
    border-radius: 50% !important;
    background: radial-gradient(ellipse, rgba(142,102,53,.09), transparent 67%) !important;
    content: "" !important;
    filter: blur(12px) !important;
    pointer-events: none !important;
  }

  body.home section.experience#experience > .experience__bg,
  body.home section.experience#experience .experience__layout {
    display: none !important;
  }

  body.home section.experience#experience > .container {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.home section.experience#experience > .container > .section__head {
    width: calc(100% - 44px) !important;
    max-width: none !important;
    margin: 0 22px clamp(10px, 1.8vh, 16px) !important;
    padding: 0 !important;
    text-align: left !important;
  }

  body.home section.experience#experience .section__head .eyebrow {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 0 15px !important;
    color: #ae7f3d !important;
    font-family: "Manrope", var(--font-body), sans-serif !important;
    font-size: clamp(.54rem, 2vw, .7rem) !important;
    font-weight: 800 !important;
    letter-spacing: .24em !important;
    line-height: 1 !important;
    text-align: left !important;
    text-transform: uppercase !important;
  }

  body.home section.experience#experience .section__head .eyebrow__dot {
    width: 6px !important;
    height: 6px !important;
    margin-right: 8px !important;
    border-radius: 50% !important;
    background: #ba8944 !important;
  }

  body.home section.experience#experience .section__title {
    max-width: none !important;
    margin: 0 !important;
    color: #151516 !important;
    font-family: "General Sans", "Manrope", var(--font-body), sans-serif !important;
    font-size: clamp(2rem, 8.2vw, 2.55rem) !important;
    font-weight: 690 !important;
    letter-spacing: -.06em !important;
    line-height: .97 !important;
    text-align: left !important;
    text-shadow: none !important;
  }

  body.home section.experience#experience .section__title .copy-mobile {
    white-space: nowrap !important;
  }

  body.home section.experience#experience .section__intro {
    max-width: 37em !important;
    margin: 15px 0 0 !important;
    color: #706b65 !important;
    font-family: "Manrope", var(--font-body), sans-serif !important;
    font-size: clamp(.7rem, 2.75vw, .9rem) !important;
    font-weight: 500 !important;
    letter-spacing: -.025em !important;
    line-height: 1.4 !important;
    text-align: left !important;
  }

  body.home section.experience#experience .section__intro .copy-mobile {
    display: none !important;
  }

  body.home section.experience#experience .product-demo[data-live-demo-mobile] {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.home section.experience#experience .lhl-demo__copy {
    display: none !important;
  }

  body.home section.experience#experience .product-demo__switch {
    position: relative !important;
    top: 0 !important;
    z-index: 9 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: min(70vw, 280px) !important;
    max-width: none !important;
    height: clamp(48px, 13vw, 56px) !important;
    margin: clamp(20px, 5.5vw, 26px) auto 0 !important;
    padding: 4px !important;
    overflow: hidden !important;
    border: 1px solid rgba(179,132,65,.18) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 12px 30px rgba(69,48,25,.1), inset 0 1px 0 rgba(255,255,255,.98) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
  }

  body.home section.experience#experience .product-demo__switch button {
    display: flex !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #292624 !important;
    font-family: "Manrope", var(--font-body), sans-serif !important;
    font-size: clamp(.62rem, 2.75vw, .78rem) !important;
    font-weight: 760 !important;
    letter-spacing: -.035em !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: color .28s ease, background .34s cubic-bezier(.22,1,.36,1), transform .28s ease !important;
  }

  body.home section.experience#experience .product-demo__switch button.is-active {
    background: #171719 !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(17,17,19,.2), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  body.home section.experience#experience .product-demo__switch button:active {
    transform: scale(.985) !important;
  }

  body.home section.experience#experience .product-demo__switch button img {
    flex: 0 0 auto !important;
    width: clamp(28px, 8vw, 34px) !important;
    height: clamp(28px, 8vw, 34px) !important;
    padding: 3px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.94) !important;
    object-fit: contain !important;
    box-shadow: 0 4px 11px rgba(52,39,24,.09) !important;
  }

  body.home section.experience#experience .product-demo .lhl-demo {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.home section.experience#experience .live-demo-stage {
    --phone-bottom: -3%;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: clamp(570px, 150vw, 650px) !important;
    min-height: 0 !important;
    margin: clamp(-89px, -20.7vw, -73px) 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    perspective: 950px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform-style: preserve-3d !important;
  }

  body.home section.experience#experience .live-demo-orbit {
    --wxn-orbit-reveal: 100%;
    position: absolute !important;
    z-index: 1 !important;
    top: var(--orbit-top, 10%) !important;
    left: 50% !important;
    display: block !important;
    width: var(--orbit-size, min(114vw, 510px)) !important;
    aspect-ratio: 1 !important;
    margin: 0 !important;
    opacity: 1 !important;
    filter: drop-shadow(0 9px 18px rgba(174,124,53,.08)) !important;
    transform: translate3d(-50%, 0, 0) !important;
    -webkit-mask-image: conic-gradient(from -90deg, #000 0 var(--wxn-orbit-reveal), transparent var(--wxn-orbit-reveal) 100%) !important;
    mask-image: conic-gradient(from -90deg, #000 0 var(--wxn-orbit-reveal), transparent var(--wxn-orbit-reveal) 100%) !important;
    pointer-events: none !important;
  }

  body.home section.experience#experience .live-demo-orbit > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  body.home section.experience#experience .live-demo-orbit__energy {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    width: 4px !important;
    height: 4px !important;
    margin: -2px 0 0 -2px !important;
    border-radius: 50% !important;
    background: #e8b965 !important;
    box-shadow: 0 0 7px rgba(224,169,80,.88), 0 0 13px rgba(224,169,80,.34) !important;
    opacity: 0 !important;
    transform: rotate(-90deg) translateY(calc(var(--orbit-size, 510px) / -2 + 8px)) !important;
    transform-origin: 2px 2px !important;
  }

  body.home section.experience#experience .live-demo-pedestal {
    position: absolute !important;
    z-index: 2 !important;
    bottom: -44% !important;
    right: 0 !important;
    left: 0 !important;
    display: block !important;
    width: min(102vw, 440px) !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 auto !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transform-origin: 50% 61% !important;
    pointer-events: none !important;
    user-select: none !important;
  }

  body.home section.experience#experience .live-demo-contact-shadow {
    position: absolute !important;
    z-index: 2 !important;
    bottom: calc(var(--phone-bottom) - 5px) !important;
    left: 50% !important;
    display: block !important;
    width: 35% !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: radial-gradient(ellipse, rgba(46,35,24,.28), rgba(56,40,24,.06) 54%, transparent 75%) !important;
    filter: blur(3px) !important;
    opacity: .82 !important;
    transform: translateX(-50%) scaleX(.92) !important;
    pointer-events: none !important;
  }

  body.home section.experience#experience .live-demo-phone {
    position: absolute !important;
    z-index: 3 !important;
    bottom: var(--phone-bottom) !important;
    left: 50% !important;
    display: block !important;
    width: min(68vw, 286px) !important;
    aspect-ratio: .5 !important;
    margin: 0 !important;
    transform: translate3d(-50%, 0, 0) !important;
    transform-origin: 50% 100% !important;
    transform-style: preserve-3d !important;
    will-change: transform, opacity, filter !important;
  }

  body.home section.experience#experience .live-demo-phone .lhl-demo__phone {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 clamp(48px, 13vw, 58px) !important;
    overflow: hidden !important;
    contain: paint !important;
    border: 0 !important;
    border-radius: clamp(29px, 8vw, 38px) !important;
    background: #f7f7f5 !important;
    box-shadow: 0 23px 36px rgba(26,22,18,.22), 0 4px 8px rgba(23,19,15,.17) !important;
    transform: none !important;
    rotate: none !important;
    zoom: 1 !important;
  }

  body.home section.experience#experience .lhl-demo__phone::before {
    display: none !important;
  }

  body.home section.experience#experience .lhl-demo__phone > .lhl-demo__mockup {
    position: absolute !important;
    z-index: 50 !important;
    top: -11.5% !important;
    left: -80.5% !important;
    display: block !important;
    width: 262% !important;
    max-width: none !important;
    height: 125% !important;
    margin: 0 !important;
    object-fit: fill !important;
    pointer-events: none !important;
    user-select: none !important;
  }

  body.home section.experience#experience .lhl-demo__phone > header,
  body.home section.experience#experience .lhl-demo__phone > .demo-screen {
    width: calc(100% - 8px) !important;
    margin-inline: 4px !important;
  }

  body.home section.experience#experience .lhl-demo__phone > header {
    height: clamp(48px, 13vw, 57px) !important;
    margin-top: 0 !important;
    padding: 12px 10px 4px !important;
    overflow: hidden !important;
    border-radius: clamp(27px, 7vw, 34px) clamp(27px, 7vw, 34px) 0 0 !important;
    clip-path: inset(0 round clamp(27px, 7vw, 34px) clamp(27px, 7vw, 34px) 0 0) !important;
  }

  body.home section.experience#experience .lhl-demo__phone > header > img:first-child {
    width: clamp(70px, 22vw, 98px) !important;
    height: 25px !important;
    transform: translateX(-4px) !important;
  }

  body.home section.experience#experience .lhl-demo__bell,
  body.home section.experience#experience .lhl-demo__avatar {
    width: clamp(25px, 7vw, 31px) !important;
    height: clamp(25px, 7vw, 31px) !important;
  }

  body.home section.experience#experience .lhl-demo__phone > .demo-screen {
    position: relative !important;
    height: calc(100% - clamp(48px, 13vw, 57px)) !important;
    overflow: hidden !important;
    transform-origin: 50% 50% !important;
  }

  body.home section.experience#experience .lhl-demo__phone > .demo-screen.is-screen-enter {
    animation: wxnLiveScreenIn .36s cubic-bezier(.22,1,.36,1) both !important;
  }

  body.home section.experience#experience .lhl-demo__phone > .demo-screen.is-screen-exit {
    position: absolute !important;
    top: clamp(48px, 13vw, 57px) !important;
    left: 4px !important;
    z-index: 4 !important;
    display: block !important;
    animation: wxnLiveScreenOut .21s cubic-bezier(.4,0,.2,1) both !important;
  }

  body.home section.experience#experience .lhl-demo__phone > nav {
    right: 9px !important;
    bottom: 7px !important;
    left: 9px !important;
    z-index: 6 !important;
    height: clamp(45px, 12vw, 55px) !important;
    padding: 6px 4px !important;
    border-radius: 18px !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector {
    position: relative !important;
    z-index: 7 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 86px minmax(0,1fr) !important;
    align-items: center !important;
    width: calc(100% - 24px) !important;
    height: clamp(104px, 27vw, 118px) !important;
    margin: -4px 12px 0 !important;
    padding: 8px 12px !important;
    overflow: visible !important;
    border: 1px solid rgba(179,132,65,.38) !important;
    border-radius: 48% 48% 37% 37% / 30% 30% 42% 42% !important;
    background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(250,246,240,.73)) !important;
    box-shadow: 0 16px 34px rgba(74,54,33,.09), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(185,137,69,.13) !important;
    backdrop-filter: blur(14px) !important;
    transform-origin: 50% 50% !important;
    touch-action: pan-y !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector__track {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector__track path {
    fill: none !important;
    stroke: #c4934c !important;
    stroke-width: 1.2 !important;
    stroke-linecap: round !important;
    stroke-dasharray: .12 .88 !important;
    stroke-dashoffset: 1 !important;
    opacity: 0 !important;
    vector-effect: non-scaling-stroke !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector.is-energy-forward .wxn-live-demo-selector__track path {
    animation: wxnSelectorEnergyForward .58s cubic-bezier(.55,.08,.2,1) both !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector.is-energy-back .wxn-live-demo-selector__track path {
    animation: wxnSelectorEnergyBack .58s cubic-bezier(.55,.08,.2,1) both !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector__side {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 7px 3px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    color: #262321 !important;
    font-family: "Manrope", var(--font-body), sans-serif !important;
    opacity: .64 !important;
    cursor: pointer !important;
    transition: opacity .24s ease, transform .3s cubic-bezier(.22,1,.36,1) !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector__side.is-active {
    opacity: 1 !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector__side:active {
    transform: scale(.985) !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector__side:focus-visible,
  body.home section.experience#experience .wxn-live-demo-selector__dial:focus-visible {
    outline: 1px solid rgba(184,136,66,.7) !important;
    outline-offset: 3px !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector__side > span:not(.wxn-live-demo-selector__orb) {
    display: block !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector__side--bookiq > span:not(.wxn-live-demo-selector__orb) {
    text-align: right !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector__side strong,
  body.home section.experience#experience .wxn-live-demo-selector__side small {
    display: block !important;
    white-space: nowrap !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector__side strong {
    font-size: clamp(.68rem, 2.8vw, .88rem) !important;
    font-weight: 780 !important;
    letter-spacing: -.035em !important;
    line-height: 1.15 !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector__side small {
    margin-top: 4px !important;
    color: #a87a3b !important;
    font-size: clamp(.54rem, 2.05vw, .68rem) !important;
    font-weight: 600 !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector__orb {
    display: grid !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    place-items: center !important;
    border: 1px solid rgba(184,136,66,.28) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, #d9a65e 0 9%, #fff 11% 49%, #f2e7d8 51% 100%) !important;
    box-shadow: 0 5px 12px rgba(104,71,31,.08), inset 0 0 0 4px rgba(255,255,255,.7) !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector__dial {
    --drag-x: 0px;
    position: relative !important;
    z-index: 4 !important;
    display: grid !important;
    width: 78px !important;
    height: 78px !important;
    margin: 0 auto !important;
    place-items: center !important;
    border: 1px solid rgba(183,132,62,.64) !important;
    border-radius: 50% !important;
    outline: none !important;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,235,225,.94)) !important;
    box-shadow: 0 12px 22px rgba(69,48,26,.13), inset 0 2px 3px rgba(255,255,255,.96), inset 0 -2px 5px rgba(155,111,55,.11) !important;
    transform: translateX(calc(var(--dial-rest, -4px) + var(--drag-x))) rotateZ(var(--dial-rotate, -1deg)) !important;
    transform-style: preserve-3d !important;
    transition: transform .36s cubic-bezier(.7,0,.2,1), box-shadow .22s ease !important;
    touch-action: none !important;
    cursor: grab !important;
  }

  body.home section.experience#experience .product-demo[data-demo-product="bookiq"] .wxn-live-demo-selector__dial {
    --dial-rest: 4px;
    --dial-rotate: 1deg;
  }

  body.home section.experience#experience .wxn-live-demo-selector__dial.is-dragging {
    transition: box-shadow .18s ease !important;
    cursor: grabbing !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector__dial.is-pressing {
    box-shadow: 0 8px 15px rgba(69,48,26,.12), inset 0 2px 3px rgba(255,255,255,.96), inset 0 -2px 5px rgba(155,111,55,.14) !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector__dial-ring {
    position: absolute !important;
    inset: 6px !important;
    display: block !important;
    border: 1px solid rgba(193,142,71,.31) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector__dial img {
    position: absolute !important;
    z-index: 2 !important;
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    padding: 5px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    background: rgba(255,255,255,.78) !important;
    opacity: 0 !important;
    transform: scale(.92) !important;
    transition: opacity .2s ease, transform .26s cubic-bezier(.22,1,.36,1) !important;
    pointer-events: none !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector__dial img.is-active {
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  body.home section.experience#experience .wxn-live-demo-progress {
    position: relative !important;
    z-index: 6 !important;
    display: flex !important;
    width: max-content !important;
    margin: 12px auto 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
  }

  body.home section.experience#experience .wxn-live-demo-progress i {
    display: block !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: #ded6ca !important;
    transition: width .25s cubic-bezier(.22,1,.36,1), background .22s ease !important;
  }

  body.home section.experience#experience .wxn-live-demo-progress i.is-active {
    width: 13px !important;
    background: #b88946 !important;
  }

  body.home section.experience#experience .product-demo.is-live-booted:not(.is-live-visible) .live-demo-pedestal {
    opacity: 0 !important;
    filter: none !important;
    transform: translateY(14px) scale(.91) !important;
  }

  body.home section.experience#experience .product-demo.is-live-booted:not(.is-live-visible) .live-demo-orbit {
    --wxn-orbit-reveal: 0%;
    opacity: 0 !important;
  }

  body.home section.experience#experience .product-demo.is-live-booted:not(.is-live-visible) .live-demo-phone {
    opacity: 0 !important;
    filter: blur(1.2px) !important;
    transform: translate3d(-50%,22px,-45px) scale(.91) rotateX(2deg) !important;
  }

  body.home section.experience#experience .product-demo.is-live-booted:not(.is-live-visible) .live-demo-contact-shadow {
    opacity: 0 !important;
    transform: translateX(-50%) scaleX(.7) !important;
  }

  body.home section.experience#experience .product-demo.is-live-booted:not(.is-live-visible) .wxn-live-demo-selector,
  body.home section.experience#experience .product-demo.is-live-booted:not(.is-live-visible) .wxn-live-demo-progress {
    opacity: 0 !important;
    transform: translateY(14px) scaleX(.94) !important;
  }

  body.home section.experience#experience .product-demo.is-live-visible .live-demo-pedestal {
    animation: wxnPedestalReveal .56s cubic-bezier(.16,1,.3,1) both !important;
  }

  body.home section.experience#experience .product-demo.is-live-visible .live-demo-orbit {
    animation: wxnOrbitReveal .92s cubic-bezier(.65,0,.35,1) .12s both !important;
  }

  body.home section.experience#experience .product-demo.is-live-visible .live-demo-orbit__energy {
    animation: wxnOrbitEnergy .9s cubic-bezier(.65,0,.35,1) .13s both !important;
  }

  body.home section.experience#experience .product-demo.is-live-visible .live-demo-phone {
    animation: wxnPhoneReveal .78s cubic-bezier(.16,1,.3,1) .24s both !important;
  }

  body.home section.experience#experience .product-demo.is-live-visible .live-demo-contact-shadow {
    animation: wxnContactShadow .42s cubic-bezier(.16,1,.3,1) .56s both !important;
  }

  body.home section.experience#experience .product-demo.is-live-visible .wxn-live-demo-selector {
    animation: wxnSelectorReveal .52s cubic-bezier(.16,1,.3,1) .85s both !important;
  }

  body.home section.experience#experience .product-demo.is-live-visible .wxn-live-demo-progress {
    animation: wxnSelectorReveal .42s cubic-bezier(.16,1,.3,1) 1s both !important;
  }

  body.home section.experience#experience .product-demo.is-orbit-forward .live-demo-orbit__energy {
    animation: wxnOrbitSwitchForward .62s cubic-bezier(.55,.08,.2,1) both !important;
  }

  body.home section.experience#experience .product-demo.is-orbit-back .live-demo-orbit__energy {
    animation: wxnOrbitSwitchBack .62s cubic-bezier(.55,.08,.2,1) both !important;
  }

  body.home section.experience#experience .product-demo.is-orbit-forward .live-demo-orbit,
  body.home section.experience#experience .product-demo.is-orbit-back .live-demo-orbit {
    animation: wxnOrbitReplay .72s cubic-bezier(.65,0,.35,1) both !important;
  }

  body.home section.experience#experience .product-demo.is-orbit-resetting .live-demo-orbit,
  body.home section.experience#experience .product-demo.is-orbit-resetting .live-demo-orbit__energy {
    animation: none !important;
  }

  body.home section.experience#experience .product-demo.is-device-forward .live-demo-phone {
    animation: wxnDeviceResponseForward .34s cubic-bezier(.22,1,.36,1) both !important;
  }

  body.home section.experience#experience .product-demo.is-device-back .live-demo-phone {
    animation: wxnDeviceResponseBack .34s cubic-bezier(.22,1,.36,1) both !important;
  }
}

@keyframes wxnPedestalReveal {
  0% { opacity: 0; transform: translateY(14px) scale(.91); }
  78% { opacity: 1; transform: translateY(.5px) scaleY(.997); }
  100% { opacity: 1; transform: none; }
}

@keyframes wxnOrbitReveal {
  0% { --wxn-orbit-reveal: 0%; opacity: 0; }
  12% { opacity: 1; }
  100% { --wxn-orbit-reveal: 100%; opacity: 1; }
}

@keyframes wxnOrbitReplay {
  0% { --wxn-orbit-reveal: 0%; opacity: .28; }
  18% { opacity: 1; }
  100% { --wxn-orbit-reveal: 100%; opacity: 1; }
}

@keyframes wxnOrbitEnergy {
  0% { opacity: 0; transform: rotate(-90deg) translateY(calc(var(--orbit-size, 510px) / -2 + 8px)) scale(.8); }
  12% { opacity: .92; }
  86% { opacity: .84; }
  100% { opacity: 0; transform: rotate(270deg) translateY(calc(var(--orbit-size, 510px) / -2 + 8px)) scale(1); }
}

@keyframes wxnPhoneReveal {
  0% { opacity: 0; filter: blur(1.2px); transform: translate3d(-50%,22px,-45px) scale(.91) rotateX(2deg); }
  78% { opacity: 1; filter: blur(0); transform: translate3d(-50%,-3px,0) scale(1) rotateX(0); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(-50%,0,0) scale(1) rotateX(0); }
}

@keyframes wxnContactShadow {
  0% { opacity: .15; filter: blur(6px); transform: translateX(-50%) scaleX(.7); }
  100% { opacity: .82; filter: blur(3px); transform: translateX(-50%) scaleX(.92); }
}

@keyframes wxnSelectorReveal {
  0% { opacity: 0; transform: translateY(14px) scaleX(.94); }
  100% { opacity: 1; transform: translateY(0) scaleX(1); }
}

@keyframes wxnLiveScreenOut {
  to { opacity: 0; filter: blur(.6px); transform: translateX(-10px) scale(.99); }
}

@keyframes wxnLiveScreenIn {
  from { opacity: 0; filter: blur(.6px); transform: translateX(10px) scale(.99); }
  to { opacity: 1; filter: blur(0); transform: translateX(0) scale(1); }
}

@keyframes wxnSelectorEnergyForward {
  0% { opacity: 0; stroke-dashoffset: 1; }
  18% { opacity: .95; }
  78% { opacity: .9; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes wxnSelectorEnergyBack {
  0% { opacity: 0; stroke-dashoffset: 0; }
  18% { opacity: .95; }
  78% { opacity: .9; }
  100% { opacity: 0; stroke-dashoffset: 1; }
}

@keyframes wxnOrbitSwitchForward {
  0% { opacity: 0; transform: rotate(-88deg) translateY(calc(var(--orbit-size, 510px) / -2 + 8px)) scale(.8); }
  18%,76% { opacity: .9; }
  100% { opacity: 0; transform: rotate(272deg) translateY(calc(var(--orbit-size, 510px) / -2 + 8px)) scale(1); }
}

@keyframes wxnOrbitSwitchBack {
  0% { opacity: 0; transform: rotate(272deg) translateY(calc(var(--orbit-size, 510px) / -2 + 8px)) scale(.8); }
  18%,76% { opacity: .9; }
  100% { opacity: 0; transform: rotate(-88deg) translateY(calc(var(--orbit-size, 510px) / -2 + 8px)) scale(1); }
}

@keyframes wxnDeviceResponseForward {
  0%,100% { transform: translate3d(-50%,0,0) rotateY(0); }
  50% { transform: translate3d(calc(-50% - 1px),0,0) rotateY(-.6deg); }
}

@keyframes wxnDeviceResponseBack {
  0%,100% { transform: translate3d(-50%,0,0) rotateY(0); }
  50% { transform: translate3d(calc(-50% + 1px),0,0) rotateY(.6deg); }
}

@media (max-width: 680px) and (max-height: 740px) {
  body.home section.experience#experience {
    padding-top: 22px !important;
  }

  body.home section.experience#experience .section__head .eyebrow {
    margin-bottom: 10px !important;
  }

  body.home section.experience#experience .section__intro {
    margin-top: 10px !important;
  }

  body.home section.experience#experience .live-demo-stage {
    height: clamp(545px, 144vw, 610px) !important;
  }

  body.home section.experience#experience .wxn-live-demo-selector {
    height: 96px !important;
  }
}

@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  body.home section.experience#experience .product-demo *,
  body.home section.experience#experience .product-demo *::before,
  body.home section.experience#experience .product-demo *::after {
    scroll-behavior: auto !important;
  }

  body.home section.experience#experience .live-demo-orbit {
    --wxn-orbit-reveal: 100% !important;
    opacity: 1 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body.home section.experience#experience .live-demo-pedestal,
  body.home section.experience#experience .live-demo-phone,
  body.home section.experience#experience .live-demo-contact-shadow,
  body.home section.experience#experience .wxn-live-demo-selector,
  body.home section.experience#experience .wxn-live-demo-progress {
    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }

  body.home section.experience#experience .live-demo-pedestal { transform: none !important; }
  body.home section.experience#experience .live-demo-phone { transform: translate3d(-50%,0,0) !important; }
  body.home section.experience#experience .live-demo-contact-shadow { transform: translateX(-50%) scaleX(.92) !important; }
  body.home section.experience#experience .wxn-live-demo-selector,
  body.home section.experience#experience .wxn-live-demo-progress { transform: none !important; }
  body.home section.experience#experience .live-demo-orbit__energy,
  body.home section.experience#experience .wxn-live-demo-selector__track { display: none !important; }
  body.home section.experience#experience .demo-screen.is-screen-enter { animation: wxnReducedScreenIn .16s ease both !important; }
  body.home section.experience#experience .demo-screen.is-screen-exit { animation: wxnReducedScreenOut .14s ease both !important; }
}

@keyframes wxnReducedScreenIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wxnReducedScreenOut { from { opacity: 1; } to { opacity: 0; } }