/* ============================================================
   16-comebacks — Comeback Ticker. Scoped under .sec-16-comebacks.
   Sits between 06-journey (lavender) and 07-results (yellow); bg is the
   client's pastel green so it bridges both neighbors as one flowing pastel
   "act" instead of a single flat orange band. The outcome cards keep their
   own dark ink fill (unchanged below) so they still pop as cards against the
   brighter strip. Cards are now white (were dark ink) per the light-palette pass.
   ============================================================ */

.sec-16-comebacks {
  background: var(--color-green);
  color: var(--text-on-ink);
  padding-block: clamp(2.5rem, 3vw, 3.5rem) 3rem;
  overflow: hidden;
  position: relative;
}

/* --- Eyebrow + pulse-line --- */
.sec-16-comebacks__head {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

.sec-16-comebacks__eyebrow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.sec-16-comebacks__pulse {
  width: 140px;
  height: 30px;
}
.sec-16-comebacks .pulse-line path {
  stroke: var(--accent-on);
}

.sec-16-comebacks__eyebrow {
  color: var(--accent-on);
}
.sec-16-comebacks__eyebrow::before {
  display: none;
}

/* --- Marquee --- */
.sec-16-comebacks__marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}

.sec-16-comebacks__track {
  --marquee-dur: 55s;
  gap: 1.5rem;
}

/* --- Outcome card --- */
.sec-16-comebacks__card {
  display: flex;
  flex-direction: column;
  min-width: 320px;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--white);
  border: 1px solid hsl(0 0% 0% / 0.06);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-card);
}

.sec-16-comebacks__before {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-on-bone-dim);
}

.sec-16-comebacks__divider {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.7rem 0;
}

.sec-16-comebacks__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: sec-16-comebacks-pulse 2.2s ease-in-out infinite;
}
@keyframes sec-16-comebacks-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); transform: scale(1); }
  50% { box-shadow: 0 0 0 5px transparent; transform: scale(1.3); }
}

.sec-16-comebacks__arrow {
  color: var(--accent);
  font-size: 1rem;
  line-height: 1;
}

.sec-16-comebacks__after {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-on-bone);
}

.sec-16-comebacks__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.sec-16-comebacks__tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--bone);
  border: 1px solid var(--line-bone);
  color: var(--text-on-bone-dim);
}
.sec-16-comebacks__tag--time {
  color: var(--accent-strong);
  border-color: hsl(var(--accent-h) 80% 50% / 0.35);
}

@media (max-width: 480px) {
  .sec-16-comebacks__card {
    min-width: 280px;
    padding: 1.25rem 1.25rem 1rem;
  }
}

/* --- Reduced motion: static row of the first 3 cards --- */
html.reduced-motion .sec-16-comebacks__track[aria-hidden="true"] {
  display: none;
}
html.reduced-motion .sec-16-comebacks__track {
  animation: none;
}
html.reduced-motion .sec-16-comebacks__card:nth-child(n + 4) {
  display: none;
}
html.reduced-motion .sec-16-comebacks__marquee {
  mask-image: none;
  -webkit-mask-image: none;
  justify-content: center;
  overflow-x: auto;
}
html.reduced-motion .sec-16-comebacks__dot {
  animation: none;
}