/* Short, one-time motion; content is visible even without JavaScript. */
@keyframes yma-reveal{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes yma-step{from{opacity:.4}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
  :is(.hero-button,.homepage-button,.mortgage-button,.hero-cta,.lead-form button,.calculator button,.mobile-nav-toggle){transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,box-shadow 150ms ease,transform 150ms ease}
  @media(hover:hover) and (pointer:fine){
    :is(.hero-button,.homepage-button,.mortgage-button,.hero-cta,.lead-form button,.calculator button):not(:disabled):hover{transform:translateY(-2px)}
    :is(.hero-button,.homepage-button,.mortgage-button,.hero-cta,.lead-form button,.calculator button):not(:disabled):active{transform:translateY(0)}
  }
  .yma-reveal{animation:yma-reveal 320ms ease-out both}
  .lead-form [data-plans]:not([hidden]),.lead-form [data-contact]:not([hidden]),.calculator .step:not(.hidden),.calculator .result:not(.hidden),.calculator .advisor:not(.hidden){animation:yma-step 180ms ease-out}
  .nav-menu-panel:not([hidden]),.top-nav>nav.mobile-nav-open{animation:yma-step 150ms ease-out}
  main details>summary::after{transition:transform 180ms ease}
}
/* Use one chevron so opening rotates it instead of swapping characters. */
main details>summary::after{content:""!important;display:inline-block;box-sizing:border-box;flex:0 0 auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;margin-left:16px;transform:rotate(45deg);vertical-align:middle}
main details[open]>summary::after{content:""!important;transform:rotate(225deg)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}