/* ==========================================================================
   TuneDance frontend — capability run.

   Six claims, no boxes. The source doc lays them out in a table; a table is
   how you write six things down, not how you present them. Rendered as an open
   grid instead, carried by icon weight and type rather than by borders.

   Deliberately the calm section on the page. It sits between the hero and the
   first close, and if it shouts it takes attention from the CTA underneath it.
   The drama is one band of colour and six gradient marks.
   ========================================================================== */

.caps {
  position: relative;
  overflow: hidden;
  padding: clamp(54px, 6.6vw, 106px) 24px clamp(30px, 3.8vw, 56px);
  background: var(--ash-white);
}

/* Keeps the band from reading as a flat grey slab under the bright hero. */
.caps::before {
  content: "";
  position: absolute;
  inset: -30% -10% 0;
  pointer-events: none;
  background:
    radial-gradient(38% 52% at 16% 30%, rgba(0, 201, 126, 0.2) 0%, transparent 68%),
    radial-gradient(38% 52% at 84% 26%, rgba(14, 139, 255, 0.18) 0%, transparent 68%);
  filter: blur(52px);
}

.caps__inner {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
}

.caps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(34px, 4.2vw, 66px) clamp(26px, 3.4vw, 58px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cap {
  position: relative;
  text-align: center;
}

.cap__icon {
  position: relative;
  display: inline-flex;
  margin-bottom: clamp(12px, 1.5vw, 19px);
}

/* Thin stroke on purpose: at this size a filled or heavy icon competes with
   the label, and the label is the claim. */
.cap__icon svg {
  position: relative;
  width: clamp(38px, 4.1vw, 52px);
  height: auto;
  fill: none;
  stroke: url(#tdStroke);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Colour pooling behind each mark. Static: this used to appear on hover, which
   is decoration that only exists for people using a mouse. */
.cap__icon::before {
  content: "";
  position: absolute;
  inset: -52%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 201, 126, 0.38) 0%, rgba(14, 139, 255, 0.22) 52%, transparent 72%);
  filter: blur(18px);
  opacity: 1;
}


.cap__label {
  margin: 0 auto;
  max-width: 16ch;
  font-size: clamp(16px, 1.75vw, 21px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--on-stage);
  text-wrap: balance;
}

@media (max-width: 900px) {
  .caps__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .caps__grid { grid-template-columns: 1fr; gap: 28px; }
  .cap__label { max-width: 24ch; }
}