/* Product landing patterns composed from editable Canvas primitives. */
/* A two-column image includes one grid gap in its width. Subtract that gap
 * before halving, so its bottom aligns with the neighboring square image. */
@media (min-width: 768px) {
  .products-rfid-card > figure {
    container-type: inline-size;
  }
  .products-rfid-card > figure > div {
    aspect-ratio: auto;
    height: calc((100cqw - var(--grid-column-gap, 2rem)) / 2);
  }
}

:is(
  .products-hero-pattern,
  .capabilities-pattern,
  .ecosystem-classic-pattern,
  .industry-grid-pattern,
  .faq-pattern,
  .mobile-cta-pattern,
  .products-list-pattern
) {
  --products-u: min(0.0520833333vw, 1px);
  --font-sans: var(--urovo-font-primary, "Poppins"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--urovo-font-primary, "Poppins"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family:
    var(--urovo-font-primary, "Poppins"),
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  max-width: none;
  isolation: isolate;
}
/* Hero spacing is owned by the Canvas Section margin controls. */
:is(.capabilities-pattern, .ecosystem-classic-pattern, .industry-grid-pattern, .faq-pattern, .mobile-cta-pattern, .products-list-pattern) {
  margin-block: 0;
}
:is(
    .products-hero-pattern,
    .capabilities-pattern,
    .ecosystem-classic-pattern,
    .industry-grid-pattern,
    .faq-pattern,
    .mobile-cta-pattern,
    .products-list-pattern
  )
  > .container
  > div {
  max-width: none;
}
:is(.capabilities-pattern, .ecosystem-classic-pattern, .industry-grid-pattern, .faq-pattern, .mobile-cta-pattern, .products-list-pattern)
  header:not(:has(> .flex))
  h2 {
  margin: 0;
  color: #11141a;
  font-size: calc(40 * var(--products-u));
  font-weight: 500;
  letter-spacing: normal;
}
:is(.capabilities-pattern, .industry-grid-pattern, .faq-pattern, .mobile-cta-pattern, .products-list-pattern) header:not(:has(> .flex)) h2 {
  text-align: center;
}
:is(.capabilities-pattern, .industry-grid-pattern, .mobile-cta-pattern, .products-list-pattern) header:not(:has(> .flex)) p {
  text-align: center;
  margin: 0;
  font-size: calc(18 * var(--products-u));
}
.products-hero-pattern {
  min-height: calc(720 * var(--products-u));
  justify-content: center;
  overflow: hidden;
}
.products-hero-pattern header:not(:has(> .flex)) {
  margin: 0;
}
.products-hero-pattern header .urovo-button {
  --button-u: var(--products-u);
  --button-font: 17;
  font-size: calc(17 * var(--products-u));
  --button-padding-y: 16;
  --button-padding-x: 30;
  --button-gap: 20;
  --button-icon-size: 19;
  --button-font-weight: 700;
  --button-bg: #03a9f5;
  --button-hover-fg: #3b82f6;
  margin-top: calc(48 * var(--products-u));
}
:is(.products-hero-pattern, .mobile-cta-pattern) header .urovo-button:is(:hover, :focus-visible) .urovo-button__icon {
  color: #111;
}
.capabilities-pattern header:not(:has(> .flex)) {
  margin-bottom: calc(46 * var(--products-u));
}
.capabilities-pattern header:not(:has(> .flex)) > div:has(p) {
  margin-top: calc(16 * var(--products-u));
  color: #404f63;
}
.capabilities-pattern .grid:has(> .capability-card) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(30 * var(--products-u));
}
.capability-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: 100%;
  min-height: calc(176 * var(--products-u));
  align-content: center;
  align-items: start;
  gap: calc(24 * var(--products-u));
  overflow: hidden;
  border: 1px solid #dfe7ec;
  border-radius: calc(12 * var(--products-u));
  background: #fff;
  padding: calc(25 * var(--products-u)) calc(32 * var(--products-u));
  text-align: left;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.capability-card:is(:hover, :focus-visible, :focus-within) {
  border-color: #c7dfeb;
  box-shadow: 0 10px 28px rgb(45 105 132 / 10%);
}
.capability-icon {
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(56 * var(--products-u));
  height: calc(56 * var(--products-u));
  padding: 0;
  border-radius: calc(11 * var(--products-u));
  background: #eaf4ff;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.capability-icon figure {
  width: 68%;
  height: 68%;
  margin: 0;
}
.capability-icon > .urovo-icon {
  width: 68%;
  height: 68%;
  color: var(--color-primary);
}
.capability-icon > .urovo-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.capability-icon figure > div,
.capability-icon img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}
.capability-card:is(:hover, :focus-visible, :focus-within) .capability-icon {
  transform: translateY(calc(-4 * var(--products-u))) scale(1.1);
}
.capability-copy {
  align-self: start;
  gap: 0;
  padding: 0;
}
.capability-copy h3 {
  margin: 0;
  color: #11141a;
  font-size: calc(24 * var(--products-u));
  font-weight: 500;
  letter-spacing: normal;
}
.capability-copy > div:has(p) {
  margin-top: calc(10 * var(--products-u));
}
.capability-copy p {
  max-width: calc(440 * var(--products-u));
  margin: 0;
  color: #535d68;
  font-size: calc(17 * var(--products-u));
}
.ecosystem-classic-pattern header:not(:has(> .flex)) {
  margin-bottom: calc(80 * var(--products-u));
}
.ecosystem-classic-pattern .urovo-marquee {
  --marquee-item-width: max(190px, calc((var(--products-viewport, 100vw) - 120 * var(--products-u)) / 6)) !important;
  --marquee-mobile-item-width: 190px !important;
  --marquee-gap: calc(24 * var(--products-u)) !important;
}
.ecosystem-classic-pattern .partner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: start;
  gap: 0;
  border: 1px solid rgb(194 216 225 / 55%);
  border-radius: calc(8 * var(--products-u));
  background: white;
  box-shadow: 0 8px 24px rgb(34 80 99 / 6%);
  padding: calc(18 * var(--products-u)) calc(20 * var(--products-u)) calc(16 * var(--products-u));
}
.ecosystem-classic-pattern .partner figure {
  width: 100%;
  margin: 0;
}
.ecosystem-classic-pattern .partner figure > div {
  height: calc(30 * var(--products-u));
  aspect-ratio: auto;
}
.ecosystem-classic-pattern .partner img {
  display: block;
  width: auto;
  max-width: 90%;
  height: 100%;
  object-fit: contain;
  object-position: left;
}
.ecosystem-classic-pattern .partner > div:has(p) {
  margin-top: calc(22 * var(--products-u));
}
.ecosystem-classic-pattern .partner p {
  margin: 0;
  color: #6e8a9e;
  font-size: calc(13 * var(--products-u));
  font-weight: 500;
  white-space: nowrap;
}
.industry-grid-pattern header:not(:has(> .flex)) {
  margin-bottom: calc(48 * var(--products-u));
}
.industry-grid-pattern header:not(:has(> .flex)) > div:has(p) {
  margin-top: calc(12 * var(--products-u));
  color: #24435a;
}
.industry-grid-pattern .grid:has(> .industry-solution-card) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(22 * var(--products-u));
}
.industry-solution-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: start;
  gap: 0;
  padding: 0;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgb(129 190 218 / 28%);
  border-radius: calc(12 * var(--products-u));
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 14px 34px rgb(45 126 164 / 12%);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.industry-solution-card:is(:hover, :focus-within) {
  border-color: rgb(3 169 245 / 42%);
  box-shadow: 0 18px 36px -22px rgb(3 125 190 / 34%);
}
.industry-solution-card > figure {
  width: 100%;
  margin: 0;
  overflow: hidden;
}
.industry-solution-card > figure > div {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
}
.industry-solution-card > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.industry-solution-card:is(:hover, :focus-within) > figure img {
  transform: scale(1.065);
}
.industry-solution-copy {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  align-self: stretch;
  min-height: calc(190 * var(--products-u));
  padding: calc(27 * var(--products-u)) calc(26 * var(--products-u)) calc(30 * var(--products-u) + 1px);
  gap: 0;
}
.industry-solution-copy h3 {
  min-height: 1.25em;
  margin: 0;
  color: #11141a;
  font-size: calc(23 * var(--products-u));
  font-weight: 500;
  letter-spacing: normal;
  transition: color 0.3s ease;
}
.industry-solution-copy > div:has(p) {
  margin-top: calc(10 * var(--products-u));
}
.industry-solution-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #4c667a;
  font-size: 14px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.industry-solution-copy .urovo-button {
  --button-u: var(--products-u);
  --button-font: 14;
  --button-font-weight: 500;
  --button-gap: 12;
  --button-fg: #11141a;
  --button-hover-fg: #03a9f5;
  margin-top: calc(30 * var(--products-u));
  padding: 0;
  border: 0;
  border-radius: 0;
  min-height: 0;
  line-height: 1.5;
  background: transparent;
  transition: color 0.3s ease;
}
.industry-solution-copy .urovo-button::before {
  display: none;
}
.industry-solution-copy .urovo-button:is(:hover, :focus-visible) {
  color: #03a9f5;
}
.industry-solution-copy .urovo-button__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(22 * var(--products-u));
  height: calc(22 * var(--products-u));
  border-radius: 50%;
  background: #03a9f5;
  color: white;
  overflow: hidden;
}
.industry-solution-copy .urovo-button__icon svg {
  position: absolute;
  inset: 17.5%;
  width: 65%;
  height: 65%;
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}
.industry-solution-copy .products-arrow-incoming {
  transform: translateX(-38px);
}
.industry-solution-copy .urovo-button:is(:hover, :focus-visible) .products-arrow-current {
  transform: translateX(38px);
}
.industry-solution-copy .urovo-button:is(:hover, :focus-visible) .products-arrow-incoming {
  transform: translateX(0);
}
.industry-solution-card:is(:hover, :focus-within) h3 {
  color: #03a9f5;
}
.faq-pattern header:not(:has(> .flex)) {
  margin-bottom: calc(52 * var(--products-u));
}
.faq-pattern .accordion-container {
  max-width: calc(1180 * var(--products-u));
  width: 100%;
  margin-inline: auto;
}
.faq-pattern .accordion {
  border-color: #e7ebef;
  background: transparent;
}
.faq-pattern .accordion > h3 {
  margin: 0;
}
.faq-pattern .accordion--title {
  gap: calc(24 * var(--products-u));
  border: 0;
  background: none;
  padding: calc(28 * var(--products-u)) 0;
  color: #11141a;
  font-weight: 500;
}
.faq-pattern .accordion--title:is(:hover, :focus-visible) {
  font-weight: 700;
}
.faq-pattern .accordion[open] .accordion--title {
  color: #03a9f5;
}
.faq-pattern .accordion--icon {
  flex-shrink: 0;
  color: #7d94a6;
}
.faq-pattern .accordion--icon svg {
  width: calc(22 * var(--products-u));
  height: calc(22 * var(--products-u));
}
.faq-pattern .accordion[open] .accordion--icon {
  color: #03a9f5;
}
.faq-pattern .accordion--content {
  padding-inline: 0;
}
.faq-pattern .accordion[open] .accordion--content {
  padding-top: 0;
  padding-bottom: calc(30 * var(--products-u));
}
.mobile-cta-pattern {
  min-height: calc(470 * var(--products-u));
  overflow: hidden;
  justify-content: center;
}
.mobile-cta-pattern header:not(:has(> .flex)) {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}
.mobile-cta-pattern header:not(:has(> .flex)) h2 {
  color: white;
}
.mobile-cta-pattern header:not(:has(> .flex)) > div:has(p) {
  margin-top: calc(18 * var(--products-u));
  max-width: calc(680 * var(--products-u));
}
.mobile-cta-pattern header:not(:has(> .flex)) p {
  color: #b9c7dd;
}
.mobile-cta-pattern header .urovo-button {
  --button-u: var(--products-u);
  --button-bg: #03a9f5;
  --button-hover-fg: #3b82f6;
  margin-top: calc(44 * var(--products-u));
}
/* Content is readable until the observer has successfully attached. */
.products-pattern-enhanced .products-reveal-target {
  opacity: 0;
  translate: 0 44px;
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--products-reveal-delay, 0s);
}
.products-pattern-enhanced .products-reveal-target.is-revealed {
  opacity: 1;
  translate: 0 0;
}
.capabilities-pattern.products-pattern-enhanced .capability-card {
  translate: 0 calc(34 * var(--products-u));
  scale: 0.985;
  transition:
    opacity 0.68s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.68s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.68s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  transition-delay: var(--products-reveal-delay, 0s);
}
.capabilities-pattern.products-pattern-enhanced .capability-card.is-revealed {
  translate: 0 0;
  scale: 1;
}
@media (max-width: 1023px) {
  :is(
    .products-hero-pattern,
    .capabilities-pattern,
    .ecosystem-classic-pattern,
    .industry-grid-pattern,
    .faq-pattern,
    .mobile-cta-pattern,
    .products-list-pattern
  ) {
    --products-u: 0.75px;
  }
  :is(
      .products-hero-pattern,
      .capabilities-pattern,
      .ecosystem-classic-pattern,
      .industry-grid-pattern,
      .faq-pattern,
      .mobile-cta-pattern,
      .products-list-pattern
    )
    > .container {
    width: calc(100% - 48px);
  }
  :is(.capabilities-pattern, .ecosystem-classic-pattern, .industry-grid-pattern, .faq-pattern, .mobile-cta-pattern, .products-list-pattern)
    header:not(:has(> .flex))
    h2 {
    font-size: 25px;
  }
  .industry-grid-pattern header:not(:has(> .flex)) p {
    font-size: 14px;
  }
  .products-hero-pattern {
    min-height: 0;
  }
  .capabilities-pattern .grid:has(> .capability-card),
  .industry-grid-pattern .grid:has(> .industry-solution-card) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .capabilities-pattern .grid:has(> .capability-card) {
    gap: 18px;
  }
  .capability-card {
    min-height: 164px;
    padding: 24px 26px;
  }
  .capability-copy h3 {
    font-size: 21px;
  }
  .capability-copy p {
    font-size: 15px;
  }
  .ecosystem-classic-pattern .urovo-marquee {
    --marquee-item-width: max(190px, calc((var(--products-viewport, 100vw) - 104px) / 3)) !important;
    --marquee-mobile-item-width: max(190px, calc((var(--products-viewport, 100vw) - 104px) / 3)) !important;
    --marquee-gap: 28px !important;
  }
  .ecosystem-classic-pattern .partner figure > div {
    height: 24px;
  }
  .ecosystem-classic-pattern .partner p {
    font-size: 10px;
  }
}
@media (max-width: 639px) {
  :is(
      .products-hero-pattern,
      .capabilities-pattern,
      .ecosystem-classic-pattern,
      .industry-grid-pattern,
      .faq-pattern,
      .mobile-cta-pattern,
      .products-list-pattern
    )
    > .container {
    width: calc(100% - 40px);
  }
  :is(.capabilities-pattern, .ecosystem-classic-pattern, .industry-grid-pattern, .faq-pattern, .mobile-cta-pattern, .products-list-pattern)
    header:not(:has(> .flex))
    h2 {
    font-size: 23px;
  }
  .capabilities-pattern .grid:has(> .capability-card),
  .industry-grid-pattern .grid:has(> .industry-solution-card) {
    grid-template-columns: 1fr;
  }
  .capabilities-pattern .grid:has(> .capability-card) {
    gap: 14px;
  }
  .capability-card {
    min-height: 158px;
    padding: 23px 22px;
  }
  .industry-grid-pattern .grid:has(> .industry-solution-card) {
    gap: 16px;
  }
  .industry-grid-pattern header:not(:has(> .flex)) {
    margin-bottom: 30px;
  }
  .industry-solution-copy h3 {
    min-height: 0;
    font-size: 19px;
  }
  .ecosystem-classic-pattern .urovo-marquee {
    --marquee-item-width: max(145px, calc((var(--products-viewport, 100vw) - 58px) / 2)) !important;
    --marquee-mobile-item-width: max(145px, calc((var(--products-viewport, 100vw) - 58px) / 2)) !important;
    --marquee-gap: 18px !important;
  }
  .ecosystem-classic-pattern .partner {
    padding-left: 16px;
  }
  .ecosystem-classic-pattern .partner figure > div {
    height: 23px;
  }
  .ecosystem-classic-pattern .partner img {
    max-width: 115px;
  }
  .ecosystem-classic-pattern .partner p {
    font-size: 9px;
  }
  .ecosystem-classic-pattern .partner > div:has(p) {
    margin-top: 14px;
  }
  .products-hero-pattern header .urovo-button {
    --button-font: 14;
    font-size: 14px;
    --button-padding-y: 13;
    --button-padding-x: 22;
    padding: 13px 22px;
  }
}

