/* ============================================================
   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%, #ffffff 0%, var(--bone) 45%, #eef1fb 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 {
  --pad: clamp(2rem, 1.5rem + 2vw, 3rem);
  --vs-size: clamp(56px, 5vw + 40px, 84px);
  position: relative;
  padding: var(--pad);
  transition: filter 300ms var(--ease-out);
}

/* Seam-facing side gets extra room for the VS badge overlapping from the center,
   so the list text sits as far from the badge as it does from the module's outer edge. */
@media (min-width: 761px) {
  .sec-20-waiting__half--dim {
    padding-right: calc(var(--pad) + var(--vs-size) / 2);
  }
  .sec-20-waiting__half--lit {
    padding-left: calc(var(--pad) + var(--vs-size) / 2);
  }
}

.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(240 5% 34%);
}
.sec-20-waiting__half--dim .sec-20-waiting__item {
  color: hsl(240 5% 38%);
}
.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; }