/* ==========================================================================
   TuneDance frontend — from an idea to real music, in steps.

   Three earlier passes were wrong in instructive ways. A saturated field under
   everything: horrible. A near-white ground: threw the colour away. Then a
   per-step accent walking green to teal to blue, with the numerals filled by
   gradients: childish. Text that changes colour every row reads as a novelty,
   and gradient-filled type is the loudest version of that mistake.

   So: ONE accent for the whole section, used at full strength and only on
   things that are not sentences. Every word on this page is ink.

   What stops it being bland is structure, not colour. The rows do not
   alternate, because alternating is the tell of a template. Instead every step
   is the same three-part measure, numeral / copy / media, separated by a rule
   that runs the full width. Repetition with a strong enough measure reads as
   editorial; variety for its own sake reads as decoration.
   ========================================================================== */

.steps {
  --accent: #04a86b;
  --accent-bright: #00c97e;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 7.6vw, 124px) 24px clamp(64px, 7.6vw, 120px);
  background: linear-gradient(180deg, #f3faf7 0%, #eef6f3 58%, #eaf3f1 100%);
  color: var(--on-stage);
}

/* One hue, two pools. Enough to stop the tint being flat, not enough to become
   a second thing to look at. */
.steps::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 42% at 6% 8%, rgba(0, 201, 126, 0.3) 0%, transparent 68%),
    radial-gradient(42% 44% at 96% 88%, rgba(0, 201, 126, 0.2) 0%, transparent 70%);
  filter: blur(70px);
}

.steps::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.steps__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.steps__heading {
  margin: 0 auto clamp(44px, 5.4vw, 84px);
  max-width: 20ch;
  font-size: clamp(30px, 4.6vw, 62px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.038em;
  text-align: center;
  color: var(--on-stage);
  text-wrap: balance;
}

/* The product's half of the line in its gradient, the promise on the mint
   marker: the same two devices the intro above uses, so the heading reads
   as a continuation rather than a new section starting cold. */
.steps__heading-music {
  background-image: linear-gradient(96deg, #06d492 0%, #00bd7f 42%, #0a7fd8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.steps__heading-mark {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0 0.12em;
  margin: 0 -0.04em;
  white-space: nowrap;
  transform: rotate(-1.2deg);
}

.steps__heading-mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.02em;
  right: -0.02em;
  top: 0.1em;
  bottom: 0.02em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpath d='M2.5 9 C 40 4, 92 6.5, 140 4.5 C 168 3.4, 186 5, 197.5 7 L 196 36 C 150 39.5, 96 37, 52 39 C 30 40, 14 38.5, 3 36.5 Z' fill='%2386f2c6'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.steps__list { margin: 0; padding: 0; list-style: none; }

/* --- One step ------------------------------------------------------------ */

/* Numeral column is fixed, so the three figures line up down the page and the
   copy starts on the same axis every time. That column is the spine. */
.step {
  display: grid;
  /* the media takes the wider track now that real images are going in;
     the copy is two short lines and never needed half the row */
  grid-template-columns: clamp(76px, 9vw, 150px) minmax(0, 0.86fr) minmax(0, 1.4fr);
  align-items: center;
  gap: clamp(20px, 3vw, 52px);
  padding: clamp(30px, 4vw, 62px) 0;
}

/* A rule between steps, not around them. */
.step + .step { border-top: 1px solid rgba(10, 60, 44, 0.13); }
.step:first-child { padding-top: 0; }
.step:last-child { padding-bottom: 0; }

/* Its own grid cell, so the three figures line up down the page. An earlier
   build declared this column and then left the numeral nested inside the copy
   block: the grid had two children for three tracks, the third sat empty, and
   everything got squeezed until the copy ran off the right edge. */
.step__index { min-width: 0; }

.step__num {
  display: block;
  font-size: clamp(56px, 8.4vw, 132px);
  font-weight: 900;
  line-height: 0.74;
  letter-spacing: -0.07em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* Every grid and flex child needs this: the default min-width:auto lets a long
   word or a large glyph push a track wider than its share and overflow the
   row, which body{overflow-x:hidden} then silently clips rather than scrolls. */
.step__body,
.step__media { min-width: 0; }

.step__label-word {
  display: block;
  margin-bottom: clamp(6px, 0.9vw, 11px);
  font-size: clamp(10px, 1.05vw, 12px);
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(10, 60, 44, 0.5);
}

.step__title {
  margin: 0 0 clamp(10px, 1.3vw, 16px);
  font-size: clamp(23px, 3vw, 42px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.034em;
  color: var(--on-stage);
  text-wrap: balance;
}

.step__copy {
  margin: 0;
  max-width: 38ch;
  font-size: clamp(16px, 1.75vw, 21px);
  line-height: 1.58;
  color: rgba(26, 30, 38, 0.74);
}

.step__copy--quiet {
  margin-top: clamp(10px, 1.3vw, 16px);
  color: rgba(26, 30, 38, 0.55);
}

/* The section's closer, and the reason step 3 ends rather than just stops. */
.step__kicker {
  margin: clamp(16px, 2vw, 26px) 0 0;
  max-width: 26ch;
  font-size: clamp(19px, 2.3vw, 30px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: var(--on-stage);
}

/* --- Reserved media ------------------------------------------------------ */

/* Narrower than the copy column on purpose. Until the real shots exist these
   are the emptiest thing in the section, and giving empty space half the width
   is most of why this read as bland. */
.step__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 1.2vw, 14px);
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background:
    radial-gradient(72% 82% at 50% 42%, rgba(0, 201, 126, 0.14) 0%, transparent 78%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* A real image in the slot: the placeholder ground goes, the image fills
   the same 16:10 box. The composition carries its own ground and shapes. */
.step__media--image {
  display: block;
  overflow: hidden;
  background: none;
  box-shadow: none;
}

.step__media--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step__media-icon {
  width: clamp(24px, 2.7vw, 34px);
  height: auto;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step__media-note {
  margin: 0;
  max-width: 28ch;
  font-size: clamp(9px, 1vw, 11px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(10, 60, 44, 0.42);
}

@media (max-width: 900px) {
  .step {
    grid-template-columns: clamp(58px, 12vw, 92px) minmax(0, 1fr);
    gap: 18px 22px;
  }
  .step__media { grid-column: 1 / -1; margin-top: 6px; }
}

@media (max-width: 520px) {
  .step { grid-template-columns: 1fr; }
  .step__num { font-size: 62px; }
}