/* Paired text/arrow feedback. Geometry and hit targets remain stationary. */
:root{--interaction-shift:6px;--interaction-time:220ms}
.capability-card .card-heading h3,.capability-card>p,.capability-card>.card-index,
.step-card>div,.model-directory>a>span,.resource-list>a>span,.resource-list>a>h3,.resource-list>a>p,
.action-label{transition:transform var(--interaction-time) ease,color var(--interaction-time) ease}
.capability-card .card-heading>.icon,.step-card>.step-arrow,.model-directory>a>.icon,.resource-list>a>.icon,
.button>.icon,.text-link>.icon,.directory-bottom>a>.icon,.header-signin>.icon,.announcement>a>.icon{
 transition:transform var(--interaction-time) ease,color var(--interaction-time) ease;
}
/* Replace padding-based motion with transforms; keep card edges and focus rings still. */
.capability-card:is(:hover,:focus-visible),.step-card:is(:hover,:focus-visible),.button:is(:hover,:focus-visible){transform:none}
.model-directory>a:is(:hover,:focus-visible),.resource-list>a:is(:hover,:focus-visible){padding-left:0}
.capability-card:focus-visible{border-color:var(--coral)}
.step-card:focus-visible{border-color:var(--coral);background:color-mix(in srgb,var(--paper) 88%,var(--coral))}
.model-directory>a:focus-visible,.resource-list>a:focus-visible{background:color-mix(in srgb,var(--paper) 88%,var(--coral))}
.capability-card:is(:hover,:focus-visible) .card-heading>h3,
.capability-card:is(:hover,:focus-visible)>p,.capability-card:is(:hover,:focus-visible)>.card-index,
.step-card:is(:hover,:focus-visible)>div,.model-directory>a:is(:hover,:focus-visible)>span,
.resource-list>a:is(:hover,:focus-visible)>span,.resource-list>a:is(:hover,:focus-visible)>h3,.resource-list>a:is(:hover,:focus-visible)>p,
a:is(:hover,:focus-visible)>.action-label{transform:translateX(var(--interaction-shift))}
.capability-card:is(:hover,:focus-visible) .card-heading>.icon,
.step-card:is(:hover,:focus-visible)>.step-arrow,.model-directory>a:is(:hover,:focus-visible)>.icon,.resource-list>a:is(:hover,:focus-visible)>.icon,
.button:is(:hover,:focus-visible)>.icon,.text-link:is(:hover,:focus-visible)>.icon,.directory-bottom>a:is(:hover,:focus-visible)>.icon,
.header-signin:is(:hover,:focus-visible)>.icon,.announcement>a:is(:hover,:focus-visible)>.icon{transform:translateX(calc(-1 * var(--interaction-shift)))}
.action-label{display:inline-block}
/* Reserve space between opposing text and arrows even with narrow cards. */
.card-heading{gap:calc(8px + var(--interaction-shift))}
.resource-list>a>h3,.resource-list>a>p{padding-right:var(--interaction-shift)}
/* Keep the hero button's size while bringing its label toward the center. */
.hero-actions .button-primary{padding-left:36px;gap:38px}
html[data-theme=mint] .hero-actions .button-primary{background:#28314E;color:#FFFFFF;box-shadow:none}
html[data-theme=mint] .hero-actions .button-primary:is(:hover,:focus-visible){background:#395CAE;color:#FFFFFF}
@media(max-width:480px){.hero-actions .button-primary{padding-left:28px;gap:20px}}
@media(max-width:800px){:root{--interaction-shift:4px}}
@media(prefers-reduced-motion:reduce){:root{--interaction-shift:0px;--interaction-time:0ms}}