.naxit-workflow-track { width: 100%; max-width: 1440px; position: relative; }
.naxit-workflow-pin { width: 100%; position: relative; isolation: isolate; }
.naxit-workflow-pin::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -140px -80px;
  pointer-events: none;
  background: radial-gradient(ellipse at 15% 45%, rgba(49,121,141,.26), transparent 60%), radial-gradient(ellipse at 85% 55%, rgba(134,181,194,.30), transparent 60%);
  filter: blur(48px);
  animation: naxit-gradient-drift-a 15s ease-in-out infinite;
}
.naxit-workflow-pin > * { position: relative; z-index: 1; }
.naxit-workflow-track .work-progress-block {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}
.naxit-workflow-track .work-progress-fill-line-block {
  display: flex;
  position: absolute;
  top: 50%;
  left: 0;
  align-items: flex-start;
  justify-content: center;
  width: 2px;
  height: calc(100% - 24px);
  transform: translateY(-50%);
  background-color: rgba(243,243,243,.2);
}
.naxit-workflow-track .work-progress-fill-line {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: flex-end;
  width: 2px;
  background-color: #86b5c2;
}
.naxit-workflow-track .work-progress-line-dot,
.naxit-workflow-track .work-progress-line-dot-gorw {
  display: flex;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #86b5c2;
}
.naxit-detail-page .work-progress-section > .container { position: relative; z-index: 1; }
@supports (overflow: clip) {
  body.naxit-detail-page { overflow-x: clip !important; }
}
.naxit-workflow-track--pinned > .naxit-workflow-pin { position: sticky; top: 48px; }
.naxit-workflow-tabs .w-tab-pane[hidden] { display: none !important; }
.naxit-workflow-tabs .w--tab-active { animation: naxit-workflow-reveal .4s ease both; }
.naxit-workflow-tabs .work-progress-tabs-content { flex: 1; min-width: 0; }
.naxit-workflow-tabs .work-progress-tab-link { color: #d2d0db; }
.naxit-workflow-tabs .work-progress-tab-link.w--current { color: #fff; }
.naxit-workflow-tabs .work-progress-tab-link:focus-visible { outline: 2px solid #86b5c2; outline-offset: -2px; }
.naxit-workflow-tabs .work-progress-image img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 992px) {
  .naxit-workflow-tabs .work-progress-image { max-height: 420px; }
}
.naxit-workflow-track--pinned .work-progress-fill-line { transition: height .4s ease; }
@keyframes naxit-workflow-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 991px) {
  .naxit-workflow-track .work-progress-fill-line-block { display: none; }
  .naxit-workflow-tabs .work-progress-tabs-menu { justify-content: flex-start; width: 100%; }
  .naxit-workflow-tabs .work-progress-tab-link { padding-inline: 16px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .naxit-workflow-pin::before { animation: none; }
  .naxit-workflow-tabs .w--tab-active { animation: none; }
  .naxit-workflow-track--pinned .work-progress-fill-line { transition: none; }
}

/* Text leads the workflow; the old image column is removed. */
.naxit-workflow-tabs { display: flex; flex-flow: row; gap: clamp(24px,4vw,64px); align-items: flex-start; }
.naxit-workflow-tabs .work-progress-tabs-menu { display: flex; flex-direction: column; width: 220px; flex: none; margin-right: 0; justify-content: flex-start; }
.naxit-workflow-tabs .work-progress-tab-link { padding: 19px 20px; font-size: clamp(20px,1.8vw,26px); line-height: 1.3; }
.naxit-workflow-tabs .work-progress-grid { grid-template-columns: minmax(0,1fr); padding: clamp(24px,3vw,40px); border-radius: 30px; background: linear-gradient(115deg,rgba(28,31,35,.72),rgba(28,31,35,.5)); }
.naxit-workflow-tabs .work-progress-text-wrapper { gap: 22px; }
.naxit-workflow-tabs .work-progress-text-wrapper h3 { font-size: clamp(30px,3vw,44px); line-height: 1.2; margin: 0; }
.naxit-workflow-tabs .work-progress-detail-list { padding-left: 24px; }
.naxit-workflow-tabs .work-progress-detail-list-item { font-size: 18px; line-height: 1.65; }
.naxit-ecommerce-page .naxit-workflow-tabs .work-progress-detail-list-item::marker { color: #fc734d; }
.naxit-detail-page .work-progress-section .heading-wrapper { text-align: left; align-items: flex-start; }
.naxit-workflow-pin::before { inset: -180px -90px; background: radial-gradient(ellipse at 10% 25%,rgba(49,121,141,.32),transparent 60%), radial-gradient(ellipse at 80% 45%,rgba(134,181,194,.36),transparent 65%); }
@media (min-width: 992px) {
  .naxit-ecommerce-page .work-progress-section > .container { max-width: 1860px; }
  .naxit-ecommerce-page .work-progress-section .section-wrapper { row-gap: clamp(80px, 7vw, 120px); }
  .naxit-ecommerce-page .naxit-workflow-track,
  .naxit-ecommerce-page .naxit-workflow-track .work-progress-block { max-width: none; }
  .naxit-ecommerce-page .naxit-workflow-tabs { width: 100%; }
  .naxit-ecommerce-page .naxit-workflow-tabs .work-progress-tabs-menu { width: 250px; }
  .naxit-ecommerce-page .naxit-workflow-tabs .work-progress-tab-link { background: transparent; }
  .naxit-ecommerce-page .naxit-workflow-tabs .work-progress-grid {
    align-content: start;
    min-height: 0;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .naxit-ecommerce-page .naxit-workflow-tabs .work-progress-detail-list {
    row-gap: 18px;
    padding-left: 36px;
    margin-top: 32px;
    margin-left: 0;
  }
}
@media (max-width: 991px) {
  .naxit-workflow-tabs { gap: 24px; }
  .naxit-workflow-tabs .work-progress-tabs-menu { width: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 0; }
  .naxit-workflow-tabs .work-progress-tab-link { padding: 14px 8px; font-size: clamp(16px,4.7vw,18px); text-align: center; }
  .naxit-workflow-tabs .work-progress-text-wrapper h3 { font-size: 30px; }
  .naxit-workflow-tabs .work-progress-grid { padding: 24px 20px; }
  .naxit-workflow-tabs .work-progress-detail-list-item { font-size: 17px; }
}

/* Keep the workflow readable in normal document flow on phones and tablets. */
@media (max-width: 991px) {
  .naxit-workflow-track { height: auto !important; }
  .naxit-workflow-track > .naxit-workflow-pin { position: relative; top: auto; min-height: 0 !important; }
  .naxit-workflow-pin::before { inset: 0; filter: none; animation: none; }
  .naxit-workflow-tabs { display: flex; flex-direction: column; width: 100%; min-width: 0; }
  .naxit-workflow-tabs .work-progress-tabs-menu { flex: none; min-width: 0; gap: 8px; }
  .naxit-workflow-tabs .work-progress-tabs-content { flex: none; width: 100%; min-width: 0; }
  .naxit-workflow-tabs .w-tab-pane:not([hidden]) { display: block; opacity: 1; animation: none; }
  .naxit-workflow-tabs .work-progress-grid { width: 100%; min-width: 0; }
  .naxit-workflow-tabs .work-progress-text-wrapper { min-width: 0; }
  .naxit-workflow-tabs .work-progress-text-wrapper h3 { overflow-wrap: anywhere; }
  .naxit-detail-page .work-progress-section .heading-wrapper [data-w-id] { opacity: 1 !important; transform: none !important; }
}
