/* Shared interaction system. Surface/layout rules stay in existing page styles. */
:root{--motion-duration:210ms;--motion-ease:cubic-bezier(.2,.7,.2,1);--motion-distance:3px;--interaction-border:#729fdf;--interaction-surface:#f5f8fd;--interaction-shadow:0 12px 28px #111d3210;--focus-ring:3px solid #0755e9;--focus-offset:4px}
.motion-arrow{display:inline-block;width:18px;height:18px;flex:0 0 18px;vertical-align:middle;transform:translate(0,0);transition:transform var(--motion-duration) var(--motion-ease),opacity var(--motion-duration) var(--motion-ease);pointer-events:none}
a:has(>.motion-arrow){gap:14px}.shared-header .nav-cta>.motion-arrow{margin-left:18px}.large-mark .motion-arrow{width:1em;height:1em}
.motion-chevron{transform:rotate(0);transform-origin:center;transition:transform var(--motion-duration) var(--motion-ease)}
[aria-expanded="true"] .motion-chevron{transform:rotate(180deg)}
.services-chevron-motion{transition:transform var(--motion-duration) var(--motion-ease)}
.interactive-card{transition:transform var(--motion-duration) var(--motion-ease),border-color var(--motion-duration) var(--motion-ease),box-shadow var(--motion-duration) var(--motion-ease)}
.informational-card,.future-card,:where(.industry-grid article,.feature-grid article,.use-grid article,.about-offers article,.principles-grid article,.decision-grid>div,.access-blocks article,.steps>li){cursor:default;transition:background-color var(--motion-duration) var(--motion-ease),border-color var(--motion-duration) var(--motion-ease)}
.interactive-card:focus-within{border-color:var(--interaction-border);box-shadow:var(--interaction-shadow)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.shared-footer :focus-visible{outline-color:#fff!important}
:where(button,.button,.outline-button,.copy-button,.demo-selector button,.load-spam-check,.menu,.footer-toggle,.services-toggle){transition:background-color var(--motion-duration) var(--motion-ease),border-color var(--motion-duration) var(--motion-ease),box-shadow var(--motion-duration) var(--motion-ease),opacity var(--motion-duration) var(--motion-ease)}
:where(button,.button):not(:disabled):not([aria-disabled="true"]):active{box-shadow:inset 0 2px 3px #111d3220}
button:disabled,[aria-disabled="true"]{cursor:not-allowed;opacity:.65;transform:none!important;box-shadow:none!important}
button:disabled .motion-arrow,[aria-disabled="true"] .motion-arrow{transform:none!important;opacity:1!important}
summary::marker{color:var(--blue)}
/* The five real use cases fill the available rows; there is no decorative sixth item. */
.services-page .use-grid{grid-template-columns:repeat(6,minmax(0,1fr));background:transparent;gap:0;border:0}
.services-page .use-grid>article{grid-column:span 2;border:1px solid var(--line)}
.services-page .use-grid>article:nth-child(n+4){grid-column:span 3}
@media(max-width:1000px){.services-page .use-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.services-page .use-grid>article,.services-page .use-grid>article:nth-child(n+4){grid-column:auto}.services-page .use-grid>article:last-child{grid-column:1/-1}}
@media(max-width:700px){.services-page .use-grid{grid-template-columns:1fr}.services-page .use-grid>article:last-child{grid-column:auto}}
@media(max-width:1100px) and (min-width:701px){.shared-header .nav-cta>.motion-arrow{margin-left:7px}}
@media(hover:hover) and (pointer:fine){
 .interactive-card:hover{transform:translateY(calc(-1 * var(--motion-distance)));border-color:var(--interaction-border);box-shadow:var(--interaction-shadow)}
 .informational-card:hover,.future-card:hover,:where(.industry-grid article,.feature-grid article,.use-grid article,.about-offers article,.principles-grid article,.decision-grid>div,.access-blocks article,.steps>li):hover{background-color:var(--interaction-surface);border-color:#c3d3e7}
 :where(a,button):not(:disabled):not([aria-disabled="true"]):hover .motion-arrow--ne,.interactive-card:hover .motion-arrow--ne{transform:translate(var(--motion-distance),calc(-1 * var(--motion-distance)))}
 :where(a,button):not(:disabled):not([aria-disabled="true"]):hover .motion-arrow--down{transform:translateY(var(--motion-distance))}
 :where(a,button):not(:disabled):not([aria-disabled="true"]):hover .motion-arrow--up{transform:translateY(calc(-1 * var(--motion-distance)))}
 :where(a,button):not(:disabled):not([aria-disabled="true"]):hover .motion-arrow--right{transform:translateX(var(--motion-distance))}
 .header-services:hover .services-chevron-motion{transform:translateY(2px)}
 :where(.outline-button,.copy-button,.demo-selector button,.menu,.load-spam-check):not(:disabled):hover{border-color:var(--blue)}
}
:where(a,button):not(:disabled):not([aria-disabled="true"]):focus-visible .motion-arrow--ne,.interactive-card:focus-within .motion-arrow--ne{transform:translate(var(--motion-distance),calc(-1 * var(--motion-distance)))}
:where(a,button):focus-visible .motion-arrow--down{transform:translateY(var(--motion-distance))}
:where(a,button):focus-visible .motion-arrow--up{transform:translateY(calc(-1 * var(--motion-distance)))}
:where(a,button):focus-visible .motion-arrow--right{transform:translateX(var(--motion-distance))}
:where(a,button):not(:disabled):not([aria-disabled="true"]):active .motion-arrow{opacity:.7}
.button:disabled:hover,.button[aria-disabled="true"]:hover{background:var(--blue)}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .motion-arrow,.motion-chevron,.services-chevron-motion,.interactive-card,.informational-card,.future-card,:where(.industry-grid article,.feature-grid article,.use-grid article,.about-offers article,.principles-grid article,.decision-grid>div,.access-blocks article,.steps>li,button,.button){transition:none!important}
 .motion-arrow,.services-chevron-motion,.interactive-card:hover{transform:none!important}
 /* Chevron rotation is instantaneous, preserving the actual open state. */
}
/* Narrow-screen industry copy must not force a min-content column beyond its container. */
.industry-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.industry-grid article{min-width:0;overflow-wrap:anywhere}
@media(max-width:1000px){.industry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.industry-grid{grid-template-columns:1fr}.industry-grid article{border-right:0;border-bottom:1px solid var(--line)}.industry-grid article:last-child{border-bottom:0}}

/* Preserve the scale of the miniature concept interface inside its real preview link. */
.mini-cta .motion-arrow{width:1em;height:1em;vertical-align:baseline}