/* ==========================================================================
   TuneDance frontend — first close.

   Where the capability run above is calm, this is the loud one. The headline
   names three things the buyer currently pays for, so each of the three is
   drawn through and dropped to a softer ink: the sentence then reads as the
   product removing them rather than merely mentioning them. It is the one
   place on the page pink appears, which is what makes it read as subtraction.

   Trust line is three plain items with ticks, not chips. Boxing "30-Day
   Guarantee" would put a border around the least doubted claim on the page.
   ========================================================================== */

.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3.4vw, 50px) 24px clamp(62px, 7.6vw, 116px);
  background: var(--ash-white);
  text-align: center;
}

/* Pools under the button. The eye is being sent to one place here, so the
   light is aimed there too. */
.cta::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: min(860px, 92%);
  height: 78%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(50% 56% at 50% 62%, rgba(0, 201, 126, 0.24) 0%, rgba(14, 139, 255, 0.18) 52%, transparent 76%);
  filter: blur(56px);
}

.cta__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.cta__heading {
  /* Set in px, not ch. 19ch resolved to roughly 565px at this size, which
     forced the sentence onto three lines inside a container twice that wide.
     1090px lets it break in two. */
  margin: 0 auto clamp(18px, 2.2vw, 28px);
  max-width: 1090px;
  font-size: clamp(27px, 4.1vw, 56px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--on-stage);
  text-wrap: balance;
}

/* Rule painted as a background image rather than text-decoration: it survives
   the phrase wrapping, and its weight scales with the type instead of staying
   a hairline at 54px. */
.cta__strike {
  color: var(--on-stage-soft);
  background-image: linear-gradient(90deg, var(--pop-pink), var(--pop-pink));
  background-repeat: no-repeat;
  background-position: 0 57%;
  background-size: 100% 0.105em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The old row was 16px grey sitting under a 56px headline, which made the
   strongest facts in the section read as fine print. Size and ink carry the
   fix: full page ink instead of the soft grey used for secondary prose, and
   roughly a third more size. The group stays centred and tightly spaced so the
   three land as one confident line. No boxes, no rules. */
.cta__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px clamp(18px, 2.2vw, 34px);
  margin: 0 auto clamp(26px, 3.2vw, 42px);
  padding: 0;
  list-style: none;
}

.cta__trust li {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: clamp(14px, 1.65vw, 20px);
  font-weight: 700;
  letter-spacing: -0.019em;
  color: var(--on-stage);
}

/* Same disc as the hero's trust row, so the two rows on the page read as one
   mark rather than two. border-box + padding insets the glyph inside the
   circle instead of growing the element. */
.cta__tick {
  box-sizing: border-box;
  width: 27px;
  height: 27px;
  padding: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(4, 168, 107, 0.13);
  fill: none;
  stroke: url(#tdStroke);
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cta__note {
  margin: clamp(15px, 1.9vw, 24px) auto 0;
  font-size: clamp(13px, 1.45vw, 17px);
  font-style: italic;
  color: var(--on-stage-mute);
}

@media (max-width: 560px) {
  .cta__trust { gap: 10px 18px; }
}