/* Motion stays decorative: hidden panels/disclosures retain their native semantics. */
:root{--motion-feedback:160ms;--motion-state:360ms;--motion-ease:cubic-bezier(.16,1,.3,1)}
a,button,summary{transition:color var(--motion-feedback),background-color var(--motion-feedback),border-color var(--motion-feedback),box-shadow var(--motion-state),opacity var(--motion-feedback),text-decoration-color var(--motion-feedback)}
a{text-decoration-color:currentColor}
:is(.site-header__nav,.site-footer__navigation) a{text-decoration:underline;text-decoration-color:transparent}
:is(.site-header__nav,.site-footer__navigation) a:is(:hover,:focus-visible){text-decoration:underline;text-decoration-color:currentColor}
:where(.site-header__icon,.site-header__logo,.apps-section__stores a,.button__icon,.text-link>.icon,.support-card__arrow img){transition:translate var(--motion-state) var(--motion-ease),opacity var(--motion-feedback),background-color var(--motion-feedback)}
:where(.site-header__icon,.site-header__logo,.apps-section__stores a):is(:hover,:focus-visible){opacity:.8}
.button:is(:hover,:focus-visible){background-color:rgb(255 255 255 / .8);box-shadow:none}
.button--action:is(:hover,:focus-visible){background-color:color-mix(in srgb,var(--color-action-blue) 80%,transparent)}
.text-link:is(:hover,:focus-visible)>.icon,.support-card:is(:hover,:focus-within) .support-card__arrow img{translate:4px 0}
:where(.button,.contact-form__submit,button):not(:disabled):active{opacity:.8}
:where(.getting-started__item h4,.getting-started__item>span,.getting-started__icon,.support-card__title,.support-card__number,.contact-form__label){transition:color var(--motion-feedback),opacity var(--motion-feedback)}
:where(.contact-form input,.contact-form select,.contact-form textarea){transition:background-color var(--motion-feedback),border-color var(--motion-feedback),color var(--motion-feedback)}
:where(.contact-form__submit,.site-header__apps):is(:hover,:focus-visible){background-color:rgb(255 255 255 / .8)}
.faq-item summary:is(:hover,:focus-visible),a.faq-item:is(:hover,:focus-visible){color:var(--color-action-blue)}
.faq-item__sign{transition:transform var(--motion-state) var(--motion-ease)}
.device-tab::after,.apps-section__tabs [role="tab"]::after{animation:tab-marker var(--motion-state) var(--motion-ease) both;transform-origin:left}
.ecosystem-device__point{transition:scale var(--motion-state) var(--motion-ease)}
.ecosystem-device__trigger:is(:hover,:focus-visible) .ecosystem-device__point{scale:1.08}
.ecosystem-device__note:not([hidden]){animation:disclosure-enter 360ms var(--motion-ease) both}
.faq-item[open]>p{animation:disclosure-enter var(--motion-state) var(--motion-ease) both}
.contact-form__status:not(:empty){animation:disclosure-enter var(--motion-state) var(--motion-ease) both}
.social-follow__link img{display:block;transition:opacity var(--motion-feedback)}
.social-follow__link:is(:hover,:focus-visible) img{opacity:.85}
@keyframes disclosure-enter{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@keyframes tab-marker{from{scale:.65 1;opacity:.4}to{scale:1 1;opacity:1}}
@keyframes hero-intro{from{opacity:0;translate:0 10px}to{translate:0 0}}
@media(prefers-reduced-motion:no-preference){
  .hero__eyebrow{animation:hero-intro 650ms var(--motion-ease) both}
  .hero__title{animation:hero-intro 850ms var(--motion-ease) 60ms both}
  .hero__actions{animation:hero-intro 750ms var(--motion-ease) 140ms both}
}
@media(max-width:1199.98px) and (prefers-reduced-motion:no-preference){.site-header__nav--open{animation:disclosure-enter 360ms var(--motion-ease) both}}
/* Plain links follow the surface; button hover and icon geometry stay intact. */
.contact-section .contact-section__info a:any-link,.contact-section .contact-form__consent a{color:rgb(255 255 255 / .65)}
.contact-section .contact-section__info a:is(:hover,:focus-visible),.contact-section .contact-form__consent a:is(:hover,:focus-visible){color:white}
.site-footer a:is(:hover,:focus-visible),:is(.devices-section,.ecosystem-section,.support-section,.faq-section) .text-link:is(:hover,:focus-visible){color:var(--color-action-blue)}
.text-link>span{display:inline-block;transform-origin:left center;transition:translate 480ms var(--motion-ease),scale 480ms var(--motion-ease),text-decoration-color var(--motion-state);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:1px}
.text-link:is(:hover,:focus-visible)>span{translate:3px 0;scale:1.025;text-decoration-color:currentColor}
/* Only artwork follows the section's reversible scroll progress. The default
   composition remains complete without JS and when reduced motion is requested. */
@media(prefers-reduced-motion:no-preference){
  .scroll-motion:is(.devices-section,.ecosystem-section)::before,
  .scroll-motion:is(.devices-section,.ecosystem-section,.support-section)::after{opacity:calc(.3 + var(--scroll-progress) * .7);translate:0 calc((1 - var(--scroll-progress)) * 24px)}
}
@media(min-width:1200px) and (prefers-reduced-motion:no-preference){
  .scroll-motion :is(.ecosystem-map__path,.ecosystem-map__extra-path){clip-path:inset(0 calc((1 - var(--scroll-progress)) * 100%) 0 0)}
  .scroll-motion .apps-section__laptop{translate:calc((1 - var(--scroll-progress)) * 120px) 0}
}
@media(max-width:1199.98px){
  .ecosystem-section .ecosystem-device__point{transition:none}
  .ecosystem-section .ecosystem-device__trigger:is(:hover,:focus-visible) .ecosystem-device__point{scale:none}
  .ecosystem-section .ecosystem-device__note:not([hidden]){animation:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .text-link:is(:hover,:focus-visible)>span{translate:none;scale:none}
  *,*::before,*::after{animation:none!important;transition-duration:0s!important}
}