/* How: preserve banner space while subsequent opaque panels cover the hero. */
#MainContent .ll-page-how[data-how-hero-overlay] .ll-how-hero-stack{position:sticky;top:0;z-index:0;width:100%;overflow:visible}
#MainContent .ll-page-how[data-how-hero-overlay] .how-hero-section{position:relative;inset:auto!important;width:100%!important;transform:none!important;will-change:auto}
#MainContent .ll-page-how[data-how-hero-overlay] .how-pc>section{position:relative;z-index:1}
/* Shared preview-page motion. Content stays visible until the script is ready. */
.ll-motion-ready [data-ll-reveal] {
  opacity: 0;
  filter: none;
  translate: 0 12px;
  transition:
    opacity 360ms cubic-bezier(.22, 1, .36, 1),
    filter 360ms cubic-bezier(.22, 1, .36, 1),
    translate 360ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: 0ms;
}

.ll-motion-ready [data-ll-reveal]:is(.is-visible, :focus-visible) {
  opacity: 1;
  filter: none;
  translate: 0 0;
}

.ll-motion-ready [data-ll-reveal]:focus-visible {
  transition-delay: 0ms;
}

/* Text-and-arrow links only. The label underline never changes layout. */
.ll-arrow-link > .ll-arrow-label {
  position: relative;
  display: inline-block;
}

.ll-arrow-link > .ll-arrow-label::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms cubic-bezier(.25, 1, .5, 1);
}

.ll-arrow-link > .ll-arrow-icon {
  width: 18px;
  height: 18px;
  flex: none;
  overflow: visible;
  color: inherit;
  transition: transform 180ms cubic-bezier(.25, 1, .5, 1);
}

.ll-arrow-icon .ll-arrow-circle {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.25;
  transition: fill 180ms ease;
}

.ll-arrow-icon .ll-arrow-path {
  fill: none;
  stroke: var(--ll-arrow-core, #fff);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 180ms ease;
}

.ll-arrow-link:is(:hover, :focus-visible) > .ll-arrow-label::after {
  transform: scaleX(1);
}

.ll-arrow-link:is(:hover, :focus-visible) > .ll-arrow-icon {
  transform: translateX(2px);
}

.ll-arrow-link:is(:hover, :focus-visible) .ll-arrow-circle {
  fill: transparent;
}

.ll-arrow-link:is(:hover, :focus-visible) .ll-arrow-path {
  stroke: currentColor;
}

.ll-arrow-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Story page originally moved entire links; keep only the shared icon drift. */
.approach-link-wrap.ll-arrow-link:is(:hover, :focus-visible),
.seamless-link-wrap.ll-arrow-link:is(:hover, :focus-visible) {
  transform: none;
  opacity: 1;
}

@media (max-width: 767px) {
  .ll-motion-ready [data-ll-reveal] { translate: 0 6px; }
  .ll-motion-ready [data-ll-reveal]:is(.is-visible, :focus-visible) { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ll-motion-ready [data-ll-reveal] {
    opacity: 1;
    filter: none;
    translate: none;
    transition: none;
  }
  .ll-arrow-link > .ll-arrow-label::after,
  .ll-arrow-link > .ll-arrow-icon,
  .ll-arrow-icon .ll-arrow-circle,
  .ll-arrow-icon .ll-arrow-path { transition: none; }
}