.everything {
  padding-block: clamp(50px, 8vw, 75px);
  background: #f6f5f8;
}

/* === Header === */
.everything__header {
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.everything__eyebrow {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.everything__title {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.18;
  text-wrap: normal;
}

/* === Body === */
.everything__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  position: relative;
}

/* === Left: media card with screenshot + floating logo badge === */
.everything__media {
  position: relative;
  background: #bcd8ff;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 12px 32px -8px rgba(15, 17, 21, 0.08),
              0 4px 8px -2px rgba(15, 17, 21, 0.04);
}

.everything__media-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  opacity: 0;
}

/* Image 1 stays in flow (defines the stack height); images 2–6 overlay absolutely */
.everything__media-img--2,
.everything__media-img--3,
.everything__media-img--4,
.everything__media-img--5,
.everything__media-img--6 {
  position: absolute;
    inset: 32px;
    width: auto;
    height: auto;
    max-width: calc(100% - 45px);
    max-height: calc(100% - 45px);
    object-fit: cover;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    right:0
}

/* Image opacity cycling — reuses b-fill-N keyframes (opacity 1 during active phase) */
.everything__media-img--1 { animation: b-fill-0 36s linear infinite; }
.everything__media-img--2 { animation: b-fill-1 36s linear infinite; }
.everything__media-img--3 { animation: b-fill-2 36s linear infinite; }
.everything__media-img--4 { animation: b-fill-3 36s linear infinite; }
.everything__media-img--5 { animation: b-fill-4 36s linear infinite; }
.everything__media-img--6 { animation: b-fill-5 36s linear infinite; }

.everything__media-logo {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 64px;
  height: 64px;
  background: #ffffff;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px -4px rgba(15, 17, 21, 0.12),
              0 1px 3px rgba(15, 17, 21, 0.06);
}

.everything__media-logo img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

/* === Right: benefits list === */
.b-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.benefit {
  position: relative;
  border-radius: 0 12px 12px 0;
  background-color: transparent;
}

/* Always-visible gray track on the left */
.benefit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--color-border);
  border-radius: 2px;
  opacity: 0;
}

/* Active item shows the gray track (others have no left bar visible) */
.benefit--has-bar::before { opacity: 1; }

/* The 3px blue progress bar */
.benefit__progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0%;
  background: var(--color-primary);
  border-radius: 2px;
  opacity: 0;
  z-index: 1;
}

.benefit__label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px 16px 22px;
  cursor: pointer;
  width: 100%;
}

