/* ========================
   Product Life Cycle Section
 Desktop keeps existing styles; Mobile via .product-lifecycle-section-mobile
   ======================== */

.product-lifecycle-section .product-lifecycle-header {
  margin-bottom: var(--space-16);
  text-align: center;
}

/* ========================
   Grid Layout - 2 Column (desktop / shared)
   ======================== */

.product-lifecycle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.product-lifecycle-section:not(.product-lifecycle-section-mobile)
  .product-lifecycle-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(var(--bs-primary-100-rgb), 0.2);
}

/* 2-column layout for tablet and up */
@media (min-width: 768px) {
  .product-lifecycle-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-11);
  }
}

/* ========================
   Heading Styles (desktop / shared)
   ======================== */

.product-lifecycle-header-content {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.product-lifecycle-section:not(.product-lifecycle-section-mobile)
  .product-lifecycle-number {
  color: rgba(var(--bs-primary-50-rgb), 0.5);
  font-size: var(--font-size-h4-fluid);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
  min-width: 2rem;
}

.product-lifecycle-title-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
}

.product-lifecycle-section:not(.product-lifecycle-section-mobile)
  .product-lifecycle-title {
  margin: 0;
  font-size: var(--font-size-h4-fluid);
  font-weight: var(--font-weight-medium);
  color: var(--bs-primary-50);
  line-height: var(--line-height-heading);
}

/* ========================
   Description Styles (desktop / shared)
   ======================== */

.product-lifecycle-section:not(.product-lifecycle-section-mobile)
  .product-lifecycle-description {
  margin: 0;
  padding: 0;
  padding-left: var(--space-20);
  border: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--bs-primary-25);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.product-lifecycle-description ul,
.product-lifecycle-description ol {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
}

.product-lifecycle-description li {
  margin: 0;
  padding: 0;
  color: var(--bs-primary-25);
  line-height: 1.6;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.product-lifecycle-description li::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  background-color: var(--bs-primary-25);
  border-radius: 50%;
  margin-top: 0.25rem;
}

/* ========================
 Mobile
   bg-zinc-950, left header, circular visual, list rows
   ======================== */

.product-lifecycle-section-mobile {
  background-color: #04040a; /* zinc-950 */
  border-top: none;
  border-bottom: none;
}

.product-lifecycle-section-mobile.section-base,
.product-lifecycle-section-mobile.section-base-with-border {
  background-color: #04040a;
  padding-top: 0;
  padding-bottom: 0;
}

.product-lifecycle-section-mobile .product-lifecycle-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-17); /* gap-10 */
  width: 100%;
  padding-block: var(--space-17);
}

.product-lifecycle-section-mobile .product-lifecycle-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-9); /* gap-5 */
  width: 100%;
  margin-bottom: 0;
  text-align: left;
}

.product-lifecycle-section-mobile .product-lifecycle-heading,
.product-lifecycle-section-mobile .product-lifecycle-heading.title-2xl {
  width: 100%;
  margin: 0;
  text-align: left !important;
  color: var(--bs-primary-50); /* teal-100 */
  font-size: var(--font-size-30); /* text-3xl */
  font-weight: var(--font-weight-bold);
  line-height: 2.5rem; /* leading-10 — restore larger sizing */
}

.product-lifecycle-section-mobile .product-lifecycle-heading *,
.product-lifecycle-section-mobile .product-lifecycle-heading p {
  margin: 0;
  text-align: left !important;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.product-lifecycle-section-mobile .product-lifecycle-intro {
  width: 100%;

  margin: 0;
  text-align: left !important;
  color: var(--bs-primary-25); /* cyan-100 */
  font-family: var(--font-family-base);
  font-size: var(--font-size-16); /* text-base */
  font-weight: var(--font-weight-regular);
  line-height: 1.5rem; /* leading-6 */
}

.product-lifecycle-section-mobile .product-lifecycle-intro *,
.product-lifecycle-section-mobile .product-lifecycle-intro p {
  margin: 0;
  text-align: left !important;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

/* Circular graphic + emerald radial glow */
.product-lifecycle-section-mobile .product-lifecycle-visual {
  position: relative;
  width: 20rem; /* size-80 */
  height: 20rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-lifecycle-section-mobile .product-lifecycle-visual-glow {
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--bs-primary-400-rgb), 0.6) 0%,
    rgba(var(--bs-primary-400-rgb), 0.35) 46%,
    rgba(4, 4, 10, 0) 93%
  );
  pointer-events: none;
  z-index: 0;
}

.product-lifecycle-section-mobile .product-lifecycle-visual-frame {
  position: relative;
  z-index: 1;
  width: 16rem; /* size-64 circle */
  height: 16rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--bs-black);
  box-shadow:
    0 0 0 0.0625rem rgba(var(--bs-primary-25-rgb), 0.08),
    0 0 2.5rem rgba(var(--bs-primary-400-rgb), 0.25);
}

.product-lifecycle-section-mobile .product-lifecycle-visual-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Numbered list rows */
.product-lifecycle-section-mobile .product-lifecycle-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.625rem; /* gap-2.5 */
  width: 100%;
}

