:root { --ma-ease-out: cubic-bezier(.23, 1, .32, 1); }
.ma-button, .ma-product-card, .ma-chooser a { transition: transform 180ms var(--ma-ease-out), background 160ms ease, border-color 160ms ease; }
.ma-button:active { transform: scale(.97); }
:where(a,button,summary,input,select,textarea):focus-visible { outline: 2px solid var(--ma-signal); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .js :is(.ma-section-head,.ma-lead,.ma-answer .ma-wrap,.ma-why article,.ma-experience__body,.ma-product-card,.ma-faq details,.ma-contact-card,.ma-team article) { opacity: 0; transform: translateY(16px); transition: opacity 520ms var(--ma-ease-out), transform 520ms var(--ma-ease-out); }
  .js :is(.ma-section-head,.ma-lead,.ma-answer .ma-wrap,.ma-why article,.ma-experience__body,.ma-product-card,.ma-faq details,.ma-contact-card,.ma-team article).in { opacity: 1; transform: none; }
  .js .ma-why article:nth-child(2), .js .ma-product-card:nth-child(2) { transition-delay: 55ms; }
  .js .ma-why article:nth-child(3), .js .ma-product-card:nth-child(3) { transition-delay: 110ms; }
  .js .ma-section:not(.ma-hero):not(.ma-pagehead) { position: relative; }
  .js .ma-section:not(.ma-hero):not(.ma-pagehead)::before { content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 2px; background: var(--ma-signal); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ma-ease-out) 60ms; }
  .js .ma-section.in::before { transform: scaleX(1); }
}
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    :root { interpolate-size: allow-keywords; }
    .ma-faq details > div { height: 0; overflow: hidden; opacity: 0; transition: height 240ms var(--ma-ease-out), opacity 180ms var(--ma-ease-out); }
    .ma-faq details[open] > div { height: auto; opacity: 1; }
  }
}