/* ==========================================================================
   TuneDance frontend — the guarantee.

   The one section on the page that should not be loud. It comes straight after
   the price, and its job is to lower the pulse rate rather than raise it, so
   the design is warm, centred and unhurried: a wide reading measure, generous
   leading, and the seal given room to be the only object in the frame.

   Warm ground rather than the page's usual cool one, because the seal is gold
   and orange and everything else here is emerald. This is the one place the
   page's colour follows the artwork instead of the brand.
   ========================================================================== */

.guarantee {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(62px, 7.4vw, 118px) 24px clamp(66px, 7.8vw, 122px);
  background: linear-gradient(180deg, #fffdf9 0%, #fdf7ec 100%);
  color: var(--on-stage);
  text-align: center;
}

/* Light pooling behind the seal, warm, so it sits in something rather than on
   nothing. */
.guarantee::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  width: min(760px, 92%);
  height: 60%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(50% 52% at 50% 46%, rgba(255, 186, 46, 0.3) 0%, transparent 72%);
  filter: blur(66px);
}

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

.guarantee__heading {
  position: relative;
  z-index: 0;
  margin: 0 auto clamp(26px, 3.2vw, 44px);
  max-width: 24ch;
  font-size: clamp(27px, 4vw, 52px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.036em;
  text-wrap: balance;
}

.guarantee__seal {
  display: block;
  width: clamp(160px, 20vw, 260px);
  height: auto;
  margin: 0 auto clamp(30px, 3.8vw, 54px);
}

.guarantee__body p {
  margin: 0 auto clamp(16px, 2vw, 24px);
  max-width: 58ch;
  font-size: clamp(17px, 1.85vw, 22px);
  line-height: 1.55;
  color: #3d434d;
  text-wrap: pretty;
}

/* The promise, the guarantee and the deadline in ink: the three things a
   reader skimming for the terms is looking for. */
.guarantee__body b {
  font-weight: 700;
  color: #17202e;
}

/* The page's marker sweep in this section's gold, on the two words the
   section opens and closes on. */
.guarantee__mark {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0 0.1em;
  margin: 0 -0.04em;
  white-space: nowrap;
  transform: rotate(-1.2deg);
}

.guarantee__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='%23ffc233'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* The line the reader should leave with. */
.guarantee__body p.guarantee__close {
  position: relative;
  z-index: 0;
  margin-top: clamp(26px, 3.2vw, 44px);
  margin-bottom: 0;
  max-width: 30ch;
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 900;
  line-height: 1.34;
  letter-spacing: -0.024em;
  color: var(--on-stage);
}