/* Ecosystem pieces — Figma: Stepper (243:6461), Step item (243:6436), Product column (243:6547),
   Screen pair (237:2681), Flow rule (243:6384), Integrations strip (243:6903).
   Mobile (Figma 115:860): product columns become a plain text list; visuals, stepper and strip hidden. */

/* ---------- Stepper ---------- */
.stepper {
  display: grid;
  grid-template-columns: repeat(var(--stepper-columns, 4), minmax(0, 1fr));
  column-gap: var(--stepper-gap, var(--space-24));
}
.stepper__item {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-width: 0;
}
.stepper__dot {
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: var(--color-brand-primary);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-text-inverse);
}
.stepper__label {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-text-link);
}
/* The line runs on through the column gap to the next dot */
.stepper__line {
  flex: 1 1 auto;
  height: 2px;
  margin-right: calc(-1 * var(--stepper-gap, var(--space-24)));
  background: var(--color-brand-primary);
  transform-origin: left center;
}

/* Reveal: stops appear one by one, each line draws towards the next stop */
.js [data-reveal] .stepper__dot,
.js [data-reveal] .stepper__label {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 400ms var(--ease-out-soft), transform 500ms var(--ease-out-soft);
  transition-delay: calc(var(--step) * 450ms + 200ms);
}
.js [data-reveal] .stepper__label { transform: translate3d(-6px, 0, 0); }
.js [data-reveal] .stepper__line {
  transform: scaleX(0);
  transition: transform 450ms var(--ease-standard);
  transition-delay: calc(var(--step) * 450ms + 400ms);
}
.js [data-reveal].is-revealed .stepper__dot,
.js [data-reveal].is-revealed .stepper__label { opacity: 1; transform: none; }
.js [data-reveal].is-revealed .stepper__line { transform: none; }

/* ---------- Flow rule ---------- */
.flow-rule {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-10);
  border-radius: 10px;
}
.flow-rule__icon { font-size: 13px; line-height: 1.3; font-weight: 600; }
.flow-rule__text {
  flex: 1 1 0;
  min-width: 0;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-text-primary);
}
.flow-rule--done { background: var(--color-feedback-success-tint); }
.flow-rule--done .flow-rule__icon { color: var(--color-feedback-success); }
.flow-rule--pending { background: var(--color-surface-subtle); }
.flow-rule--pending .flow-rule__icon { color: var(--color-text-disabled); }

/* ---------- Screen pair (card size 282 × 300; frames positioned in %) ---------- */
.screen-pair {
  position: relative;
  aspect-ratio: 282 / 300;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(133deg, #1e56c3 14%, #4d9efa 86%);
}
.screen-pair__frame {
  position: absolute;
  overflow: hidden;
  --float-scale: 0.6;
}
.screen-pair__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

.screen-pair--phone .screen-pair__frame {
  width: 39.72%;
  height: 81%;
  border: 3px solid rgba(20, 33, 43, 0.9);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 16px 32px -6px rgba(13, 26, 64, 0.28);
}
.screen-pair--phone .screen-pair__frame--1 { left: 7.09%; top: 7.33%; }
.screen-pair--phone .screen-pair__frame--2 { left: 53.19%; top: 14.67%; }

.screen-pair--browser .screen-pair__frame {
  height: 39.8%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 30px -6px rgba(13, 26, 64, 0.3);
}
.screen-pair--browser .screen-pair__frame--1 { left: 5.21%; top: 16%; width: 81.77%; }
.screen-pair--browser .screen-pair__frame--2 { left: 12.77%; top: 46.05%; width: 82.27%; }

/* ---------- Product column ---------- */
.product-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-block: var(--space-20);
  border-top: 1px solid var(--color-border-divider);
}
.product-column__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  row-gap: var(--space-8);
  column-gap: var(--space-8);
}
.product-column__name {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.product-column--featured .product-column__name { color: var(--color-brand-primary); }
.product-column__index { font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--color-text-secondary); }
.product-column__role {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.product-column__text { font-size: 15px; line-height: 1.5; color: var(--color-text-secondary); }
.product-column__visual { display: none; }

/* Visual panel (Flow rules, MR chart) */
.product-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-10);
  aspect-ratio: 282 / 300;
  padding: var(--space-16);
  border: 1px solid var(--color-border-default);
  border-radius: 16px;
  background: var(--color-surface-page);
  box-shadow: var(--shadow-card-soft);
}
.product-panel__caption { font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--color-text-secondary); }
.product-panel__value {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-6);
}
.bar-chart__item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}
.bar-chart__bar {
  width: 100%;
  height: var(--bar-height);
  border-radius: var(--radius-xs);
  background: var(--color-brand-primary);
  transform-origin: bottom center;
}
.bar-chart__label { font-size: 12px; line-height: 1.4; font-weight: 500; white-space: nowrap; color: var(--color-text-secondary); }

