/* Quiet feedback; photography and product evidence retain their full framing. */
:root{--motion-fast:180ms;--motion-state:260ms}
.scroll-progress{position:fixed;z-index:1000;top:0;left:0;width:100%;height:3px;background:var(--clay);transform:scaleX(0);transform-origin:left;pointer-events:none;will-change:transform}
.button{transition:background-color var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast) var(--ease)}
.text-link,.header-access,.hero-bottom a,.hero-estimate>a,.plugin-example,.footer-top>a,.site-header nav a{transition:color var(--motion-fast),border-color var(--motion-fast)}
.button svg,.text-link svg,.header-access svg,.hero-bottom a svg,.hero-estimate>a svg,.plugin-example svg,.footer-top>a svg,.expand-label svg{transition:transform var(--motion-state) var(--ease)}
.site-header nav a{position:relative}
.site-header nav a::after{content:"";position:absolute;bottom:5px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--motion-state) var(--ease)}
.site-header nav a:focus-visible::after{transform:scaleX(1)}
.button:focus-visible svg,.text-link:focus-visible svg,.header-access:focus-visible svg,.hero-estimate>a:focus-visible svg,.hero-bottom a:focus-visible svg,.plugin-example:focus-visible svg{transform:translateX(4px)}
.expand-label{transition:background-color var(--motion-fast)}
.image-open:focus-visible .expand-label{background:var(--mist)}
.proof-tabs button{transition:color var(--motion-fast),background-color var(--motion-fast);border-bottom-width:1px}
.proof-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 360ms var(--ease)}
.proof-tabs button[aria-selected=true]::after{transform:scaleX(1)}
.proof-tabs button:focus-visible{background:var(--mist)}
.faq summary{transition:color var(--motion-fast)}
.faq summary svg{transition:transform var(--motion-state) var(--ease)}
.viewer-top button{transition:background-color var(--motion-fast),color var(--motion-fast)}
.viewer-top button:focus-visible{background:var(--ink);color:white}
.workflow li{position:relative}
.workflow li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left}
.workflow[data-motion-entered] li::before{transform:scaleX(1)}
.media-field,.visual-pair figure,.catalog-card,.page-choice,.quote-flow-photo,.hero-render,.audience-grid figure{overflow:hidden}
.media-field img,.visual-pair img,.catalog-card img,.quote-flow-photo img,.hero-render>img,.audience-grid figure img{transition:transform 900ms var(--ease),filter 500ms ease}
.page-choice,.catalog-card,.info-row,.plugin-table tr,.route-steps>div{transition:transform 320ms var(--ease),border-color 220ms ease,box-shadow 320ms var(--ease)}
.site-header{transition:box-shadow 260ms ease,background-color 260ms ease}
body[data-scrolled=true] .site-header{box-shadow:0 8px 30px rgb(29 21 22/.07)}

@media(hover:hover) and (pointer:fine){
 .site-header nav a:hover::after{transform:scaleX(1)}
 .button:hover svg,.text-link:hover svg,.header-access:hover svg,.hero-estimate>a:hover svg,.hero-bottom a:hover svg,.plugin-example:hover svg,.footer-top>a:hover svg{transform:translateX(4px)}
 .image-open:hover .expand-label svg{transform:translate(2px,-2px)}
 .faq summary:hover{color:var(--clay)}
 .viewer-top button:hover{background:var(--ink);color:white}
 .media-field:hover img,.visual-pair figure:hover img,.catalog-card:hover img,.quote-flow-photo:hover img,.audience-grid figure:hover img{transform:scale(1.018)}
 .page-choice:hover,.catalog-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgb(29 21 22/.10)}
 .info-row:hover,.plugin-table tr:hover,.route-steps>div:hover{transform:translateX(4px)}
}
@media(prefers-reduced-motion:no-preference){
 .button:active{transform:scale(.985)}
 .workflow[data-motion-entered] li::before{animation:viutify-rule 540ms var(--ease) both;animation-delay:calc(var(--motion-order,0)*65ms)}
 dialog[open]{animation:viutify-dialog 280ms var(--ease) both}
 dialog[open]::backdrop{animation:viutify-backdrop 220ms ease-out both}
 .faq details[open]>p{animation:viutify-answer 240ms var(--ease) both}
 @media(max-width:900px){.site-header nav[data-open=true]{animation:viutify-answer 220ms var(--ease) both}}
}
@keyframes viutify-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes viutify-dialog{from{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes viutify-backdrop{from{background:rgb(10 30 24/0)}to{background:rgb(10 30 24/.86)}}
@keyframes viutify-answer{from{opacity:.65;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
 .button,.text-link,.header-access,.hero-bottom a,.hero-estimate>a,.plugin-example,.site-header nav a,.proof-tabs button,.faq summary,.expand-label,.viewer-top button{transition:background-color 80ms linear,color 80ms linear,border-color 80ms linear!important}
 .button:active{transform:none}
 .button svg,.text-link svg,.header-access svg,.hero-bottom a svg,.hero-estimate>a svg,.plugin-example svg,.footer-top>a svg,.expand-label svg{transform:none!important}
 .scroll-progress{display:none}.media-field img,.visual-pair img,.catalog-card img,.quote-flow-photo img,.hero-render>img,.audience-grid figure img,.page-choice,.catalog-card,.info-row,.plugin-table tr,.route-steps>div{transition:none!important;transform:none!important}
}

/* Draw rules when their own reading unit reaches the viewport. */
.info-row{position:relative}
.info-row::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform-origin:left;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
 .info-row[data-detail-entered]::before,.workflow>li[data-detail-entered]::before{animation:viutify-rule 1000ms cubic-bezier(.16,1,.3,1) both;transform:scaleX(1)}
}

@keyframes viutify-portrait-zoom{from{transform:scale(1)}to{transform:scale(1.055)}}
@media(prefers-reduced-motion:no-preference){
 .audiences .audience-grid figure{overflow:hidden}
 .audiences .audience-grid figure .portrait-motion{display:block;animation:viutify-portrait-zoom 8s ease-in-out infinite alternate;animation-play-state:paused;transform-origin:center;transition:none}
 .audiences .audience-grid figure.portrait-in-view:not(.portrait-paused) .portrait-motion{animation-play-state:running}
}

@media(prefers-reduced-motion:no-preference){
 .info-row.detail-motion-ready{border-top-color:transparent}
 .info-row.detail-motion-ready::before{transform:scaleX(0)}
 .info-row.detail-motion-ready[data-detail-entered]::before{animation:viutify-rule 1150ms cubic-bezier(.16,1,.3,1) both}
}

@media(prefers-reduced-motion:no-preference){
 .audiences .audience-grid figure img{display:block;transform:scale(1);transition:transform 900ms cubic-bezier(.22,1,.36,1)}
 @media(hover:hover) and (pointer:fine){.audiences .audience-grid figure:hover img{transform:scale(1.035)}}
}