.live-pipeline {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
  padding: clamp(1rem, 2.6vw, 1.35rem);
  background:
    linear-gradient(rgba(24, 24, 24, 0.98), rgba(19, 23, 24, 0.98)) padding-box,
    linear-gradient(135deg, rgba(124, 92, 255, 0.88), rgba(51, 156, 255, 0.72), rgba(0, 212, 180, 0.68)) border-box;
}

.live-pipeline::before { background: radial-gradient(circle at 90% 0, rgba(0, 212, 180, 0.12), transparent 24%), linear-gradient(116deg, rgba(255,255,255,.06), transparent 26%, transparent 72%, rgba(0,212,180,.04)); }
.live-pipeline .console-orbit { display: none; }
.pipeline-header { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
.pipeline-header .console-status { color: #d9fff8; }
.pipeline-header .console-status > span { order: -1; }

.ingest-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 0.55rem; }
.live-audio,
.live-transcript,
.pipeline-stage,
.outcome-card { border: 1px solid rgba(255,255,255,.09); border-radius: 0.72rem; background: rgba(255,255,255,.035); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.live-audio,
.live-transcript { min-width: 0; padding: 0.7rem; }
.module-heading { display: flex; align-items: center; gap: 0.32rem; color: var(--subtle); font-size: .54rem; font-weight: 800; letter-spacing: .12em; }
.module-heading p { margin: 0; }
.module-heading time { margin-left: auto; color: var(--teal); font-size: .55rem; letter-spacing: .03em; }
.live-dot { width: .34rem; height: .34rem; border-radius: 50%; background: #ff5f5f; box-shadow: 0 0 .5rem rgba(255,95,95,.75); animation: recording-pulse 1.45s ease-in-out infinite; }
.audio-wave { display: flex; align-items: center; gap: 0.12rem; height: 2.3rem; margin-top: .48rem; }
.audio-wave i { width: .13rem; height: var(--wave-height); border-radius: .5rem; background: linear-gradient(to top, var(--violet), var(--blue), var(--teal)); transform-origin: center; animation: audio-pulse 900ms ease-in-out infinite alternate; animation-delay: var(--wave-delay); }
.audio-wave i:nth-child(1) { --wave-height: 23%; --wave-delay: -570ms; }.audio-wave i:nth-child(2) { --wave-height: 57%; --wave-delay: -90ms; }.audio-wave i:nth-child(3) { --wave-height: 33%; --wave-delay: -770ms; }.audio-wave i:nth-child(4) { --wave-height: 79%; --wave-delay: -260ms; }.audio-wave i:nth-child(5) { --wave-height: 47%; --wave-delay: -680ms; }.audio-wave i:nth-child(6) { --wave-height: 93%; --wave-delay: -410ms; }.audio-wave i:nth-child(7) { --wave-height: 61%; --wave-delay: -810ms; }.audio-wave i:nth-child(8) { --wave-height: 38%; --wave-delay: -160ms; }.audio-wave i:nth-child(9) { --wave-height: 73%; --wave-delay: -520ms; }.audio-wave i:nth-child(10) { --wave-height: 49%; --wave-delay: -310ms; }.audio-wave i:nth-child(11) { --wave-height: 91%; --wave-delay: -640ms; }.audio-wave i:nth-child(12) { --wave-height: 36%; --wave-delay: -220ms; }.audio-wave i:nth-child(13) { --wave-height: 72%; --wave-delay: -740ms; }.audio-wave i:nth-child(14) { --wave-height: 52%; --wave-delay: -120ms; }.audio-wave i:nth-child(15) { --wave-height: 84%; --wave-delay: -460ms; }.audio-wave i:nth-child(16) { --wave-height: 31%; --wave-delay: -820ms; }.audio-wave i:nth-child(17) { --wave-height: 62%; --wave-delay: -380ms; }.audio-wave i:nth-child(18) { --wave-height: 28%; --wave-delay: -610ms; }
.audio-source { margin: .25rem 0 0; color: var(--muted); font-size: .56rem; line-height: 1.2; }
.live-transcript { position: relative; overflow: hidden; }
.live-transcript::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1.6rem; content: ""; background: linear-gradient(transparent, rgba(24,24,24,.94)); }
.live-transcript p { position: relative; z-index: 1; margin: .44rem 0 0; color: #dde2e4; font-size: .61rem; line-height: 1.34; }.live-transcript b { color: var(--teal); font-weight: 800; }.live-transcript p + p b { color: var(--blue); }.typing-cursor { width: .32rem; height: .64rem; margin-left: auto; background: var(--teal); animation: cursor-blink 800ms steps(1,end) infinite; }

.process-caption { position: relative; z-index: 1; display: flex; align-items: center; gap: .4rem; color: var(--subtle); font-size: .5rem; font-weight: 800; letter-spacing: .1em; }.process-caption i { height: 1px; flex: 1; background: linear-gradient(to right, rgba(124,92,255,.5), rgba(0,212,180,.4)); }
.process-rail { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }.process-rail::before { position: absolute; top: 50%; right: 10%; left: 10%; height: 1px; content: ""; background: linear-gradient(to right, rgba(124,92,255,.25), rgba(51,156,255,.35), rgba(0,212,180,.35)); }.process-rail::after { position: absolute; top: calc(50% - .17rem); left: 12%; width: .34rem; height: .34rem; content: ""; border-radius: 50%; background: var(--teal); box-shadow: 0 0 .75rem var(--teal); animation: signal-travel 3.2s ease-in-out infinite; }
.pipeline-stage { position: relative; min-width: 0; padding: .55rem; }.pipeline-stage::before { position: absolute; inset: -1px; z-index: -1; border-radius: inherit; content: ""; opacity: .35; background: linear-gradient(135deg, var(--violet), var(--blue), var(--teal)); }.pipeline-stage > div { min-width: 0; }.stage-index { display: block; color: var(--subtle); font-size: .48rem; font-weight: 800; }.pipeline-stage p { margin: .34rem 0 0; color: #f3f5f6; font-size: .58rem; font-weight: 800; letter-spacing: .04em; }.pipeline-stage small { display: block; overflow: hidden; margin-top: .24rem; color: var(--muted); font-size: .5rem; text-overflow: ellipsis; white-space: nowrap; }.pipeline-stage > i { position: absolute; top: .5rem; right: .5rem; color: var(--teal); font-size: .62rem; font-style: normal; }.questions-stage > i { color: var(--blue); }.coaching-stage > i { color: var(--violet); }

.outcome-card { position: relative; z-index: 1; padding: .65rem .72rem; }.outcome-card > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .42rem; margin-top: .38rem; }.outcome-card p:not(.card-label) { margin: 0; color: #e9eeee; font-size: .65rem; font-weight: 700; line-height: 1.2; }.outcome-pulse { width: .35rem; height: .35rem; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 .16rem rgba(0,212,180,.11), 0 0 .6rem rgba(0,212,180,.82); animation: recording-pulse 1.5s ease-in-out infinite; }.outcome-link { color: var(--teal); font-size: .5rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }

@keyframes audio-pulse { from { transform: scaleY(.38); opacity: .54; } to { transform: scaleY(1); opacity: 1; } }
@keyframes recording-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes cursor-blink { 50% { opacity: 0; } }
@keyframes signal-travel { 0%, 14% { left: 12%; opacity: 0; } 20% { opacity: 1; } 75% { left: 85%; opacity: 1; } 85%,100% { left: 85%; opacity: 0; } }

@media (min-width: 860px) and (max-width: 1179px) {
  .hero { grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: clamp(1rem, 3vh, 1.6rem); }
  .hero-copy, .signal-console { width: min(100%, 44rem); justify-self: center; }
  h1 { max-width: 12.5ch; font-size: clamp(3.4rem, 7.3vw, 4.7rem); }
}

@media (min-width: 1180px) {
  .hero { grid-template-columns: minmax(0, .96fr) minmax(29rem, 1.04fr); gap: clamp(2.2rem, 6vw, 7rem); }
  .signal-console { justify-self: end; }
}

@media (max-height: 760px), (max-width: 389px) {
  .live-pipeline { gap: .48rem; padding: .78rem; }.live-transcript p + p { display: none; }.audio-wave { height: 1.6rem; }.live-audio, .live-transcript { padding: .58rem; }.process-caption { display: none; }.pipeline-stage { padding: .44rem; }.pipeline-stage small, .outcome-link { display: none; }.outcome-card { padding: .52rem .6rem; }
}

@media (prefers-reduced-motion: reduce) { .live-pipeline *, .live-pipeline *::before, .live-pipeline *::after { animation: none !important; } }
