/* ============================================================
   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 {
  --vs-size: 48px;
  position: relative;
  display: grid;
  /* dim card | VS badge | lit card: the badge lives in its own centered track, so it
     sits in the gap between the cards and never covers their text. */
  grid-template-columns: 1fr var(--vs-size) 1fr;
  column-gap: 0.9rem;
  align-items: stretch;
}

.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);
  box-shadow: var(--shadow-lift);
  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: var(--radius-lg);
  box-shadow: inset 0 0 0 1.5px hsl(var(--accent-h) 70% 55% / 0.32), 0 0 46px var(--accent-glow), var(--shadow-lift);
}
.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: centered in the gap between the two cards --- */
.sec-20-waiting__vs {
  position: relative;
  align-self: center;
  z-index: 2;
  width: var(--vs-size);
  height: var(--vs-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--bone); /* ring only, no 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);
}

:where(html.js) .sec-20-waiting__vs[data-reveal] {
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.sec-20-waiting__vs[data-reveal].is-visible {
  opacity: 1;
  animation: sec-20-waiting-spin 1100ms var(--ease-out) 1;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes sec-20-waiting-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
html.reduced-motion .sec-20-waiting__vs[data-reveal] {
  opacity: 1;
  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) {
  /* Stacked: cards sit 12px apart and the badge straddles that seam, half on the bottom
     edge of the first card and half on the top edge of the second. Its negative block
     margin shrinks its grid row to the 12px gap; the cards get extra padding on the
     facing sides so it never covers text. */
  .sec-20-waiting__panel {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .sec-20-waiting__vs {
    justify-self: center;
    margin-block: calc((12px - var(--vs-size)) / 2);
  }
  .sec-20-waiting__half--dim {
    padding-bottom: calc(clamp(2rem, 1.5rem + 2vw, 3rem) + 2rem);
  }
  .sec-20-waiting__half--lit {
    padding-top: calc(clamp(2rem, 1.5rem + 2vw, 3rem) + 2rem);
  }
}

@media (max-width: 480px) {
  .sec-20-waiting__half {
    padding: 1.6rem 1.4rem;
  }
  .sec-20-waiting__half--dim { padding-bottom: calc(1.6rem + 2rem); }
  .sec-20-waiting__half--lit { padding-top: calc(1.6rem + 2rem); }
}

/* 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; }