/* ============================================================
   20-waiting — "The Cost of Waiting" persuasion split
   scoped under .sec-20-waiting
   ============================================================ */

.sec-20-waiting {
  position: relative;
  background: radial-gradient(120% 90% at 50% 0%, #fbf9f3 0%, var(--bone) 45%, #eee8db 100%);
}

/* --- Split panel --- */
.sec-20-waiting__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: var(--shadow-lift);
  border-radius: var(--radius-lg);
}

.sec-20-waiting__half {
  position: relative;
  padding: clamp(2rem, 1.5rem + 2vw, 3rem);
  transition: filter 300ms var(--ease-out);
}

.sec-20-waiting__half-title {
  font-size: var(--fs-h4);
  margin-bottom: 1.4rem;
}

.sec-20-waiting__list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.sec-20-waiting__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.45;
}

.sec-20-waiting__ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-top: 0.15em;
}

/* --- Left half: dimmed / desaturated --- */
.sec-20-waiting__half--dim {
  background: var(--bone-2);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  filter: saturate(0.55);
}
.sec-20-waiting__half--dim .sec-20-waiting__half-title {
  color: hsl(30 6% 42%);
}
.sec-20-waiting__half--dim .sec-20-waiting__item {
  color: hsl(30 6% 46%);
}
.sec-20-waiting__ico--x {
  color: hsl(30 6% 52%);
  background: hsl(30 10% 82%);
}

/* --- Right half: lit / accent --- */
.sec-20-waiting__half--lit {
  background: var(--white);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: inset 0 0 0 1.5px hsl(var(--accent-h) 70% 55% / 0.32), 0 0 46px var(--accent-glow);
}
.sec-20-waiting__half--lit .sec-20-waiting__half-title,
.sec-20-waiting__half--lit .sec-20-waiting__item {
  color: var(--text-on-bone);
}
.sec-20-waiting__ico--check {
  color: var(--accent-on);
  background: var(--accent);
}

/* --- VS badge: pinned at the seam --- */
.sec-20-waiting__vs {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: clamp(56px, 5vw + 40px, 84px);
  height: clamp(56px, 5vw + 40px, 84px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--bone), var(--shadow-glow);
}
.sec-20-waiting__vs-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.9rem, 0.4rem + 1vw, 1.15rem);
  letter-spacing: 0.03em;
  color: var(--accent-on);
}

.sec-20-waiting__vs[data-reveal] {
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.sec-20-waiting__vs[data-reveal].is-visible {
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: sec-20-waiting-spin 1100ms var(--ease-out) 1;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes sec-20-waiting-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
html.reduced-motion .sec-20-waiting__vs[data-reveal] {
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: none;
  transition: none;
}

/* --- Below-panel CTA --- */
.sec-20-waiting__cta {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.sec-20-waiting__cta-line {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  max-width: 42ch;
  color: var(--text-on-bone);
}

@media (max-width: 760px) {
  .sec-20-waiting__panel {
    grid-template-columns: 1fr;
  }
  .sec-20-waiting__half--dim {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .sec-20-waiting__half--lit {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
}

@media (max-width: 480px) {
  .sec-20-waiting__half {
    padding: 1.6rem 1.4rem;
  }
}

/* The VS badge carries a wide accent glow at z-index 2 and the half titles were static, so
   on mobile the glow washed out "If you start this week". */
.sec-20-waiting__half-title { position: relative; z-index: 3; }

/* Two-column layout: the VS badge (plus its 6px ring) overlaps the inner edge of both
   halves, so the inner padding adds half the badge. That keeps the gap between the badge
   and the copy equal to the gap at the module's outer edge. */
@media (min-width: 761px) {
  .sec-20-waiting__half--dim {
    padding-right: calc(clamp(2rem, 1.5rem + 2vw, 3rem) + clamp(56px, 5vw + 40px, 84px) / 2 + 6px);
  }
  .sec-20-waiting__half--lit {
    padding-left: calc(clamp(2rem, 1.5rem + 2vw, 3rem) + clamp(56px, 5vw + 40px, 84px) / 2 + 6px);
  }
}