/* =========================================================
   CLOSING — 11, the ask
   ========================================================= */

.closing {
  position: relative;
  background: var(--ink-100);
  overflow: hidden;
  text-align: center;
}

/* The horizon: a single warm line with a glow above it, standing in for
   the far shore. It opens outward as the section arrives. */
.closing__horizon {
  position: absolute;
  left: 50%;
  /* Sits in the gap between the buttons and the assurance row. Any lower
     and the line runs straight through the type. */
  bottom: 36%;
  transform: translateX(-50%);
  width: min(90vw, 1200px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 162, 39, 0.5) 30%,
    rgba(233, 217, 163, 0.75) 50%,
    rgba(201, 162, 39, 0.5) 70%,
    transparent
  );
  transform-origin: center;
  pointer-events: none;
}

.closing__horizon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 76%;
  height: 16vh;
  background: radial-gradient(
    ellipse at bottom center,
    rgba(201, 162, 39, 0.13) 0%,
    transparent 68%
  );
}

.closing__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2rem);
}

.closing__title {
  font-size: var(--step-5);
  margin-top: clamp(1rem, 2.4vw, 2rem);
}

.closing__title .mask {
  padding-bottom: 0.07em;
}

.closing__title-gold {
  color: var(--gold-200);
}

.closing__sub {
  max-width: 46ch;
  font-size: var(--step-0);
}

.closing__actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(0.75rem, 2vw, 1.5rem);
}

/* ---------------- assurance row ---------------- */

.closing__assurance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(1.55rem, 3.6vw, 2.9rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule);
  width: 100%;
}

.closing__assurance li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.closing__assurance strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1;
  color: var(--gold-200);
}

.closing__assurance span {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-500);
  text-align: center;
}