/* ============================================================
   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%);
  --waiting-pad: clamp(2rem, 1.5rem + 2vw, 3rem);
  --waiting-vs-size: clamp(56px, 5vw + 40px, 84px);
}

/* --- 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: var(--waiting-pad);
  transition: filter 300ms var(--ease-out);
}

/* The VS badge sits on the seam and eats into each half's inner padding, so the bullet
   text was visibly closer to the badge than to the panel's outer edge. Pad the inner
   (seam-facing) side by the badge's own footprint so both distances read as equal. */
@media (min-width: 761px) {
  .sec-20-waiting__half--dim {
    padding-right: calc(var(--waiting-pad) + var(--waiting-vs-size) / 2);
  }
  .sec-20-waiting__half--lit {
    padding-left: calc(var(--waiting-pad) + var(--waiting-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(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;
  /* Secondary accent (green): this is the "positive" path in the comparison, so it
     gets the site's secondary color instead of the primary magenta. */
  box-shadow: inset 0 0 0 1.5px hsl(var(--accent2-h) 55% 50% / 0.35), 0 0 46px var(--accent2-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 {
  /* accent2-strong, not accent2: white-on-accent2 is only ~2.5:1, below the 3:1 this
     meaningful checkmark icon needs (WCAG 1.4.11). */
  color: var(--accent2-on);
  background: var(--accent2-strong);
}

/* --- VS badge: pinned at the seam --- */
.sec-20-waiting__vs {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: var(--waiting-vs-size);
  height: var(--waiting-vs-size);
  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; }