/* ==========================================================================
   TuneDance frontend — "ask for it".

   Near-white after the pivot band, so the ground is quiet and the section is
   carried by type. The copy's shape is a drumbeat: three specific requests,
   each answered with the same three words. So it is built as call and
   response. Each request runs the full width in italic ink; the answer meets
   it at the right edge, set in the product's gradient, and the same three
   words stack three times down the page. The repetition is the argument, and
   it is visible before it is read.
   ========================================================================== */

.askfor {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 7.6vw, 120px) 24px clamp(64px, 7.6vw, 116px);
  background: linear-gradient(180deg, #fdfcfa 0%, #ffffff 40%, #fbfaf8 100%);
  color: var(--on-stage);
}

/* One green pool, low and to the right, under the answers. */
.askfor::before {
  content: "";
  position: absolute;
  right: -10%;
  bottom: 4%;
  width: min(900px, 70%);
  height: 52%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(50% 50% at 55% 50%, rgba(0, 201, 126, 0.16) 0%, transparent 72%);
  filter: blur(70px);
}

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

/* --- Set-up: heading and photo ------------------------------------------- */

.askfor__top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  margin-bottom: clamp(44px, 5.6vw, 84px);
}

.askfor__lead { min-width: 0; }
.askfor__lead p { margin: 0; }

/* Ink, not the forest green it was: the green is spent on the answers now,
   and a green heading above green answers made the section one colour. */
.askfor__heading {
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  font-size: clamp(32px, 4.6vw, 64px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #17202e;
  text-wrap: balance;
}

/* The one word the heading turns on, given the page's marker device in the
   product's mint. */
.askfor__never {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0 0.08em;
  margin: 0 -0.04em;
  transform: rotate(-1.2deg);
}

.askfor__never::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%;
}

.askfor__lead p.askfor__open {
  margin-bottom: clamp(10px, 1.2vw, 16px);
  font-size: clamp(19px, 2.1vw, 27px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #17202e;
}

.askfor__lead p.askfor__intro {
  max-width: 34ch;
  font-size: clamp(17px, 1.75vw, 22px);
  line-height: 1.55;
  color: #3d434d;
}

.askfor__photo-wrap {
  position: relative;
  justify-self: end;
  width: min(100%, 420px);
}

/* The decoration is larger than the photo and hangs off it on both sides:
   the blob behind the lower left, the ripples off the top right. */
.askfor__deco {
  position: absolute;
  z-index: 0;
  left: -22%;
  top: -14%;
  width: 143%;
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.askfor__deco-blob { opacity: 0.32; }

.askfor__photo {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 30px 60px -28px rgba(26, 20, 14, 0.4), 0 2px 8px rgba(26, 20, 14, 0.08);
}

.askfor__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* --- Call and response --------------------------------------------------- */

.askfor__asks {
  margin: 0 0 clamp(36px, 4.4vw, 64px);
  padding: 0;
  list-style: none;
}

/* Request left, answer right, a hairline between rows. The answer column is
   sized to its content so the three land in one vertical line. */
.askfor__asks li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(24px, 4vw, 72px);
  padding: clamp(20px, 2.6vw, 36px) 0;
  border-top: 1px solid rgba(26, 30, 38, 0.14);
}

.askfor__asks li:last-child { border-bottom: 1px solid rgba(26, 30, 38, 0.14); }

.askfor__want {
  max-width: 30ch;
  font-size: clamp(19px, 2.3vw, 31px);
  font-weight: 800;
  font-style: italic;
  line-height: 1.22;
  letter-spacing: -0.028em;
  color: #17202e;
  text-wrap: balance;
}

/* Same three words, same gradient, three times. Set big enough to answer the
   request rather than annotate it. */
.askfor__answer {
  font-size: clamp(26px, 3.4vw, 48px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  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;
}

.askfor__close {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(17px, 1.75vw, 22px);
  line-height: 1.55;
  color: #3d434d;
}

.askfor__close strong { font-weight: 800; color: #17202e; }

@media (max-width: 860px) {
  .askfor__top { grid-template-columns: 1fr; gap: 28px; }
  .askfor__photo-wrap { justify-self: start; width: min(100%, 360px); }
  .askfor__photo { aspect-ratio: 4 / 4.4; }

  .askfor__asks li {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  .askfor__want { max-width: none; }
}