/* Feature timeline section — "Engage Every Applicant Instantly"
   Values from research/whippy.ai/components/03-engage-every-applicant-instant.spec.md */

.wh-timeline {
  padding: 80px 0 100px;
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-900);
}
.wh-tl__container {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
}
@media (min-width: 1182px) { .wh-tl__container { padding: 0; } }

.wh-tl__grid {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 40px;
}

/* ---- rail ---- */
.wh-tl__railcol { position: relative; }
.wh-tl__rail {
  padding: 6px 0;
  margin: 16px 0 0;
  min-height: 100%;
  position: relative;
}
.wh-tl__line {
  position: absolute;
  left: 10px;
  top: 0;
  width: 1.5px;
  transform: translateX(-0.75px);
  /* height set by JS (first dot -> last dot) */
}
.wh-tl__track {
  position: absolute;
  top: 0; left: 0;
  width: 1.5px;
  height: 100%;
  border-radius: 50%;
  background-color: #b7d9c0;
}
.wh-tl__progress {
  position: absolute;
  top: 0; left: 0;
  width: 1.5px;
  height: 0;
  border-radius: 50%;
  background-color: rgb(174, 41, 255); /* JS swaps to active accent */
}
.wh-tl__dot {
  position: absolute;
  left: 0.75px;
  top: 0; /* JS positions per block */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-6px, -6px);
  background-color: #b7d9c0;
}
.wh-tl__dot.is-reached {
  /* accent bg + rgba(accent,.15) 0 0 0 4px ring set inline by JS */
}

/* ---- blocks ---- */
.wh-tl__blocks {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 220px;
  position: relative;
}
.wh-tl__block {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: 120px;
  height: 440px; /* card (446px) overflows by 6px, as in the original */
}
.wh-tl__copy {
  flex: 1 1 486px;
  max-width: 500px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}
.wh-tl__pillrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.wh-tl__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 5px 15px;
  border-radius: 21px;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.wh-tl__pill--debrief {
  position: relative;
  background-image: linear-gradient(76deg, rgb(54, 37, 255) -4.03%, rgb(174, 41, 255) 49.78%, rgb(246, 27, 142) 104.53%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wh-tl__pill--debrief::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 21px;
  background: linear-gradient(76deg, rgba(54, 37, 255, 0.08) -4.03%, rgba(174, 41, 255, 0.08) 49.78%, rgba(246, 27, 142, 0.08) 104.53%);
}
.wh-tl__pill--dataentry   { color: rgb(55, 148, 146);  background-color: rgba(55, 148, 146, 0.08); }
.wh-tl__pill--search      { color: rgb(234, 87, 87);   background-color: rgba(234, 87, 87, 0.08); }
.wh-tl__pill--workflows   { color: rgb(236, 135, 192); background-color: rgba(236, 135, 192, 0.08); }
.wh-tl__pill--receptionist{ color: #2e6b44;   background-color: rgba(46, 107, 68, 0.1); }

.wh-tl__text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}
.wh-tl__h3 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  color: rgb(51, 51, 51);
}
.wh-tl__p {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: rgb(82, 79, 100);
}

/* ---- cards ---- */
.wh-tl__media {
  flex: 0 1 486px;
  min-width: 260px;
}
.wh-tl__card {
  position: relative;
  width: 440px;
  max-width: 100%;
  aspect-ratio: 440 / 446;
  border-radius: 24px;
  overflow: hidden;
}
.wh-tl__scene {
  position: absolute;
  top: 0; left: 0;
  width: 440px;
  height: 446px;
  transform-origin: 0 0; /* JS scales when card < 440px */
}

