/* Order-to-cash accordion. Timings measured frame by frame from the reference recording:
   the open card is 3.3x a closed one, width eases out exponentially (~0.56 s), the text
   starts ~150 ms in and appears one word every ~28 ms, and vanishes at once on leave. */
.steps-section {
  isolation: isolate;
  padding: clamp(5rem, 3rem + 5vw, 8.5rem) 0 clamp(5rem, 3rem + 5vw, 8rem);
}
.steps-glow {
  position: absolute;
  inset: 0 0 auto;
  height: 70%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(42% 60% at 50% 4%, rgba(104, 92, 150, 0.2), transparent 72%);
}
.steps-head { text-align: center; }
.steps-head h2 {
  margin: 0;
  font-size: clamp(2rem, 1rem + 2.6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
  color: var(--glow);
  text-wrap: balance;
}
.steps-stage { position: relative; margin-top: clamp(3rem, 2rem + 3vw, 5.5rem); }
.steps {
  --open: 3.3;
  position: relative;
  display: flex;
  gap: 14px;
  height: clamp(26rem, 37vw, 37rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 247, 234, 0.1);
  transition: flex-grow 560ms var(--ease-out-expo), box-shadow var(--duration-fast);
}
.step.is-active { flex-grow: var(--open); }
.step:hover { box-shadow: inset 0 0 0 1px rgba(255, 247, 234, 0.2); }
.step:focus-visible { outline-offset: 3px; border-radius: 2px; }
/* a soft shade behind the copy keeps it readable on the light parts of the gradient */
.step::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 34% at 50% 50%, rgba(12, 11, 15, 0.32), transparent 78%);
}
.step-body {
  position: absolute;
  left: 50%;
  top: 37%;
  width: min(23rem, 100% - 1.25rem);
  translate: -50% 0;
  /* flex, not grid: the fixed-width text then overflows evenly on both sides of a closed card */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.step-title {
  margin: 1.35rem 0 0;
  font-size: clamp(1.05rem, 0.55rem + 0.95vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--glow);
  text-wrap: balance;
}
/* fixed measure, so the words never re-wrap while the card is still opening */
.step-text {
  width: 22rem;
  margin: 1.1rem 0 0;
  font-size: clamp(0.95rem, 0.86rem + 0.2vw, 1.06rem);
  line-height: 1.55;
  color: rgba(255, 247, 234, 0.84);
  text-wrap: pretty;
  opacity: 0;
}
.step-check {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.5rem 0 0;
  font-size: 0.82rem;
  color: rgba(255, 247, 234, 0.62);
  white-space: nowrap;
  opacity: 0;
}
.step-check::before, .step-check::after { content: ""; width: 1.5rem; height: 1px; background: rgba(255, 247, 234, 0.32); }
.step-check b { color: var(--glow); font-weight: 600; }

/* a short fade per word, so the text runs in as a wave of two or three words, as in the reference */
.step .w { opacity: 0; filter: blur(2px); transition: opacity 100ms, filter 100ms; }
.step.is-active .step-text { opacity: 1; }
.step.is-active .w {
  opacity: 1;
  filter: blur(0);
  transition: opacity 200ms ease-out var(--d, 0ms), filter 200ms ease-out var(--d, 0ms);
}
.step.is-active .step-check { opacity: 1; transition: opacity 320ms ease-out var(--d, 0ms); }

/* Narrow screens: a stack of open cards, nothing hidden behind hover. */
@media (max-width: 899px) {
  .steps { flex-direction: column; height: auto; }
  .step, .step.is-active { flex: none; }
  .step-body { position: relative; left: auto; top: auto; translate: none; width: auto; padding: 3.25rem 1.5rem 3rem; }
  .step-text { width: auto; max-width: 24rem; opacity: 1; }
  .step .w, .step.is-active .w { opacity: 1; filter: none; transition: none; }
  .step-check, .step.is-active .step-check { display: block; opacity: 1; transition: none; white-space: normal; }
  .step-check::before, .step-check::after { display: none; }
  .step-check b { margin-right: 0.4rem; }
  .step::before { background: radial-gradient(80% 60% at 50% 50%, rgba(12, 11, 15, 0.3), transparent 80%); }
}