/**
 * Stable layout: readable text, no layout-shifting motion.
 * Loaded after animations.css — fixes mobile and desktop jitter.
 */

/* ---- Readable text everywhere ---- */
.hero .hero__title,
.section-head h2,
.section-head h3,
.product__title,
.product-detail__body h2,
.prose h2,
.prose h3,
.timeline__title,
.card__title,
.cta__panel h2 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.hero p,
.section-head p,
.prose p,
.product__desc,
.product-detail__body p,
.timeline__desc,
.card p {
  max-width: 100%;
  overflow-wrap: break-word;
}

body.is-rtl .hero .hero__title,
body.is-rtl .section-head h2,
body.is-rtl .prose h2 {
  line-height: 1.35;
  letter-spacing: 0;
}

/* ---- Kill layout-breaking motion (all viewports) ---- */
html.ux-motion .hero__title {
  color: var(--text-strong);
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
}

html.ux-motion .hero__title:not(.hero__title--ready),
html.ux-motion .hero__title.hero__title--ready {
  opacity: 1;
  transform: none;
}

html.ux-motion .hero__copy .kicker {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  overflow: visible;
  white-space: normal;
  border-right: 0;
  animation: none !important;
}

html.ux-motion .hero__img {
  animation: none !important;
  transform: none !important;
}

html.ux-motion .hero__figure::after {
  display: none;
}

html.ux-motion .hero__figure {
  animation: none !important;
}

html.ux-motion .hero__copy > * {
  animation: none !important;
  opacity: 1 !important;
}

html.ux-motion .stat__value {
  color: var(--text-strong);
  -webkit-text-fill-color: currentColor;
  background: none;
  animation: none;
}

html.ux-motion .section-reveal {
  transform: none;
  opacity: 1;
}

html.ux-motion .section-reveal .product,
html.ux-motion .section-reveal .industry,
html.ux-motion .section-reveal .timeline__item,
html.ux-motion .section-reveal .card,
html.ux-motion .section-reveal .feature {
  opacity: 1;
}

html.ux-motion .section-reveal.is-in-view .product,
html.ux-motion .section-reveal.is-in-view .industry,
html.ux-motion .section-reveal.is-in-view .timeline__item,
html.ux-motion .section-reveal.is-in-view .card,
html.ux-motion .section-reveal.is-in-view .feature {
  animation: none;
}

html.ux-motion [data-animate],
html.ux-motion [data-animate].is-in {
  opacity: 1;
  transform: none;
  transition: none;
}

html.ux-motion .wa-fab a,
html.ux-motion .brand__mark,
html.ux-motion .btn--primary {
  animation: none !important;
}

html.ux-motion .kicker {
  animation: none !important;
}

body::after {
  display: none !important;
}

html.ux-motion .header:not(.header--ready),
html.ux-motion .header.header--ready {
  opacity: 1;
}

html.ux-motion .header:not(.header--ready) .nav,
html.ux-motion .header.header--ready .nav {
  opacity: 1;
  transform: none;
}

.product:hover,
.card:hover,
.industry:hover,
.timeline__item:hover,
.feature:hover {
  transform: none;
}

/* Carousel: fixed height, no scroll jump */
.hero__carousel {
  contain: layout style;
}

.carousel__track {
  overscroll-behavior-x: contain;
}

.carousel__slide {
  flex-shrink: 0;
}

/* ---- Mobile hero: text first, image, gallery last ---- */
@media (max-width: 820px) {
  .hero.hero--split .hero__grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
  }

  .hero.hero--split .hero__copy {
    display: contents;
  }

  .hero.hero--split .kicker { order: 1; }
  .hero.hero--split .hero__title { order: 2; }
  .hero.hero--split .hero__grid > p,
  .hero.hero--split .hero__copy > p { order: 3; }
  .hero.hero--split .hero__actions { order: 4; }
  .hero.hero--split .hero__figure { order: 5; width: 100%; margin-inline: 0; }
  .hero.hero--split .hero__carousel { order: 6; margin-top: 0; width: 100%; }

  .hero .hero__title {
    font-size: clamp(24px, 6.8vw, 34px);
    line-height: 1.25;
    margin: 12px 0;
  }

  body.is-rtl .hero .hero__title {
    font-size: clamp(23px, 6.5vw, 32px);
    line-height: 1.4;
  }

  .hero p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 12px;
  }

  .hero__img {
    height: auto;
    max-height: min(52vh, 360px);
    aspect-ratio: 4 / 3;
  }

  .hero__caption {
    text-align: start;
    padding: 10px 12px;
  }

  [dir="rtl"] .hero__caption {
    text-align: start;
  }

  .section-head {
    align-items: flex-start;
  }

  .section-head h2 {
    display: block;
    width: 100%;
  }

  .section-head h2::after {
    display: none;
  }

  .product-detail {
    padding: 20px 0;
  }

  .product-detail__body ul,
  .prose ul {
    padding-inline-start: 1.15em;
  }

  [dir="rtl"] .product-detail__body ul,
  [dir="rtl"] .prose ul {
    padding-inline-start: 0;
    padding-inline-end: 1.15em;
  }
}

@media (max-width: 600px) {
  .section-head p {
    font-size: 14px;
    line-height: 1.65;
  }

  .prose {
    font-size: 15px;
    line-height: 1.75;
  }

  .prose h2 {
    font-size: clamp(20px, 5.5vw, 26px);
    line-height: 1.3;
  }
}

/* Splash: static text, no orb drift */
@media (max-width: 820px) {
  #sxj-splash::before,
  #sxj-splash::after {
    animation: none;
    transform: none;
  }

  .sxj-bg {
    transform: none !important;
  }

  .sxj-tagline,
  .sxj-line {
    max-width: 100%;
    text-align: center;
    overflow-wrap: break-word;
  }

  .sxj-tagline .sxj-type {
    white-space: normal;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    animation: none !important;
  }

  .sxj-tagline .sxj-rest {
    -webkit-text-fill-color: #0e4a7a !important;
    color: #0e4a7a !important;
  }

  .sxj-line.line-1,
  .sxj-line.line-2 {
    letter-spacing: 0.06em;
    white-space: normal;
  }
}