/* ============================================================
   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 ---
   --vs-size drives the VS badge's own width/height AND the extra
   clearance reserved on both halves below, from one value, so the
   badge's footprint and its reserved space can never drift out of
   sync (previously only the lit half reserved this clearance; the
   dim half had none, so the badge overlapped its text). */
.sec-20-waiting__panel {
  --vs-size: clamp(56px, 5vw + 40px, 84px);
  --vs-base-pad: clamp(2rem, 1.5rem + 2vw, 3rem);
  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(--vs-base-pad);
  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);
  /* The VS circle sits centered on the shared border and overlaps into this
     half by its own radius too, so it needs the same reserved clearance
     the lit half gets below (was previously missing entirely). */
  padding-right: calc(var(--vs-base-pad) + var(--vs-size) / 2);
}
.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);
  /* The VS circle sits centered on the shared border and overlaps into this
     half by its own radius, so its content needs that much extra left
     padding to clear it by the same margin the outer edge gives it. */
  padding-left: calc(var(--vs-base-pad) + var(--vs-size) / 2);
}
.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. left/top:50% is a valid fallback for
   the desktop side-by-side layout only (the grid's equal 1fr columns
   guarantee the seam sits at exactly 50%). The stacked mobile layout
   below has no such guarantee (dim/lit heights vary with copy), so
   js/sections/20-waiting.js measures the real seam there and overrides
   top with an exact pixel value. --- */
.sec-20-waiting__vs {
  position: absolute;
  left: 50%;
  top: 50%;
  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), 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;
    /* Stacked layout: the VS circle now sits on the horizontal seam between
       the two halves, not the vertical one, so clearance moves from
       padding-right to padding-bottom. */
    padding-right: var(--vs-base-pad);
    padding-bottom: calc(var(--vs-base-pad) + var(--vs-size) / 2);
  }
  .sec-20-waiting__half--lit {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    /* Stacked layout: the VS circle sits centered over the seam, not to this
       half's left, so it doesn't need the desktop's extra left clearance,
       but does need it above instead. */
    padding-left: var(--vs-base-pad);
    padding-top: calc(var(--vs-base-pad) + var(--vs-size) / 2);
  }
}

@media (max-width: 480px) {
  /* A plain padding shorthand here would reset the badge clearance the
     760px block reserves on dim's bottom / lit's top (padding shorthand
     sets all four sides). Shrink --vs-base-pad instead so the reserved
     sides shrink together with it, and set left/right (not reserved at
     this breakpoint) directly, plus the two sides that AREN'T reserved
     at this breakpoint (dim's top, lit's bottom). */
  .sec-20-waiting__panel {
    --vs-base-pad: 1.4rem;
  }
  .sec-20-waiting__half {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
  .sec-20-waiting__half--dim {
    padding-top: 1.6rem;
  }
  .sec-20-waiting__half--lit {
    padding-bottom: 1.6rem;
  }
}

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