/* Classic ecosystem retains its own title size at smaller breakpoints. */
@media (max-width: 1023px) {
  .ecosystem-classic-pattern header:not(:has(> .flex)) h2 {
    font-size: 30px;
  }
}
@media (max-width: 639px) {
  .ecosystem-classic-pattern header:not(:has(> .flex)) {
    margin-bottom: 35px;
  }
}

/* RETAIL-06: scoped variants of existing Canvas patterns. */
.logistics-solution-capabilities .industry-solution-card figure,
.logistics-solution-capabilities .industry-solution-card figure > div,
.logistics-solution-capabilities .industry-solution-card img {
  aspect-ratio: 1.2;
}
.logistics-solution-capabilities .industry-solution-copy {
  min-height: calc(176 * var(--products-u));
  padding: calc(28 * var(--products-u)) calc(22 * var(--products-u));
}
.logistics-solution-capabilities .industry-solution-copy h3 {
  font-size: max(14px, calc(20 * var(--products-u)));
}
.logistics-solution-capabilities .industry-solution-copy p {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}
.logistics-solution-workflow .urovo-tabs__list {
  justify-content: center;
}
.logistics-solution-workflow .urovo-tabs .urovo-tabs__trigger,
.logistics-solution-workflow .urovo-tabs__trigger {
  background: var(--accent);
  color: var(--accent-foreground, var(--foreground));
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.logistics-solution-workflow .urovo-tabs .urovo-tabs__trigger:hover:not([aria-selected="true"]),
.logistics-solution-workflow .urovo-tabs__trigger:hover:not([aria-selected="true"]) {
  background: color-mix(in srgb, var(--accent), var(--foreground) 6%);
}
.logistics-solution-workflow .urovo-tabs .urovo-tabs__trigger[aria-selected="true"],
.logistics-solution-workflow .urovo-tabs__trigger[aria-selected="true"] {
  background: #333;
  color: white;
  font-weight: 600;
}
section.logistics-solution-stories:has(.urovo-stories-grid[data-ui]) header:not(:has(> .flex)) h2 {
  text-align: center;
}
@media (max-width: 639px) {
  .logistics-solution-workflow .urovo-tabs__list {
    justify-content: start;
  }
}

/* Product-list layout uses the same editable section header as other patterns. */
.products-list-pattern {
  scroll-margin-top: 100px;
}
.products-list-pattern header:not(:has(> .flex)) {
  margin-bottom: 52px;
}
.products-list-pattern header:not(:has(> .flex)) > div:has(p) {
  margin-top: 16px;
}
@media (max-width: 767px) {
  .products-list-pattern header:not(:has(> .flex)) {
    margin-bottom: 32px;
  }
}

/* Contact us uses Hero V1 with the PDF's 1920 x 600 visible image window. */
.products-hero-pattern.contact-us-hero {
  min-height: clamp(240px, 31.25vw, 600px);
}

/* Tab panels already animate horizontally; avoid a second reveal on first use. */
.faq-tabs-pattern .faq-pattern.products-pattern-enhanced .products-reveal-target {
  opacity: 1;
  translate: none;
  transition: none;
}