/* /voice-layer-for-coding-agents (src/app/voice-layer-for-coding-agents/route.ts). Loads after p-discovery.css. */

/* Demo rows: homepage feature rows with 16:9 video cards */
.vl-demos{max-width:1080px;margin:0 auto}
.vl-demos .feat-list{border-top:1px solid var(--dc-line)}
.vl-demos .feat-list .feat{padding:72px 0}
.vl-demos .feat-list .feat:last-child{border-bottom:0}
.feat-card.vl-video{aspect-ratio:16/9;background:#111}
.vl-video .demo-video{border-radius:0;height:100%}

/* Centred section heads, like the homepage .feat-intro */
.story .dc .vl-head{max-width:720px;margin:0 auto 40px;text-align:center}
.story .dc .vl-head>p:not(.section-kicker){margin-left:auto;margin-right:auto}

/* Loop diagram */
.vl-diagram{margin:0;padding:28px 28px 24px;border-radius:24px;background:#f0f0ed;box-shadow:0 1px 0 rgba(0,0,0,.03),0 18px 44px rgba(26,24,20,.08)}
.vl-flow{--vl-gap:36px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--vl-gap);align-items:stretch}
.vl-node{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px 20px 20px;border-radius:18px;background:#fff;box-shadow:0 4px 16px rgba(34,32,0,.03)}
.vl-node:not(:last-child):after{content:"";position:absolute;top:50%;right:calc(var(--vl-gap) * -1 + 8px);width:calc(var(--vl-gap) - 16px);height:10px;margin-top:-5px;background:#b9b8b2;clip-path:polygon(0 42%,calc(100% - 7px) 42%,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,calc(100% - 7px) 58%,0 58%)}
.vl-node .dc-n{font-size:15px}
.story .vl-node h3{display:flex;align-items:center;gap:8px;font-family:var(--head);font-weight:400;font-size:22px;line-height:1.2;letter-spacing:-.04em;color:#1c1c1a}
.story .vl-node p{font-size:13px;line-height:20px;color:#888;margin-top:auto}
.story .vl-node p.vl-you{font-size:16px;line-height:24px;color:#333;margin-top:0}
.vl-agents{display:flex;flex-wrap:wrap;gap:6px}
.vl-agents span{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:#444;padding:5px 10px 5px 6px;border-radius:999px;background:#f5f5f2}
.vl-agents img{object-fit:contain;border-radius:4px}
.vl-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.vl-tags li{font-size:12px;line-height:16px;color:#555;padding:5px 10px;border-radius:999px;background:#f5f5f2}
.vl-node blockquote{margin:0;display:grid;gap:10px;padding:14px 14px 16px;border-radius:14px;background:#f7f7f4}
.vl-node blockquote .waveform{height:14px;color:#4f8b43}
.story .vl-node blockquote span:not(.waveform){font-size:15px;line-height:22px;letter-spacing:-.02em;color:#222}

.vl-core{background:#222;box-shadow:0 10px 30px rgba(26,24,20,.18)}
.vl-core .dc-n{color:#77776f}
.story .vl-core h3{color:#fff}
.vl-core h3 img{filter:invert(1)}
.vl-core .vl-tags li{background:rgba(255,255,255,.1);color:#e9e9e4}
.vl-core .vl-tags li:first-child{background:#eef6ea;color:#4f8b43}
.story .vl-core p{color:#a3a39d}

/* Return lane: dashed U from (4) back to (1) */
.vl-return{position:relative;padding-top:16px}
.vl-return-line{position:absolute;top:0;left:12.5%;right:12.5%;height:36px;border:1.5px dashed #b9b8b2;border-top:0;border-radius:0 0 18px 18px}
.vl-return-line:before{content:"";position:absolute;left:-6.5px;top:-2px;border:5.5px solid transparent;border-bottom:8px solid #b9b8b2;border-top:0}
.story .vl-return p{position:relative;width:fit-content;max-width:min(780px,84%);margin:10px auto 0;padding:10px 18px;border-radius:999px;background:#fff;font-size:14px;line-height:21px;color:#666;text-align:center;box-shadow:0 4px 16px rgba(34,32,0,.04)}
.vl-return strong{font-weight:500;color:#222;margin-right:6px}
.story .vl-diagram figcaption{font-size:12px;line-height:18px;color:#999;margin-top:20px;text-align:center}

@media(max-width:1000px){
  .vl-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vl-node:nth-child(2):after{display:none}
  .vl-return-line{display:none}
  .story .vl-return p{max-width:none;width:auto;border-radius:16px}
  .vl-return p:before{content:"↺ ";color:#4f8b43}
}
@media(max-width:880px){
  .vl-demos .feat-list{padding:0}
  .vl-demos .feat-list .feat{padding:48px 0}
}
@media(max-width:720px){
  .story .dc .vl-head{text-align:left;margin-bottom:28px}
  .vl-diagram{padding:12px 12px 18px;border-radius:20px}
  .vl-flow{--vl-gap:28px;grid-template-columns:1fr}
  .vl-node:not(:last-child):after,.vl-node:nth-child(2):after{display:block;top:auto;bottom:calc(var(--vl-gap) * -1 + 6px);right:auto;left:50%;width:10px;height:calc(var(--vl-gap) - 12px);margin:0 0 0 -5px;clip-path:polygon(42% 0,58% 0,58% calc(100% - 7px),100% calc(100% - 7px),50% 100%,0 calc(100% - 7px),42% calc(100% - 7px))}
  .vl-node{padding:18px 18px 18px}
  .story .vl-node h3{font-size:20px}
  .vl-return{padding-top:12px}
  .story .vl-return p{font-size:13px;line-height:20px;padding:14px 16px;text-align:left}
}