/* Page Components - Product Lifecycle */

section.product-lifecycle { background-position: center center; overflow: hidden; background: url('../../assets/images/bg-dark-gradient-opt.png'); background-size: cover; }
section.product-lifecycle:after { content: ""; position: absolute; width: 1100px; height: 75%; right: -25%; bottom: -22%; z-index: 2; background-image: url('../../assets/images/dna-blur-pattern-opt.png'); background-size: contain; pointer-events: none; background-repeat: no-repeat; }
section.product-lifecycle .row { position: relative; z-index: 3; }
.lifestyle-chart-container { display: flex; gap: clamp(3rem, 5vw, 5rem); margin: 3rem 0; }
.lifestyle-chart-container .chart-column { background-color: var(--accent-quaternary); border: 1px solid var(--darker-gray); border-radius: 0.556rem; flex: 1 1; height: max-content; position: relative; }
.lifestyle-chart-container .chart-column:after { content: "\ea22"; font-family: var(--icon-family); position: absolute; top: 2.5rem; right: calc(-1 * ((0.5 * (clamp(3rem, 5vw, 5rem))) + 0.9rem)); color: var(--primary); transform: rotate(-90deg); transform-origin: center; width: 1.667rem; height: 1.667rem; display: flex; justify-content: center; align-items: center; }
.lifestyle-chart-container .chart-column:last-child:after { content: none; }
.lifestyle-chart-container .column-cell { padding: clamp(1rem, 2vw, 1.556rem) clamp(1.5rem, 2vw, 1.667rem); border-top: 1px solid var(--darker-gray); text-align: center; }
.lifestyle-chart-container .column-cell p { margin-bottom: 0; }
.lifestyle-chart-container .column-cell.column-header { background-color: var(--darker-gray); border-radius: 0.45rem 0.45rem 0 0; padding: clamp(1rem, 2vw, 1.556rem) clamp(1.5rem, 3vw, 2.5rem); }
.lifestyle-chart-container .column-cell.column-header h3 { margin-bottom: 0; font-size: 1.222rem; }
.product-lifecycle .button__container { gap: 0.5rem 15%!important; }
.product-lifecycle .button__container .button { --color: var(--secondary)!important; --hover-color: var(--primary)!important; --arrow-color: var(--secondary)!important; --hover-arrow-color: var(--primary)!important; backdrop-filter: unset; }

@media (max-width: 1200px) {
    section.product-lifecycle:after { opacity: 0.5; }
    .lifestyle-chart-container { flex-wrap: wrap; margin: 1.5rem 0 3rem; }
    .lifestyle-chart-container .chart-column { flex: 1 1 45%; }
    .lifestyle-chart-container .chart-column:after { top: 1.5rem; }
    .lifestyle-chart-container .chart-column:nth-child(even):after { top: unset; right: unset; left: calc(-1 * ((0.5 * (clamp(3rem, 5vw, 5rem))) + 0.85rem)); bottom: calc(-1 * ((0.5 * (clamp(3rem, 5vw, 5rem))) + 0.85rem)); transform: rotate(45deg); }
}
@media (max-width: 650px) {
    .lifestyle-chart-container .chart-column { flex: 1 1 100%; }
    .lifestyle-chart-container .chart-column:after,
    .lifestyle-chart-container .chart-column:nth-child(even):after { top: unset; left: 0; right: 0; bottom: calc(-1 * ((0.5 * (clamp(3rem, 5vw, 5rem))) + 0.85rem)); margin-left: auto; margin-right: auto; transform: rotate(0deg); }
}