/* Check icons (two stacked, opacity-toggled) */
.benefit__check {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

.benefit__check svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.benefit__check-outline { opacity: 1; color: var(--color-text-subtle); }
.benefit__check-filled  { opacity: 0; color: var(--color-primary); }

.benefit__content {
  flex: 1;
  min-width: 0;
}

.benefit__title {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.benefit__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
}

/* === Auto-cycle: 24s total, 4s per item, 6 items === */
/* 1/6 = 16.67%; phase boundaries at 16.67%, 33.33%, 50%, 66.67%, 83.33% */

/* --- Progress bar (height 0->100% during active window) --- */
@keyframes b-progress-0 {
  0%   { height: 0%; opacity: 1; }
  16.66% { height: 100%; opacity: 1; }
  16.67% { height: 0%; opacity: 0; }
  100% { height: 0%; opacity: 0; }
}
@keyframes b-progress-1 {
  0%, 16.66% { height: 0%; opacity: 0; }
  16.67% { height: 0%; opacity: 1; }
  33.32% { height: 100%; opacity: 1; }
  33.33% { height: 0%; opacity: 0; }
  100% { height: 0%; opacity: 0; }
}
@keyframes b-progress-2 {
  0%, 33.32% { height: 0%; opacity: 0; }
  33.33% { height: 0%; opacity: 1; }
  49.99% { height: 100%; opacity: 1; }
  50% { height: 0%; opacity: 0; }
  100% { height: 0%; opacity: 0; }
}
@keyframes b-progress-3 {
  0%, 49.99% { height: 0%; opacity: 0; }
  50% { height: 0%; opacity: 1; }
  66.65% { height: 100%; opacity: 1; }
  66.66% { height: 0%; opacity: 0; }
  100% { height: 0%; opacity: 0; }
}
@keyframes b-progress-4 {
  0%, 66.65% { height: 0%; opacity: 0; }
  66.66% { height: 0%; opacity: 1; }
  83.32% { height: 100%; opacity: 1; }
  83.33% { height: 0%; opacity: 0; }
  100% { height: 0%; opacity: 0; }
}
@keyframes b-progress-5 {
  0%, 83.32% { height: 0%; opacity: 0; }
  83.33% { height: 0%; opacity: 1; }
  100% { height: 100%; opacity: 1; }
}

/* --- Background (white during active) --- */
@keyframes b-bg-0 {
  0%, 16.66% { background-color: #ffffff; }
  16.67%, 100% { background-color: transparent; }
}
@keyframes b-bg-1 {
  0%, 16.66% { background-color: transparent; }
  16.67%, 33.32% { background-color: #ffffff; }
  33.33%, 100% { background-color: transparent; }
}
@keyframes b-bg-2 {
  0%, 33.32% { background-color: transparent; }
  33.33%, 49.99% { background-color: #ffffff; }
  50%, 100% { background-color: transparent; }
}
@keyframes b-bg-3 {
  0%, 49.99% { background-color: transparent; }
  50%, 66.65% { background-color: #ffffff; }
  66.66%, 100% { background-color: transparent; }
}
@keyframes b-bg-4 {
  0%, 66.65% { background-color: transparent; }
  66.66%, 83.32% { background-color: #ffffff; }
  83.33%, 100% { background-color: transparent; }
}
@keyframes b-bg-5 {
  0%, 83.32% { background-color: transparent; }
  83.33%, 100% { background-color: #ffffff; }
}

/* --- Outline check icon (hidden during active) --- */
@keyframes b-out-0 {
  0%, 16.66% { opacity: 0; }
  16.67%, 100% { opacity: 1; }
}
@keyframes b-out-1 {
  0%, 16.66% { opacity: 1; }
  16.67%, 33.32% { opacity: 0; }
  33.33%, 100% { opacity: 1; }
}
@keyframes b-out-2 {
  0%, 33.32% { opacity: 1; }
  33.33%, 49.99% { opacity: 0; }
  50%, 100% { opacity: 1; }
}
@keyframes b-out-3 {
  0%, 49.99% { opacity: 1; }
  50%, 66.65% { opacity: 0; }
  66.66%, 100% { opacity: 1; }
}
@keyframes b-out-4 {
  0%, 66.65% { opacity: 1; }
  66.66%, 83.32% { opacity: 0; }
  83.33%, 100% { opacity: 1; }
}
@keyframes b-out-5 {
  0%, 83.32% { opacity: 1; }
  83.33%, 100% { opacity: 0; }
}

/* --- Filled check icon (visible during active) --- */
@keyframes b-fill-0 {
  0%, 16.66% { opacity: 1; }
  16.67%, 100% { opacity: 0; }
}
@keyframes b-fill-1 {
  0%, 16.66% { opacity: 0; }
  16.67%, 33.32% { opacity: 1; }
  33.33%, 100% { opacity: 0; }
}
@keyframes b-fill-2 {
  0%, 33.32% { opacity: 0; }
  33.33%, 49.99% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes b-fill-3 {
  0%, 49.99% { opacity: 0; }
  50%, 66.65% { opacity: 1; }
  66.66%, 100% { opacity: 0; }
}
@keyframes b-fill-4 {
  0%, 66.65% { opacity: 0; }
  66.66%, 83.32% { opacity: 1; }
  83.33%, 100% { opacity: 0; }
}
@keyframes b-fill-5 {
  0%, 83.32% { opacity: 0; }
  83.33%, 100% { opacity: 1; }
}

/* --- Description (visible during active) --- */
@keyframes b-desc-0 {
  0%, 16.66% { opacity: 1; max-height: 200px; margin-top: 8px; }
  16.67%, 100% { opacity: 0; max-height: 0; margin-top: 0; }
}
@keyframes b-desc-1 {
  0%, 16.66% { opacity: 0; max-height: 0; margin-top: 0; }
  16.67%, 33.32% { opacity: 1; max-height: 200px; margin-top: 8px; }
  33.33%, 100% { opacity: 0; max-height: 0; margin-top: 0; }
}
@keyframes b-desc-2 {
  0%, 33.32% { opacity: 0; max-height: 0; margin-top: 0; }
  33.33%, 49.99% { opacity: 1; max-height: 200px; margin-top: 8px; }
  50%, 100% { opacity: 0; max-height: 0; margin-top: 0; }
}
@keyframes b-desc-3 {
  0%, 49.99% { opacity: 0; max-height: 0; margin-top: 0; }
  50%, 66.65% { opacity: 1; max-height: 200px; margin-top: 8px; }
  66.66%, 100% { opacity: 0; max-height: 0; margin-top: 0; }
}
@keyframes b-desc-4 {
  0%, 66.65% { opacity: 0; max-height: 0; margin-top: 0; }
  66.66%, 83.32% { opacity: 1; max-height: 200px; margin-top: 8px; }
  83.33%, 100% { opacity: 0; max-height: 0; margin-top: 0; }
}
@keyframes b-desc-5 {
  0%, 83.32% { opacity: 0; max-height: 0; margin-top: 0; }
  83.33%, 100% { opacity: 1; max-height: 200px; margin-top: 8px; }
}

/* === Default assignments (cycle starts from item 1) === */
.benefits-list > .benefit:nth-child(1) { animation: b-bg-0 36s linear infinite; }
.benefits-list > .benefit:nth-child(2) { animation: b-bg-1 36s linear infinite; }
.benefits-list > .benefit:nth-child(3) { animation: b-bg-2 36s linear infinite; }
.benefits-list > .benefit:nth-child(4) { animation: b-bg-3 36s linear infinite; }
.benefits-list > .benefit:nth-child(5) { animation: b-bg-4 36s linear infinite; }
.benefits-list > .benefit:nth-child(6) { animation: b-bg-5 36s linear infinite; }

.benefits-list > .benefit:nth-child(1) .benefit__progress { animation: b-progress-0 36s linear infinite; }
.benefits-list > .benefit:nth-child(2) .benefit__progress { animation: b-progress-1 36s linear infinite; }
.benefits-list > .benefit:nth-child(3) .benefit__progress { animation: b-progress-2 36s linear infinite; }
.benefits-list > .benefit:nth-child(4) .benefit__progress { animation: b-progress-3 36s linear infinite; }
.benefits-list > .benefit:nth-child(5) .benefit__progress { animation: b-progress-4 36s linear infinite; }
.benefits-list > .benefit:nth-child(6) .benefit__progress { animation: b-progress-5 36s linear infinite; }

.benefits-list > .benefit:nth-child(1) .benefit__check-outline { animation: b-out-0 36s linear infinite; }
.benefits-list > .benefit:nth-child(2) .benefit__check-outline { animation: b-out-1 36s linear infinite; }
.benefits-list > .benefit:nth-child(3) .benefit__check-outline { animation: b-out-2 36s linear infinite; }
.benefits-list > .benefit:nth-child(4) .benefit__check-outline { animation: b-out-3 36s linear infinite; }
.benefits-list > .benefit:nth-child(5) .benefit__check-outline { animation: b-out-4 36s linear infinite; }
.benefits-list > .benefit:nth-child(6) .benefit__check-outline { animation: b-out-5 36s linear infinite; }

.benefits-list > .benefit:nth-child(1) .benefit__check-filled { animation: b-fill-0 36s linear infinite; }
.benefits-list > .benefit:nth-child(2) .benefit__check-filled { animation: b-fill-1 36s linear infinite; }
.benefits-list > .benefit:nth-child(3) .benefit__check-filled { animation: b-fill-2 36s linear infinite; }
.benefits-list > .benefit:nth-child(4) .benefit__check-filled { animation: b-fill-3 36s linear infinite; }
.benefits-list > .benefit:nth-child(5) .benefit__check-filled { animation: b-fill-4 36s linear infinite; }
.benefits-list > .benefit:nth-child(6) .benefit__check-filled { animation: b-fill-5 36s linear infinite; }

.benefits-list > .benefit:nth-child(1) .benefit__desc { animation: b-desc-0 36s linear infinite; }
.benefits-list > .benefit:nth-child(2) .benefit__desc { animation: b-desc-1 36s linear infinite; }
.benefits-list > .benefit:nth-child(3) .benefit__desc { animation: b-desc-2 36s linear infinite; }
.benefits-list > .benefit:nth-child(4) .benefit__desc { animation: b-desc-3 36s linear infinite; }
.benefits-list > .benefit:nth-child(5) .benefit__desc { animation: b-desc-4 36s linear infinite; }
.benefits-list > .benefit:nth-child(6) .benefit__desc { animation: b-desc-5 36s linear infinite; }

/* === Hover-to-activate ===
   While hovering, kill all animations and show only the hovered one as active. */

.everything__body:has(.benefit:hover) .benefits-list > .benefit:not(:hover),
.everything__body:has(.benefit:hover) .benefits-list > .benefit:not(:hover) .benefit__progress,
.everything__body:has(.benefit:hover) .benefits-list > .benefit:not(:hover) .benefit__check-outline,
.everything__body:has(.benefit:hover) .benefits-list > .benefit:not(:hover) .benefit__check-filled,
.everything__body:has(.benefit:hover) .benefits-list > .benefit:not(:hover) .benefit__desc {
  animation: none;
}

.everything__body:has(.benefit:hover) .benefits-list > .benefit:not(:hover) {
  background-color: transparent;
}
.everything__body:has(.benefit:hover) .benefits-list > .benefit:not(:hover) .benefit__progress {
  height: 0%;
  opacity: 0;
}
.everything__body:has(.benefit:hover) .benefits-list > .benefit:not(:hover) .benefit__check-outline { opacity: 1; }
.everything__body:has(.benefit:hover) .benefits-list > .benefit:not(:hover) .benefit__check-filled  { opacity: 0; }
.everything__body:has(.benefit:hover) .benefits-list > .benefit:not(:hover) .benefit__desc {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
}

/* Activate hovered item */
.benefits-list > .benefit:hover {
  animation: none;
  background-color: #ffffff;
}
.benefits-list > .benefit:hover .benefit__progress {
  animation: none;
  height: 100%;
  opacity: 1;
}
.benefits-list > .benefit:hover .benefit__check-outline {
  animation: none;
  opacity: 0;
}
.benefits-list > .benefit:hover .benefit__check-filled {
  animation: none;
  opacity: 1;
}
.benefits-list > .benefit:hover .benefit__desc {
  animation: none;
  opacity: 1;
  max-height: 200px;
  margin-top: 8px;
}

/* Hover-driven media image swap: only the matching image stays visible */
.everything__body:has(.benefit:hover) .everything__media-img {
  animation: none;
  opacity: 0;
}

.everything__body:has(.benefits-list > .benefit:nth-child(1):hover) .everything__media-img--1 { opacity: 1; }
.everything__body:has(.benefits-list > .benefit:nth-child(2):hover) .everything__media-img--2 { opacity: 1; }
.everything__body:has(.benefits-list > .benefit:nth-child(3):hover) .everything__media-img--3 { opacity: 1; }
.everything__body:has(.benefits-list > .benefit:nth-child(4):hover) .everything__media-img--4 { opacity: 1; }
.everything__body:has(.benefits-list > .benefit:nth-child(5):hover) .everything__media-img--5 { opacity: 1; }
.everything__body:has(.benefits-list > .benefit:nth-child(6):hover) .everything__media-img--6 { opacity: 1; }

/* === Reduced motion: show first item active === */
@media (prefers-reduced-motion: reduce) {
  .benefits-list > .benefit { animation: none; }
  .benefits-list > .benefit:nth-child(1) { background-color: #ffffff; }
  .benefits-list > .benefit:nth-child(1) .benefit__progress { animation: none; height: 100%; opacity: 1; }
  .benefits-list > .benefit:nth-child(n+2) .benefit__progress { animation: none; }
  .benefits-list > .benefit:nth-child(1) .benefit__check-outline { animation: none; opacity: 0; }
  .benefits-list > .benefit:nth-child(1) .benefit__check-filled { animation: none; opacity: 1; }
  .benefits-list > .benefit:nth-child(n+2) .benefit__check-outline { animation: none; opacity: 1; }
  .benefits-list > .benefit:nth-child(n+2) .benefit__check-filled { animation: none; opacity: 0; }
  .benefits-list > .benefit:nth-child(1) .benefit__desc { animation: none; opacity: 1; max-height: 200px; margin-top: 8px; }
  .benefits-list > .benefit:nth-child(n+2) .benefit__desc { animation: none; opacity: 0; max-height: 0; margin-top: 0; }
}

/* === Desktop === */
@media (min-width: 1024px) {
  .everything {
    padding-block: 75px;
  }

  .everything__header {
    margin-bottom: 64px;
  }

  .everything__body {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 64px;
  }

  .everything__media {
    padding: 40px;
  }

  .benefit__label {
    padding: 18px 24px 18px 26px;
  }

  .benefit__title {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
 .everything__header {
  margin-bottom:30px;
}
.benefits-list {
    gap: 8px;
}
.everything__body {
    gap: 20px;
}
}