/* Additions for /agenttech-mcp-preview. Loaded with homepage-preview.css. */
.hp-sample{--hp-cta-space:32px;--hp-cta-pair:20px}
.hp-sample .mk-ctas{gap:var(--hp-cta-pair);margin-top:var(--hp-cta-space);align-items:center}
.hp-sample .mk-ctas.is-center{justify-content:center}
.hp-sample .mk-hero p.sub{margin-bottom:0}
.hp-sample .final .mk-h2{margin-bottom:0}

.hp-sample .feature-grid .feat{display:flex;gap:12px;align-items:center;width:100%;margin:0;padding:20px 12px 20px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--navy);font:600 .95rem/1.3 var(--font-sans);text-align:left;cursor:pointer}
.hp-sample .feature-grid .feat::after{content:"";width:18px;height:18px;margin-left:auto;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313294b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;opacity:.75}
.hp-sample .hero-stage{position:relative;z-index:1;height:480px;min-height:480px;max-height:480px;border-radius:20px;border:1px solid rgba(19,41,75,.12);background:linear-gradient(165deg,rgba(255,253,249,.88),rgba(230,238,252,.55) 55%,rgba(253,240,220,.45));box-shadow:0 18px 50px rgba(6,17,39,.14);overflow:hidden}
.hp-sample .hero-motion{position:absolute;inset:0}
.hp-sample .hero-agent-chip{position:absolute;top:14px;right:14px;z-index:4;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:999px;background:rgba(255,253,249,.92);border:1px solid rgba(19,41,75,.12);box-shadow:0 8px 24px rgba(6,17,39,.12);font:600 .78rem/1 var(--font-sans);color:var(--navy)}
.hp-sample .hero-agent-chip .avatar{width:28px;height:28px;font-size:.68rem}
.hp-sample .avatar.ai{background:var(--purple-bg);color:#3c2a86}
.hp-sample .hero-pause{position:absolute;left:14px;bottom:12px;z-index:5;height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(19,41,75,.28);background:rgba(255,253,249,.92);color:var(--navy);font:600 .75rem/1 var(--font-sans);cursor:pointer}
.hp-sample .hero-pause:focus-visible{outline:3px solid #8a4b04;outline-offset:3px}
.hp-sample .hero-scene{position:absolute;inset:64px 18px 48px;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity 350ms ease,transform 350ms cubic-bezier(.22,1,.36,1)}
.hp-sample .hero-scene.is-active{opacity:1;transform:none;pointer-events:auto;z-index:2}
.hp-sample .hero-scene.is-exiting{opacity:0;transform:translateY(-8px)}
.hp-sample .hero-queue{margin:0 0 12px;font:600 .9rem/1.3 var(--font-sans);color:var(--navy);display:flex;justify-content:space-between}
.hp-sample .hero-queue span{color:#4b5b78;font-weight:500}
.hp-sample .call-card,.hp-sample .outcome-card,.hp-sample .next-card{background:rgba(255,253,249,.82);border:1px solid rgba(255,253,249,.9);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,253,249,.95),0 12px 32px rgba(6,17,39,.12);backdrop-filter:blur(14px);padding:16px}
.hp-sample .hero-timer{margin:10px 0 0;font:600 1.35rem/1 var(--font-sans);color:var(--navy)}
.hp-sample .call-header{margin:0 0 12px;font:600 .9rem/1.3 var(--font-sans);color:var(--navy)}
.hp-sample .hero-scene .line{margin:0 0 8px;padding:10px 12px;border-radius:12px;font-size:.9rem;line-height:1.4;max-width:92%}
.hp-sample .hero-scene .line.prospect{background:#f3efe6;color:var(--navy)}
.hp-sample .hero-scene .line.agent{background:var(--navy);color:#fffdf9;margin-left:auto}
.hp-sample .hero-coach{margin-top:12px;border-left:3px solid #5b3fc4;box-shadow:0 16px 36px rgba(91,63,196,.2)}
.hp-sample .hero-coach span{display:block;font-weight:600;font-size:.9rem;line-height:1.4;color:#3c2a86}
.hp-sample .outcome-check{display:flex;align-items:center;gap:8px;margin:0;font:700 1.05rem/1.3 var(--font-sans);color:#135f3f}
.hp-sample .outcome-check svg{width:22px;height:22px;fill:none;stroke:#135f3f;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hp-sample .outcome-meta,.hp-sample .next-label,.hp-sample .next-row,.hp-sample .next-or{margin:6px 0 0;font-size:.9rem;line-height:1.4;color:#4b5b78}
.hp-sample .next-card{margin-top:12px}
.hp-sample .next-label{font:700 .72rem/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:#4b5b78}
.hp-sample .next-row{color:var(--navy);font-weight:600}
.hp-sample .hero-static{display:none;position:absolute;inset:16px;overflow:auto}
.hp-sample .hero-static .tool-row{opacity:1}
.hp-sample .hero-stage.is-paused .hero-motion,
.hp-sample .hero-stage.is-paused .hero-motion *{animation-play-state:paused !important}
@keyframes hp-float{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@keyframes hp-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes hp-check{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes hp-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hp-rise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
 .hp-sample .hero-motion,.hp-sample .hero-pause{display:none}
 .hp-sample .hero-static{display:block}
}
@media (prefers-reduced-motion: no-preference){
 .hp-sample .hero-scene.is-active .call-card{animation:hp-pop .32s ease-out .2s both,hp-float 1.6s ease-in-out 1.6s infinite alternate}
 .hp-sample .hero-scene.is-active .line.prospect{animation:hp-type .8s steps(24,end) .2s both}
 .hp-sample .hero-scene.is-active .line.agent{animation:hp-type .7s steps(32,end) 1.1s both}
 .hp-sample .hero-scene.is-active .hero-coach{animation:hp-rise .4s cubic-bezier(.22,1,.36,1) 1.8s both}
 .hp-sample .hero-scene.is-active .outcome-card{animation:hp-pop .4s ease-out .2s both}
 .hp-sample .hero-scene.is-active .next-card{animation:hp-rise .3s ease-out .9s both}
}
.hp-sample .mcp-clients{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hp-sample .mcp-clients li{list-style:none;margin:0;padding:10px 16px;border-radius:999px;border:1px solid rgba(19,41,75,.16);background:rgba(255,253,249,.8);font:600 .92rem/1 var(--font-sans);color:var(--navy)}
.hp-sample .mcp-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px;padding:0;list-style:none}
.hp-sample .mcp-step{margin:0;padding:22px 20px;border-radius:18px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.hp-sample .mcp-step b{display:block;font:700 .72rem/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:#4b5b78;margin-bottom:10px}
.hp-sample .mcp-step h3{margin:0 0 8px;font:600 1.15rem/1.3 var(--font-sans);color:var(--navy)}
.hp-sample .mcp-step p{margin:0;color:#3d4d68;font-size:.95rem;line-height:1.45}
.hp-sample .mcp-code{border-radius:20px;background:var(--navy);color:#fffdf9;padding:22px;box-shadow:var(--shadow-pop)}
.hp-sample .mcp-code .tabs{margin-bottom:16px}
.hp-sample .mcp-code .tab{background:transparent;color:#fffdf9;border-color:rgba(255,253,249,.28)}
.hp-sample .mcp-code .tab.on{background:#fffdf9;color:var(--navy);border-color:#fffdf9}
.hp-sample .mcp-code pre{margin:0;padding:18px;border-radius:14px;background:#0a1a36;color:#fffdf9;overflow:auto;font:500 .84rem/1.55 ui-monospace,Menlo,monospace;white-space:pre-wrap}
.hp-sample .mcp-code .mcp-copy{margin-top:14px}
.hp-sample .mcp-note{margin:14px 0 0;color:rgba(255,253,249,.82);font-size:.9rem;line-height:1.45}
.hp-sample .mcp-faq{display:grid;gap:10px;margin-top:28px}
.hp-sample .mcp-faq details{border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:0 18px}
.hp-sample .mcp-faq summary{cursor:pointer;font:600 1.02rem/1.4 var(--font-sans);color:var(--navy);padding:16px 0}
.hp-sample .mcp-faq summary:focus-visible{outline:3px solid #8a4b04;outline-offset:3px}
.hp-sample .mcp-faq details p{margin:0 0 16px;color:#3d4d68;line-height:1.5}
.hp-sample .tool-list{margin:0;padding:0;list-style:none}
.hp-sample .tool-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid rgba(19,41,75,.12);font:600 .84rem/1.35 var(--font-sans);color:var(--navy)}
.hp-sample .tool-row span{font-weight:500;color:#4b5b78}
.hp-sample .mcp-log{margin:12px 0 0;font:600 .9rem/1.4 var(--font-sans);color:#135f3f}
@media (prefers-reduced-motion: no-preference){
 .hp-sample .hero-scene.is-active .tool-row{animation:hp-check .22s ease-out both}
 .hp-sample .hero-scene.is-active .tool-row:nth-child(1){animation-delay:.15s}
 .hp-sample .hero-scene.is-active .tool-row:nth-child(2){animation-delay:.32s}
 .hp-sample .hero-scene.is-active .tool-row:nth-child(3){animation-delay:.49s}
 .hp-sample .hero-scene.is-active .tool-row:nth-child(4){animation-delay:.66s}
 .hp-sample .hero-scene.is-active .tool-row:nth-child(5){animation-delay:.83s}
}
@media (max-width:900px){
 .hp-sample .mcp-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
 .hp-sample{--hp-cta-space:24px}
 .hp-sample .hero-stage{height:320px;min-height:320px;max-height:320px}
 .hp-sample .hero-scene{inset:56px 10px 40px}
 .hp-sample .hero-agent-chip{left:10px;right:auto}
 .hp-sample .mcp-steps{grid-template-columns:1fr}
 .hp-sample .mcp-code pre{font-size:.78rem}
}

/* Dark code panel: keep tab and button states legible on navy */
.hp-sample .mcp-code .tab:hover:not(.on){background:rgba(255,253,249,.10);color:#fffdf9;border-color:rgba(255,253,249,.6)}
.hp-sample .mcp-code .tab.on,.hp-sample .mcp-code .tab.on:hover{background:#fffdf9;color:var(--navy);border-color:#fffdf9}
.hp-sample .mcp-code .tab:focus-visible,.hp-sample .mcp-code .mcp-copy:focus-visible{outline:3px solid #f1c46b;outline-offset:3px}
.hp-sample .mcp-code .mcp-copy{background:#fffdf9;color:var(--navy);border:1px solid #fffdf9;box-shadow:none;transform:none}
.hp-sample .mcp-code .mcp-copy:hover,.hp-sample .mcp-code .mcp-copy:focus-visible{background:#f1e5cd;color:var(--navy);border-color:#f1e5cd;box-shadow:none;transform:none}
.hp-sample .mcp-code .mcp-copy:active{background:#e4d3b4;color:var(--navy);border-color:#e4d3b4}