/* ==========================================================================
   TuneDance frontend — never pay for tracks again.

   The money section. Its second paragraph is the whole argument, the drip of
   small payments adding up, so that one is set larger and heavier than the
   prose around it and the rest of the copy steps back to let it land. Every
   other paragraph here is support.

   Cool, plain ground: the guarantee above it is warm cream and the offer above
   that is ash, so this one goes clean and slightly blue to keep the three
   apart without adding another colour treatment.
   ========================================================================== */

.neverpay {
  --accent: #04a86b;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(62px, 7.4vw, 118px) 24px clamp(64px, 7.6vw, 120px);
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fb 100%);
  color: var(--on-stage);
}

.neverpay::before {
  content: "";
  position: absolute;
  inset: -20% -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(34% 40% at 8% 6%, rgba(14, 139, 255, 0.14) 0%, transparent 68%),
    radial-gradient(32% 38% at 92% 90%, rgba(0, 201, 126, 0.14) 0%, transparent 70%);
  filter: blur(70px);
}

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

.neverpay__heading {
  margin: 0 auto clamp(36px, 4.4vw, 66px);
  max-width: 24ch;
  font-size: clamp(29px, 4.4vw, 58px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.038em;
  text-align: center;
  text-wrap: balance;
}

/* The doc bolds and underlines this. Weight and accent instead: the page has
   its own way of saying "this part matters". */
.neverpay__hit {
  font-weight: 900;
  color: var(--accent);
}

.neverpay__cols {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: clamp(28px, 4.2vw, 66px);
}

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

.neverpay__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.3vw, 15px);
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  background:
    radial-gradient(70% 74% at 50% 44%, rgba(14, 139, 255, 0.12) 0%, transparent 78%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 245, 249, 0.9) 100%);
}

.neverpay__slot-icon {
  width: clamp(26px, 3vw, 36px);
  height: auto;
  fill: none;
  stroke: rgba(26, 30, 38, 0.34);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.neverpay__slot-note {
  margin: 0;
  max-width: 26ch;
  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(26, 30, 38, 0.4);
}

/* --- Copy ---------------------------------------------------------------- */

.neverpay__body p {
  margin: 0 0 clamp(17px, 2vw, 24px);
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.6;
  color: rgba(26, 30, 38, 0.76);
}

.neverpay__body p:last-child { margin-bottom: 0; }

/* The drip. This paragraph is the argument the section exists to make, so it
   is the only thing here set above body size. */
.neverpay__body p.neverpay__drip {
  font-size: clamp(18px, 2.1vw, 26px);
  font-weight: 700;
  line-height: 1.36;
  letter-spacing: -0.024em;
  color: var(--on-stage);
}

@media (max-width: 860px) {
  .neverpay__cols { grid-template-columns: 1fr; gap: 26px; }
  .neverpay__slot { aspect-ratio: 16 / 10; }
}