.product-lifecycle-section-mobile .product-lifecycle-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.75rem; /* gap-7 */
  width: 100%;
  padding: var(--space-9); /* p-5 */
  margin: 0;
  background-color: #04040a;
  border: 0;
  border-bottom: 0.0625rem solid rgba(var(--bs-primary-25-rgb), 0.5); /* cyan-100/50 */
}

.product-lifecycle-section-mobile .product-lifecycle-number {
  flex-shrink: 0;
  min-width: 2.25rem;
  margin: 0;
  color: rgba(var(--bs-primary-25-rgb), 0.5); /* cyan-100/50 */
  font-family: var(--font-family-base);
  font-size: var(--font-size-30); /* text-3xl */
  font-weight: var(--font-weight-semibold);
  line-height: 2.25rem; /* leading-9 */
}

.product-lifecycle-section-mobile .product-lifecycle-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem; /* gap-2.5 */
  min-width: 0;
}

.product-lifecycle-section-mobile .product-lifecycle-title {
  margin: 0;
  color: var(--bs-primary-400); /* emerald-500 */
  font-family: var(--font-family-base);
  font-size: var(--font-size-20); /* text-lg */
  font-weight: var(--font-weight-bold);
  line-height: 1.5rem; /* leading-6 */
}

.product-lifecycle-section-mobile .product-lifecycle-title *,
.product-lifecycle-section-mobile .product-lifecycle-title p {
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.product-lifecycle-section-mobile .product-lifecycle-description {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--bs-primary-50); /* teal-100 */
  font-family: var(--font-family-base);
  font-size: var(--font-size-14); /* text-sm */
  font-weight: var(--font-weight-regular);
  line-height: 1.25rem; /* leading-5 */
}

.product-lifecycle-section-mobile .product-lifecycle-description *,
.product-lifecycle-section-mobile .product-lifecycle-description p {
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.product-lifecycle-section-mobile .product-lifecycle-description li::before {
  background-color: var(--bs-primary-50);
}

/* ========================
   RESPONSIVE DESIGN (desktop / shared only)
   ======================== */

@media (max-width: 767px) {
  .product-lifecycle-section:not(.product-lifecycle-section-mobile)
    .product-lifecycle-header {
    text-align: left !important;
  }

  .product-lifecycle-section:not(.product-lifecycle-section-mobile) {
    background-color: #04040a;
    border-top: none;
  }

  .product-lifecycle-section:not(.product-lifecycle-section-mobile)
    .product-lifecycle-number {
    font-size: 30px;
    line-height: 1;
  }

  .product-lifecycle-section:not(.product-lifecycle-section-mobile)
    .product-lifecycle-description {
    padding-left: 65px;
    font-size: 14px;
  }

  .product-lifecycle-section:not(.product-lifecycle-section-mobile)
    .product-lifecycle-header-content {
    align-items: start;
    gap: 30px;
  }

  .product-lifecycle-section:not(.product-lifecycle-section-mobile)
    .product-lifecycle-item:last-child {
    border-bottom: none;
  }

  .spatial-intelligence {
    margin: 0 -18px;
  }
}

@media (min-width: 576px) {
  .product-lifecycle-section:not(.product-lifecycle-section-mobile)
    .product-lifecycle-header {
    margin-bottom: var(--space-18);
  }

  .product-lifecycle-grid {
    gap: var(--space-10);
  }

  .product-lifecycle-description ul,
  .product-lifecycle-description ol {
    gap: var(--space-4);
  }

  .product-lifecycle-description li {
    gap: var(--space-3);
  }

  .product-lifecycle-description li::before {
    width: 0.375rem;
    height: 0.375rem;
  }
}

@media (min-width: 768px) {
  .product-lifecycle-section:not(.product-lifecycle-section-mobile)
    .product-lifecycle-header {
    margin-bottom: var(--space-20);
  }

  .product-lifecycle-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-11);
  }

  .product-lifecycle-description ul,
  .product-lifecycle-description ol {
    gap: var(--space-6);
  }

  .product-lifecycle-description li {
    gap: var(--space-3);
  }

  .product-lifecycle-description li::before {
    width: 0.375rem;
    height: 0.375rem;
  }
}

@media (min-width: 992px) {
  .product-lifecycle-section:not(.product-lifecycle-section-mobile)
    .product-lifecycle-header {
    margin-bottom: var(--space-22);
  }

  .product-lifecycle-section:not(.product-lifecycle-section-mobile)
    .product-lifecycle-description {
    padding-left: var(--space-21);
  }

  .product-lifecycle-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-13);
  }

  .product-lifecycle-header-content {
    gap: var(--space-11);
  }

  .product-lifecycle-description ul,
  .product-lifecycle-description ol {
    gap: var(--space-6);
  }

  .product-lifecycle-description li {
    gap: var(--space-3);
  }

  .product-lifecycle-description li::before {
    width: 0.375rem;
    height: 0.375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-lifecycle-section {
    transition: none;
  }
}