/* ---- Logo marquee (seamless horizontal scroll) ---- */
.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee-scroll var(--marquee-dur, 42s) linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: 14px clamp(28px, 4vw, 56px) 14px 0;
  flex: none;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .marquee-track { animation: none; }
}

/* Wordmark badge — uniform, grayscale, premium */
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  flex: none; white-space: nowrap;
  font-family: var(--f-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: -0.01em; color: var(--ink-2);
  filter: grayscale(1); opacity: .72;
  transition: opacity .2s ease, filter .2s ease;
}
.marquee:hover .wordmark { opacity: .62; }
.wordmark:hover { opacity: 1 !important; filter: grayscale(0); }
.wordmark .wm {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 0.66rem; font-weight: 600;
  color: #fff; background: var(--ink-soft);
}
.wordmark .wm.r { border-radius: 50%; }
.wordmark .wm.sq { border-radius: 6px; }

/* Real client logos in uniform slots (trust bar) */
.client-slot {
  flex: none;
  width: clamp(120px, 13vw, 156px);
  height: 52px;
  display: grid; place-items: center;
}
.client-slot img {
  max-width: 100%;
  max-height: 44px;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .58;
  transition: opacity .2s ease, filter .2s ease;
}
.marquee:hover .client-slot img { opacity: .48; }
.client-slot img:hover { opacity: 1 !important; filter: grayscale(0); }

/* Real integration logos — uniform slots, greyscale */
.int-slot {
  flex: none;
  height: 60px;
  padding: 0 clamp(20px, 3vw, 40px);
  display: grid; place-items: center;
}
.int-slot img {
  max-height: 30px;
  max-width: 168px;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: opacity .2s ease, filter .2s ease;
}
.int-slot.icon img { max-height: 38px; }
.marquee:hover .int-slot img { opacity: .45; }
.int-slot img:hover { opacity: 1 !important; filter: grayscale(0); }


/* ---- Before / After comparison ("the difference") ---- */
.vs { max-width: 980px; margin: 0 auto; }
.vs-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr);
  position: relative;
}
.vs-cell {
  padding: 22px 24px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--d-line);
  font-size: 1.02rem; line-height: 1.4;
}
.vs-h {
  font-family: var(--f-display); font-weight: 700; font-size: 1.12rem;
  color: #fff; justify-content: flex-start;
}
.vs-corner { border-bottom: 1px solid var(--d-line); }
.vs-h-before { color: var(--d-text-2); font-weight: 600; }

/* highlighted "after" column — continuous raised card */
.vs-after { background: var(--d-card); position: relative; }
.vs-h-after {
  background: var(--d-card); color: #fff;
  border-top: 1px solid var(--d-line);
  border-radius: 16px 16px 0 0;
}
.vs-h-after, .vs-after { border-left: 1px solid var(--d-line); border-right: 1px solid var(--d-line); }
.vs-after.vs-last { border-radius: 0 0 16px 16px; border-bottom: 1px solid var(--d-line); }

.vs-label { color: var(--d-text); font-weight: 500; }
.vs-ico { width: 22px; height: 22px; flex: none; color: var(--d-text-2); }

.vs-before { color: var(--d-text-2); }
.vs-after { color: #fff; font-weight: 500; }
.vs-x, .vs-ck {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.74rem; font-weight: 700;
}
.vs-x { background: rgba(214,90,64,.16); color: #E0795F; }
.vs-ck { background: rgba(143,163,240,.18); color: #9DB0F5; }

.vs-badge {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--amber), var(--brand));
}

@media (max-width: 720px) {
  .vs-grid { grid-template-columns: 1fr; }
  .vs-corner, .vs-label { display: none; }
  .vs-h, .vs-cell { padding: 15px 18px; }
  .vs-h-before { border-radius: 14px 14px 0 0; border: 1px solid var(--d-line); border-bottom: none; margin-top: 6px; }
  .vs-before { border-left: 1px solid var(--d-line); border-right: 1px solid var(--d-line); border-bottom: none; }
  .vs-before.vs-last { border-bottom: 1px solid var(--d-line); border-radius: 0 0 14px 14px; }
  .vs-h-after { border-radius: 14px 14px 0 0; border-top: 1px solid var(--d-line); margin-top: 16px; }
}

/* ---- Infographic art treatments (homepage) ---- */
.pillar-art {
  height: 168px;
  margin: -8px -8px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  overflow: hidden;
}
.pillar-art img { height: 150px; width: auto; display: block; }

.flow-art {
  margin: 0 0 clamp(40px, 5vw, 60px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.flow-art img { width: 100%; height: auto; display: block; }

@media (max-width: 760px) {
  .pillar-art { height: 150px; }
  .pillar-art img { height: 132px; }
}

/* Pipeline.ai — conversation & mockup motion (companion to convo.js)
   All motion gated behind prefers-reduced-motion: no-preference;
   reduced-motion users see the completed static state. */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Sequenced conversation steps ---- */
  [data-convo] [data-cstep] {
    opacity: 0;
    transition: opacity .5s cubic-bezier(.2,.6,.2,1), transform .5s cubic-bezier(.2,.6,.2,1);
  }
  [data-convo] .t-line[data-cstep] { transform: translateY(7px); }
  [data-convo] [data-cfx="pop"] { transform: scale(.94); }
  [data-convo] [data-cstep].c-show { opacity: 1; transform: none; }

  /* Typing / speaking state: bubble visible, text hidden, indicator shown */
  [data-convo] .t-line.c-typing .t-bubble { color: transparent; position: relative; }

  .c-ind {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    display: flex; gap: 3px; align-items: center; height: 14px;
  }
  .c-ind i {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--ink-3);
    animation: c-dot 1.05s ease-in-out infinite;
  }
  .t-line.ai .c-ind i {
    width: 3px; border-radius: 2px;
    background: var(--brand);
    animation: c-bar .85s ease-in-out infinite;
  }
  .c-ind i:nth-child(2) { animation-delay: .14s; }
  .c-ind i:nth-child(3) { animation-delay: .28s; }
  @keyframes c-dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
  @keyframes c-bar { 0%, 100% { height: 5px; } 50% { height: 13px; } }

  /* Ringing → answered chip swap (stacked, no layout shift) */
  .chip-stack { display: grid; }
  .chip-stack > * { grid-area: 1 / 1; justify-self: end; }
  [data-convo] .c-answer { opacity: 0; transition: opacity .35s ease .15s; }
  [data-convo].c-answered .c-answer { opacity: 1; }
  [data-convo].c-answered .c-ringer { opacity: 0; }
  .c-ringer .dot { animation: c-ring-pulse .9s ease-in-out infinite; }
  @keyframes c-ring-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

  /* ---- Cascade: rows appear staggered, once ---- */
  [data-cascade].cas-ready > * {
    opacity: 0; transform: translateY(10px);
    transition: opacity .55s cubic-bezier(.2,.6,.2,1), transform .55s cubic-bezier(.2,.6,.2,1);
  }
  [data-cascade].cas-ready > .cas-in { opacity: 1; transform: none; }

  /* ---- Pop: single element appears after a beat ---- */
  [data-pop].pop-ready {
    opacity: 0; transform: scale(.95);
    transition: opacity .5s cubic-bezier(.2,.6,.2,1), transform .5s cubic-bezier(.34,1.4,.4,1);
  }
  [data-pop].pop-in { opacity: 1; transform: none; }
}