.wh-tl__card--debrief {
  background:
    radial-gradient(300px 240px at 50% 52%, rgba(151, 115, 236, 0.55), rgba(151, 115, 236, 0) 72%),
    linear-gradient(100deg, #d6d0fd 0%, #f3d2f7 55%, #fbceeb 100%);
}
.wh-tl__card--dataentry {
  background: linear-gradient(135deg, #81bbba 0%, #dbeceb 100%);
}
.wh-tl__card--search {
  background: linear-gradient(135deg, #f39a9a 0%, #fbe1e1 100%);
}
.wh-tl__card--workflows {
  background: linear-gradient(135deg, #f3b3d7 0%, #fbe9f3 100%);
}
.wh-tl__card--receptionist {
  background: linear-gradient(135deg, #d8ddff 0%, #f4f5ff 100%);
}

/* shared widget bits */
.wh-tl__ic { flex: 0 0 auto; display: block; }
.wh-tl__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: rgba(18, 18, 46, 0.08) 0 4px 16px 0;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  line-height: 16px;
  white-space: nowrap;
}
.wh-tl__chip-label { font-weight: 600; }
.wh-tl__tag {
  padding: 4px 10px;
  border-radius: 99px;
  background: #dfe3eb;
  font-size: 12px;
  font-weight: 600;
  color: #3c3f49;
  line-height: 14px;
}
.wh-tl__connector {
  position: relative;
  width: 1.5px;
  height: 26px;
  background: #8b87e0;
  margin: 2px auto;
}
.wh-tl__arrow {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #8b87e0;
  border-bottom: 1.5px solid #8b87e0;
  transform: translateX(-50%) rotate(45deg);
}

/* card 1: flow */
.wh-tl__flow {
  position: absolute;
  top: 72px;
  left: 0;
  width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wh-tl__transcript {
  width: 330px;
  border-radius: 12px;
  border: 1px solid #bab3f2;
  background: rgba(252, 250, 255, 0.85);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wh-tl__transcript-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wh-tl__transcript-title {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  line-height: 18px;
}
.wh-tl__t-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 17px;
  color: #45434f;
}
.wh-tl__t-time {
  flex: 0 0 auto;
  color: #8a8794;
  font-size: 11px;
  line-height: 17px;
}
.wh-tl__t-text strong { font-weight: 700; color: #333; }

/* card 2: check stack */
.wh-tl__checkstack {
  position: absolute;
  top: 143px;
  left: 96px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wh-tl__checkrow {
  width: 244px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 10px;
  box-shadow: rgba(18, 18, 46, 0.08) 0 4px 14px 0;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  line-height: 16px;
  white-space: nowrap;
}
.wh-tl__checkrow--pending { color: #a9a9b2; }

/* card 3: chat bubbles */
.wh-tl__bubble {
  position: absolute;
  padding: 9px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}
.wh-tl__bubble--blue {
  background: #2e6b44;
  color: #fff;
  border-bottom-right-radius: 6px;
}
.wh-tl__bubble--sm {
  padding: 5px 12px;
  font-size: 12px;
  line-height: 15px;
  border-radius: 13px;
  border-bottom-right-radius: 4px;
}
.wh-tl__bubble--static { position: static; }
.wh-tl__bubblerow {
  position: absolute;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.wh-tl__replyrow {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wh-tl__avatar-sm {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: block;
}
.wh-tl__avatar-24 { width: 24px; height: 24px; }
.wh-tl__avatar-25 { width: 25px; height: 25px; }
.wh-tl__graypill {
  padding: 4px 10px;
  border-radius: 99px;
  background: #e2e3e8;
  font-size: 11px;
  line-height: 14px;
  color: #55565f;
  font-weight: 500;
}
.wh-tl__wavatar { display: block; flex: 0 0 auto; }

/* card 4: workflow rows + panel */
.wh-tl__wfstack {
  position: absolute;
  top: 57px;
  left: 97px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wh-tl__wfstack .wh-tl__checkrow { width: 245px; }
.wh-tl__wfstack .wh-tl__connector { height: 22px; background: #9b8fd9; }
.wh-tl__wfstack .wh-tl__arrow { border-color: #9b8fd9; border-top: 0; border-left: 0; }
.wh-tl__panel {
  position: absolute;
  left: 55px;
  top: 288px;
  width: 327px;
  height: 117px;
  border-radius: 12px;
  border: 1px solid #b6b6ee;
  background: rgba(252, 250, 255, 0.85);
}
.wh-tl__bubblerow--panel {
  top: 22px;
  right: 12px;
}
.wh-tl__replyrow--panel {
  left: 16px;
  top: 70px;
}

/* card 5: receptionist */
.wh-tl__callbar {
  position: absolute;
  left: 93px;
  top: 32px;
  width: 251px;
  height: 44px;
  border-radius: 10px;
  background: #474a59;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
}
.wh-tl__callbar-name {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 16px;
}
.wh-tl__hangup { display: block; flex: 0 0 auto; }
.wh-tl__msgrow {
  position: absolute;
  left: 41px;
  top: 187px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wh-tl__msgtext {
  font-size: 13px;
  line-height: 17px;
  color: #333;
}
.wh-tl__typerow {
  position: absolute;
  right: 42px;
  top: 232px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wh-tl__typing {
  width: 152px;
  height: 18px;
  border-radius: 6px;
  background: #dde0f2;
}
.wh-tl__wave {
  position: absolute;
  left: 130px;
  top: 377px;
  animation: wh-tl-wave-pulse 1.6s ease-in-out infinite;
}
@keyframes wh-tl-wave-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ---- intermediate desktop (769–1199) ---- */
@media (max-width: 1199px) and (min-width: 769px) {
  .wh-tl__block { gap: 40px; }
}

/* ---- mobile (<=768) ---- */
@media (max-width: 768px) {
  .wh-timeline { padding: 40px 0 60px; }
  .wh-tl__container { padding: 0 15px; }
  .wh-tl__grid {
    display: block;
  }
  .wh-tl__railcol { display: none; }
  .wh-tl__blocks { gap: 60px; }
  .wh-tl__block {
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 25px;
    height: auto;
  }
  .wh-tl__copy { gap: 10px; max-width: none; flex: 0 0 auto; }
  .wh-tl__h3 { font-size: 24px; line-height: 36px; }
  .wh-tl__media { flex: 0 0 auto; min-width: 0; width: 100%; }
  .wh-tl__card { width: 100%; }
}

/* original Lottie animations (extracted from live bundle) */
.wh-tl__lottie { width: 440px; height: 440px; }
.wh-tl__lottie svg { display: block; }

/* scenes stay hidden until scenes-boot.js reveals them (prevents end-state flash) */
.wh-tl__scene .wh-scene { visibility: hidden; }

/* Flipped layout (owner 2026-09-02): cards left, rail + copy right */
@media (min-width: 769px) {
  .wh-tl__grid { grid-template-columns: minmax(0, 1fr) 20px; }
  .wh-tl__railcol { order: 2; }
  .wh-tl__block { flex-direction: row-reverse; }
}

/* Accent halos (owner pick 2026-09-08): every block's scene card sits on
   a soft halo in its own accent, over a hairline grid, so the section is
   never flat white. The halo lives on the media wrapper so it stays
   behind the card in both the two-column and the stacked layout. */
.wh-timeline {
  /* sideways only: the first halo may bleed above the section instead of
     being cut flat at its top edge (that cut was a visible line) */
  overflow-x: clip;
  overflow-y: visible;
  /* the grid fades in from the white demo band above and out again
     before the tinted agents section, so there is no hard edge */
  background-image:
    linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 320px),
    linear-gradient(0deg, #fff 0, rgba(255, 255, 255, 0) 240px),
    linear-gradient(rgba(17, 20, 24, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 20, 24, 0.035) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px, 28px 28px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-color: var(--white);
}
.wh-tl__media { position: relative; isolation: isolate; }
.wh-tl__media::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 720px;
  height: 720px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo, transparent) 0%, transparent 100%);
  opacity: .16;
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 768px) {
  .wh-tl__media::before { width: 520px; height: 520px; }
}

/* Stacked layout fix (owner report 2026-09-08): between 441 and 768px
   the card grew to the full column width while the scene stayed at its
   440px design size, so the scene's box ended short of the card edge.
   Cap the media wrapper (and so the card and its halo) at 440px. */
@media (max-width: 768px) {
  .wh-tl__media { width: 440px; max-width: 100%; flex-basis: auto; }
  .wh-tl__card { width: 100%; }
}