/* Reveal: flow rules tick in, chart bars grow */
.js [data-reveal] .product-panel .flow-rule {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 450ms var(--ease-out-soft), transform 450ms var(--ease-out-soft);
}
.js [data-reveal] .product-panel .flow-rule:nth-child(1) { transition-delay: 500ms; }
.js [data-reveal] .product-panel .flow-rule:nth-child(2) { transition-delay: 800ms; }
.js [data-reveal] .product-panel .flow-rule:nth-child(3) { transition-delay: 1100ms; }
.js [data-reveal].is-revealed .product-panel .flow-rule { opacity: 1; transform: none; }

.js [data-reveal] .bar-chart__bar { transform: scaleY(0); transition: transform 700ms var(--ease-out-soft); }
.js [data-reveal] .bar-chart__item:nth-child(1) .bar-chart__bar { transition-delay: 500ms; }
.js [data-reveal] .bar-chart__item:nth-child(2) .bar-chart__bar { transition-delay: 600ms; }
.js [data-reveal] .bar-chart__item:nth-child(3) .bar-chart__bar { transition-delay: 700ms; }
.js [data-reveal] .bar-chart__item:nth-child(4) .bar-chart__bar { transition-delay: 800ms; }
.js [data-reveal].is-revealed .bar-chart__bar { transform: none; }

/* The pending rule's dots breathe, as if the automation is still running */
.flow-rule--pending .flow-rule__icon { animation: flow-pending 1.6s ease-in-out infinite; }
@keyframes flow-pending { 50% { opacity: 0.35; } }

/* ---------- Integrations strip ---------- */
.integrations-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12) var(--space-16);
  padding: 18px var(--space-24);
  border: 1px solid var(--color-border-default);
  border-radius: 16px;
  background: var(--color-surface-page);
}
.integrations-strip__title {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.002em;
  color: var(--color-text-primary);
}
.integrations-strip__tags { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); }
.integrations-strip__tag { border-radius: var(--radius-sm); }
.integrations-strip__note {
  margin-left: auto;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* =========================================================
   ≥ 1024: columns with visuals
   ========================================================= */
@media (min-width: 1024px) {
  .product-column {
    gap: var(--space-16);
    padding-block: 0;
    border-top: 0;
  }
  .product-column__head { row-gap: var(--space-4); }
  .product-column__name { font-size: 22px; letter-spacing: -0.01em; }
  .product-column__index { display: none; }
  .product-column__role { font-size: 13px; line-height: 1.3; }
  .product-column__visual { display: block; }
  .product-column__text { line-height: 1.55; letter-spacing: -0.002em; }
}

/* Tablet (2 × 2): landscape visuals so each card isn't taller than it is wide */
@media (min-width: 1024px) and (max-width: 1279px) {
  .screen-pair,
  .product-panel { aspect-ratio: 16 / 10; }

  .screen-pair--phone .screen-pair__frame { width: auto; height: 81%; aspect-ratio: 112 / 243; }
  .screen-pair--phone .screen-pair__frame--1 { left: auto; right: calc(50% + 8px); top: 7.33%; }
  .screen-pair--phone .screen-pair__frame--2 { left: calc(50% + 8px); top: 14.67%; }

  .screen-pair--browser .screen-pair__frame { width: 64%; height: auto; aspect-ratio: 1746 / 901; }
  .screen-pair--browser .screen-pair__frame--1 { left: 8%; top: 10%; width: 64%; }
  .screen-pair--browser .screen-pair__frame--2 { left: 28%; top: 42%; width: 64%; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-rule--pending .flow-rule__icon { animation: none; }
}