:root { --motion-spring: cubic-bezier(.16, 1, .3, 1); --page-shift: 40px; }
#main-nav { position: relative; inset: auto; }
.js-enabled #main-nav > a[aria-current="page"]::after { display: none; }
.nav-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 3px;
  border-radius: 4px;
  background: var(--blue);
  pointer-events: none;
  transition: transform 460ms cubic-bezier(.22, 1.3, .36, 1), opacity 180ms ease;
}
.js-enabled #main { view-transition-name: page-content; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(page-content) { animation-duration: 380ms; animation-timing-function: var(--motion-spring); }
::view-transition-old(page-content) { animation: page-leave 220ms ease both; }
::view-transition-new(page-content) { animation: page-arrive 460ms var(--motion-spring) both; }
@keyframes page-leave {
  to { opacity: 0; transform: translateX(calc(var(--page-shift) * -.6)); }
}
@keyframes page-arrive {
  from { opacity: 0; transform: translateX(var(--page-shift)); }
  to { opacity: 1; transform: translateX(0); }
}
.button {
  transition: transform 220ms var(--motion-spring), background-color 180ms ease, box-shadow 220ms ease;
}
.button > span { transition: transform 280ms var(--motion-spring); }
.button:active { transform: translateY(1px) scale(.98); }
.solution, .source-node, .question-bubble, .insight-card {
  transition: translate 350ms var(--motion-spring), box-shadow 350ms ease, border-color 220ms ease;
}
.scenario-control button, .demo-sidebar button {
  transition: background-color 200ms ease, color 200ms ease, transform 260ms var(--motion-spring), box-shadow 200ms ease;
}
.scenario-control button:active, .demo-sidebar button:active { transform: scale(.96); }
.faq-list summary > span { transition: transform 320ms var(--motion-spring), color 180ms ease; }
.field input, .field select, .field textarea {
  transition: border-color 180ms ease, box-shadow 220ms ease, background-color 180ms ease;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  box-shadow: 0 0 0 4px rgba(35, 86, 232, .08);
}
.text-link > span:last-child { transition: translate 260ms var(--motion-spring); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(35, 86, 232, .17); }
  .button:hover > span { transform: translate(2px, -2px); }
  .solution:hover { translate: 0 -6px; box-shadow: 0 20px 44px rgba(35, 65, 118, .12), inset 0 1px 0 #fff; }
  .source-node:hover, .question-bubble:hover, .insight-card:hover { translate: 0 -3px; }
  .text-link:hover > span:last-child { translate: 2px -1px; }
}
@media (max-width: 620px) { .nav-indicator { bottom: 4px; } }
@media (prefers-reduced-motion: reduce) {
  .js-enabled #main { view-transition-name: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .nav-indicator, .button, .button > span, .solution, .source-node, .question-bubble,
  .insight-card, .scenario-control button, .demo-sidebar button, .faq-list summary > span,
  .field input, .field select, .field textarea, .text-link > span:last-child { transition: none; }
  .button:hover, .button:active, .button:hover > span, .solution:hover,
  .source-node:hover, .question-bubble:hover, .insight-card:hover, .text-link:hover > span:last-child { transform: none; translate: none; }
}