/* Movement never changes the layout or hides content when JavaScript is off. */
.hero-device .ref-phone { animation: none; }
.ui-progress span { transform-origin: left center; }
[data-price] { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .reference-button, .button, .hero-secondary, .store-link {
    transition: transform .25s ease, background-color .25s ease,
      border-color .25s ease, box-shadow .25s ease;
  }
  .reference-button > span, .hero-secondary > span, .store-link > img {
    transition: transform .3s cubic-bezier(.22,1,.36,1);
  }
  .reference-button:active, .button:active, .hero-secondary:active, .store-link:active {
    transform: scale(.97);
  }
  .feature-card, .showcase-card, .price-card, .team-cards article {
    transition: border-color .3s ease, box-shadow .3s ease;
  }
  .benefit-card .icon-box, .showcase-device .ref-phone, .partner-logo-bar img {
    transition: transform .65s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  }
  .faq-list summary > span { transition: transform .25s ease, color .25s ease; }
  .faq-list details[open] summary > span { transform: rotate(45deg); color: #fddb6b; }
  .faq-list details[open] > div { animation: answer-arrive .3s ease-out both; }
  .nav-links.open { animation: menu-arrive .25s ease-out both; }
  .billing-switch button { transition: background-color .25s ease, color .25s ease; }
  @keyframes answer-arrive {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes menu-arrive {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .reference-button:hover, .button:hover, .hero-secondary:hover, .store-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 24px #fddb6b12;
  }
  .reference-button:hover > span, .hero-secondary:hover > span { transform: translate(2px,-2px); }
  .store-link:hover > img { transform: scale(1.1) rotate(-5deg); }
  .feature-card:hover, .showcase-card:hover, .price-card:hover, .team-cards article:hover {
    border-color: #75643d;
    box-shadow: 0 12px 40px #0004;
  }
  .benefit-card:hover .icon-box { transform: translateY(-4px) rotate(-5deg); }
  .showcase-card:hover .showcase-device .ref-phone { transform: translateY(-12px); }
  .partner-logo-bar img:hover { transform: translateY(-3px); opacity: 1; }
}

/* The selected billing pill travels between the real buttons. */
.billing-switch{position:relative;isolation:isolate}
.billing-animated::before{content:"";position:absolute;z-index:-1;left:0;top:var(--billing-top);width:var(--billing-width);height:var(--billing-height);transform:translateX(var(--billing-left));background:#fddb6b;border-radius:8px;box-shadow:0 3px 16px #fddb6b1c;pointer-events:none}
.billing-animated button[aria-pressed=true]{background:transparent}
.price{flex-wrap:wrap;row-gap:4px}
.price-amount{position:relative;display:inline-block;flex-shrink:0;overflow:hidden;vertical-align:bottom;padding-block:2px;line-height:1.15}
.price-amount [data-price]{display:block;line-height:1.15;font-variant-numeric:tabular-nums}
.price-previous{position:absolute;inset:2px 0 auto;opacity:0;font-size:46px;font-weight:700;line-height:1.15;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.motion-card{position:relative;isolation:isolate}
.motion-card::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(340px circle at var(--pointer-x,50%) var(--pointer-y,25%),#fddb6b15,transparent 75%)}
.price-card>.reference-button{position:relative;isolation:isolate;overflow:hidden;gap:12px}
.price-card>.reference-button::after{content:"↗";display:inline-block;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.reference-button{position:relative;isolation:isolate;overflow:hidden}
.reference-button::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff0bc;clip-path:circle(0% at 100% 50%);pointer-events:none}
.enterprise-plan .reference-button::before{background:#343025}

@media(prefers-reduced-motion:no-preference){
  .billing-animated::before{transition:transform .5s cubic-bezier(.22,1.2,.36,1),width .4s ease}
  .reference-button::before{transition:clip-path .55s cubic-bezier(.65,0,.25,1)}
  .reference-button:focus-visible::before{clip-path:circle(150% at 100% 50%)}
  .motion-card{transition:transform .55s cubic-bezier(.22,1,.36,1),border-color .3s ease,box-shadow .4s ease}
  .motion-card::before{transition:opacity .35s ease}
  .price-card li{transition:transform .4s cubic-bezier(.22,1,.36,1),color .3s ease;transition-delay:var(--item-delay,0ms)}
  .price-card:focus-within{border-color:#fddb6b;box-shadow:0 0 0 1px #fddb6b35,0 20px 50px #0008}
  .price-card:focus-within>.reference-button::after{transform:translate(3px,-3px)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .motion-card.pointer-active{transform:perspective(1100px) translateY(-6px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));border-color:#ac9456;box-shadow:0 22px 55px #0009,0 0 24px #fddb6b09}
  .motion-card.pointer-active::before{opacity:1}
  .price-card:hover li{transform:translateX(4px);color:#fff0bc}
  .reference-button:hover{background:#fddb6b}
  .reference-button:hover::before{clip-path:circle(150% at 100% 50%)}
  .price-card:hover>.reference-button::after{transform:translate(3px,-3px)}
  .price-card:hover>.reference-button{box-shadow:0 0 22px #fddb6b20}
  .showcase-card:hover .showcase-device .ref-phone{transform:translateY(-10px) rotate(-2deg)}
  .showcase-card:nth-child(2):hover .showcase-device .ref-phone{transform:translateY(-10px) rotate(2deg)}
}
@media(max-width:1000px){.price-previous{font-size:40px}}
@media(max-width:900px){.price-previous{font-size:34px}}
@media(max-width:680px){.price-previous{font-size:48px}}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* A native details element stays open until the closing motion completes. */
.faq-list .faq-motion>div{animation:none!important}
.faq-list .faq-animating{overflow:hidden}
.faq-list .faq-motion[data-expanding=false] summary>span{transform:rotate(0deg);color:#aaa}