/* Small progressive-enhancement layer. Tailwind utilities handle primary layout. */
@view-transition { navigation: auto; }
html { scroll-padding-top: 6rem; }
body { overflow-x: clip; }
main :where(h1, h2, h3) { overflow-wrap: break-word; text-wrap: pretty; }
main :where(a, button) { -webkit-tap-highlight-color: transparent; }
[data-stack-card], [data-flow-line] { transform-origin: center top; }
[data-flow-step] { transition: background-color .3s ease; }
[data-flow-number] { transition: color .3s ease; }
[data-image-slot] { max-width: 100%; }
@media (hover: hover) and (pointer: fine) {
  a[data-cta] svg { transition: transform .3s cubic-bezier(.22,1,.36,1); }
  a[data-cta]:hover svg { transform: translateX(5px); }
}
@media (min-width: 1024px) and (max-height: 700px), (min-width: 1024px) and (pointer: coarse) {
  [data-stack-card], [data-flow-aside], [data-contact-aside] {
    position: relative !important;
    top: auto !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: .01ms !important;
  }
}