/* ProxyLane MCP landing: reuses residential.css scenes, adds the agent console and MCP-specific scenes */
/* Agent console in the shared marketing hero */
.mcp-agent{--rp-mint:#00f2e6;--rp-moss:#8dc63f;position:relative;z-index:1;width:100%;max-width:560px;justify-self:end;border-radius:24px;background:#141414;color:#e8e8e8;box-shadow:rgba(0,0,0,.15) 0 4px 20px 0;overflow:hidden;border:1px solid #262626}
.mcp-agent-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid #262626;font-size:12px;color:#a9abb2}
.mcp-agent-bar>i{width:9px;height:9px;border-radius:50%;background:#333}
.mcp-agent-bar>span{display:inline-flex;align-items:center;gap:8px;margin-left:12px;color:#fff;font-weight:500}
.mcp-agent-bar img{width:14px;height:14px}
.mcp-agent-bar em{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-style:normal;padding:4px 10px;border-radius:40px;border:1px solid #2f2f2f}
.mcp-live-dot{width:7px;height:7px;border-radius:50%;background:var(--rp-moss)}
.mcp-agent-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px}
.mcp-bubble{align-self:flex-end;max-width:88%;margin:0 0 4px;padding:10px 14px;border-radius:16px 16px 4px 16px;background:#262626;color:#fff;font-size:14px;line-height:1.5}
.mcp-call{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;border:1px solid #262626;background:#1a1a1a;font-size:13px;color:#a9abb2}
.mcp-call code{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--rp-mint)}
.mcp-call span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcp-call b{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--rp-moss);color:#141414;font-size:11px}
.mcp-call-browser{border-color:#2f3a52;background:#171c27}
.mcp-call-browser img{width:16px;height:16px;border-radius:4px;background:#fff;padding:1px}
.mcp-call-browser code{color:#fff}
.mcp-result{margin-top:4px;border-radius:14px;border:1px solid #2a2a2a;overflow:hidden;font-size:13px}
.mcp-result-row{display:grid;grid-template-columns:18px 52px 1fr 1fr 24px;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #222}
.mcp-result-row img{width:16px;height:16px;border-radius:4px;background:#fff;padding:1px}
.mcp-result-row code{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff}
.mcp-result-row span{display:flex;align-items:center;gap:8px;color:#a9abb2;white-space:nowrap}
.mcp-geo{display:inline-grid;place-items:center;font-style:normal;height:18px;min-width:24px;padding:0 4px;border-radius:4px;background:#2a2a2a;color:#fff;font-size:10px;font-weight:600}
.mcp-result-row b{justify-self:end;font-weight:600;color:var(--rp-moss)}
.mcp-result-more{padding:8px 12px;color:#7c7c7c;font-size:12px}
.mcp-step{animation:mcp-in .55s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
.mcp-proof{padding-top:8px}
.mcp-page .hero-grid-stage .hero{height:auto;min-height:0}
/* One 96px rhythm between same-colour sections, like the home page bands */
.mcp-landing>.section{padding-top:96px;padding-bottom:0}
.mcp-landing>.rp-faq{padding-top:96px;padding-bottom:96px}
.mcp-landing .rp-usecases-heading{margin-bottom:48px}

/* Steps */
.mcp-steps{list-style:none;margin:0;padding:0}
.mcp-steps .rp-card{gap:0}
.mcp-step-number{font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--rp-ash);margin-bottom:20px}
.mcp-step-visual{display:flex;align-items:center;min-height:88px;margin-bottom:24px;padding:16px 14px;border-radius:14px;background:#f5f5f6;border:1px solid var(--rp-line)}
.mcp-steps h3{font-size:22px;letter-spacing:-.03em;margin-bottom:8px}
.mcp-steps p{margin:0;font-size:15px}
.mcp-link-copy{display:grid;place-items:center;margin-left:4px;width:26px;height:26px;border-radius:7px;background:#1b1b1b;color:#fff;font-style:normal;flex:none}
.mcp-link-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mcp-link-pill{display:flex;width:100%;align-items:center;gap:8px;padding-right:6px!important;padding:9px 14px;border-radius:40px;background:#fff;border:1px solid var(--rp-line);font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--rp-ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcp-approve>span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1b1b1b;font-weight:500}
.mcp-approve img{width:18px;height:18px;flex:none}
.mcp-approve{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:8px 8px 8px 12px;border-radius:12px;background:#fff;border:1px solid var(--rp-line);font-size:13px;color:var(--rp-steel)}
.mcp-approve b{padding:8px 12px;border-radius:6px;background:#1b1b1b;color:#fff;font-weight:500;font-size:12px;white-space:nowrap}
.mcp-terminal{display:flex;align-items:center;gap:8px;width:100%;white-space:nowrap;padding:12px 14px;border-radius:12px;background:#141414;color:#e8e8e8;font:13px ui-monospace,SFMono-Regular,Menlo,monospace}
.mcp-terminal img{width:18px;height:18px;border-radius:5px;background:#fff;padding:2px;flex:none}
.mcp-terminal span{flex:1}
.mcp-terminal b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--rp-moss);color:#141414;font-size:11px}

/* Bento scenes */
.mcp-landing .rp-tile-hero .rp-profiles{right:52%;left:40px}
.mcp-json{position:absolute;z-index:2;right:32px;bottom:44px;width:min(320px,44%);padding:14px 16px;border-radius:14px;background:#1f1f1f;border:1px solid #333;font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#a9abb2;transform:rotate(2deg);box-shadow:rgba(0,0,0,.4) 0 16px 30px -14px}
.mcp-json-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:#fff;font-family:Inter,sans-serif;font-size:12px;font-weight:500}
.mcp-json-head img{width:14px;height:14px;border-radius:3px;background:#fff;padding:1px}
.mcp-json code{font:inherit;color:inherit}
.mcp-json b{color:var(--rp-mint);font-weight:500}
.mcp-ok{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--rp-moss);color:#141414;font-size:11px;font-weight:700;flex-shrink:0}
.mcp-swap{position:absolute;left:28px;right:28px;bottom:32px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.mcp-swap .rp-blocker{font-size:13px}
.mcp-swap-arrow{padding-left:16px;font-size:12px;color:#7c7c7c;border-left:1px dashed #444;margin-left:18px;line-height:2.2}
.mcp-city-chip{left:50%;top:32%;transform:translateX(-50%);white-space:nowrap}
.mcp-bars{position:absolute;left:28px;right:28px;bottom:28px;height:120px;display:flex;align-items:flex-end;gap:6px}
.mcp-bars i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(#00f2e6,rgba(0,242,230,.25));transform-origin:bottom}
.rp-motion .mcp-bars i{transform:scaleY(.15);transition:transform .9s var(--rp-ease)}
.rp-motion .is-visible .mcp-bars i{transform:none}
.mcp-bars i:nth-child(2n){transition-delay:.05s}
.mcp-bars i:nth-child(3n){transition-delay:.1s}
.mcp-usage-chip{right:24px;top:6px}
.mcp-checkout{position:absolute;left:28px;right:28px;bottom:24px;display:grid;gap:12px;padding:16px 18px;border-radius:16px;background:#1f1f1f;border:1px solid #333}
.mcp-checkout small{display:block;font-size:11px;color:#7c7c7c;letter-spacing:.06em;text-transform:uppercase}
.mcp-checkout b{font-size:24px;font-weight:600;letter-spacing:-.03em;color:#fff}
.mcp-checkout ul{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.mcp-checkout li{padding:6px 10px;border-radius:40px;border:1px solid #333;font-size:12px;color:#d0d0d0}
.mcp-checkout-note{font-size:12px;color:#7c7c7c}
.mcp-formats{position:absolute;left:28px;right:28px;bottom:28px;display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.mcp-formats li{padding:8px 12px;border-radius:10px;background:#1f1f1f;border:1px solid #333;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#d0d0d0}
.mcp-formats li:nth-child(4),.mcp-formats li:nth-child(5),.mcp-formats li:nth-child(6){color:var(--rp-mint);border-color:rgba(0,242,230,.3)}

.mcp-export{display:none}
@media(max-width:1000px) and (min-width:761px){.mcp-export{position:absolute;left:28px;right:28px;top:4px;display:grid;gap:6px;padding:14px 16px;border-radius:14px;background:#1f1f1f;border:1px solid #333;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#a9abb2}.mcp-export b{color:var(--rp-mint);font-weight:500}.mcp-export code{font:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* Tools as an API reference */
.mcp-api{display:grid;gap:16px;max-width:1040px;margin:0 auto}
.mcp-api-group{background:#fff;border:1px solid var(--rp-line);border-radius:20px;padding:8px 28px 12px}
.mcp-api-group h3{margin:16px 0 4px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--rp-ash)}
.mcp-api-group ul{list-style:none;margin:0;padding:0}
.mcp-api-group li{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:24px;padding:14px 0;border-top:1px solid #eef0f2}
.mcp-api-group li:first-child{border-top:0}
.mcp-api-call{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--rp-ash);overflow-wrap:anywhere}
.mcp-api-call b{font-weight:600;color:var(--rp-ink)}
.mcp-api-call span{color:#087f79}
.mcp-api-returns{display:flex;gap:10px;font-size:14px;color:var(--rp-steel)}
.mcp-api-returns i{font-style:normal;color:var(--rp-ash)}

/* Finish */
.mcp-finish-url{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin:24px 0 0;padding:6px 6px 6px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.16)}
.mcp-finish-url code{min-width:0;font:500 15px ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcp-finish-copy{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:9px;border:0;background:#fff;color:#1b1b1b;cursor:pointer;transition:background .15s}
.mcp-finish-copy:hover{background:#ececec}
.mcp-finish-copy.is-copied{background:#8dc63f}

@keyframes mcp-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mcp-blink{0%,100%{opacity:.3}50%{opacity:1}}

@media(max-width:1000px) and (min-width:761px){.mcp-landing .rp-bento>.mcp-tile-wide{grid-column:span 2}}
@media(max-width:960px){.mcp-agent{justify-self:stretch;max-width:none}}
@media(max-width:640px){
    .mcp-agent-body{padding:16px}
    .mcp-result-row{grid-template-columns:18px 48px 1fr 24px;gap:8px}
    .mcp-result-row span:nth-of-type(2){display:none}
    .mcp-json{display:none}
    .mcp-landing .rp-tile-hero .rp-profiles{left:22px;right:22px}
    .mcp-api-group{padding:6px 18px 10px}
    .mcp-api-group li{grid-template-columns:1fr;gap:6px}
    .mcp-landing>.section{padding-top:72px}
    .mcp-landing>.rp-faq{padding-top:72px;padding-bottom:72px}
    .mcp-landing .rp-usecases-heading{margin-bottom:32px}
    .mcp-swap,.mcp-bars,.mcp-checkout,.mcp-formats{left:22px;right:22px}
}
@media(prefers-reduced-motion:reduce){.mcp-step,.mcp-bars i{opacity:1!important;transform:none!important;animation:none!important}}

/* Setup page at /mcp */
.mcp-setup-page{background:#eaeaea}
.mcp-connect{--rp-mint:#00f2e6;--rp-moss:#8dc63f;--rp-line:#e0e1e6;max-width:760px;padding-top:72px;padding-bottom:96px}
.mcp-connect-head{text-align:center;margin-bottom:32px}
.mcp-connect-head .eyebrow{justify-content:center;gap:10px}
.mcp-connect-head h1{font-size:clamp(44px,5vw,64px);margin-bottom:16px}
.mcp-connect-head p{font-size:17px;max-width:520px;margin:0 auto}
.mcp-connect-url{display:flex;align-items:center;gap:14px;padding:10px 10px 10px 20px;margin-bottom:16px;border-radius:16px;background:#fff;border:1px solid var(--rp-line);box-shadow:rgba(0,0,0,.06) 0 8px 24px}
.mcp-connect-url img{width:20px;height:20px;flex:none}
.mcp-connect-url code{flex:1;min-width:0;font:500 17px ui-monospace,SFMono-Regular,Menlo,monospace;color:#1b1b1b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcp-copy{gap:8px;padding:12px 18px}
.mcp-copy.is-copied{background:#087f79;border-color:#087f79}
.mcp-connect-card{border-radius:20px;background:#141414;color:#e8e8e8;overflow:hidden;border:1px solid #262626}
.mcp-tabs{display:flex;gap:4px;padding:8px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid #262626}
.mcp-tabs::-webkit-scrollbar{display:none}
.mcp-tabs button{display:inline-flex;align-items:center;gap:8px;flex:none;padding:9px 14px;border:1px solid transparent;border-radius:10px;background:transparent;color:#a9abb2;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,color .15s}
.mcp-tabs button:hover{color:#fff}
.mcp-tabs button[aria-selected="true"]{background:#262626;border-color:#333;color:#fff}
.mcp-tabs img,.mcp-tabs svg{width:18px;height:18px;flex:none}
.mcp-tabs img[src*="chatgpt"],.mcp-tabs img[src*="cursor"],.mcp-tabs img[src*="modelcontextprotocol"]{filter:invert(1)}
.mcp-panel{padding:20px}
.mcp-panel>p{margin:14px 2px 0;font-size:14px;color:#a9abb2}
.mcp-command{position:relative;border-radius:12px;background:#0d0d0d;border:1px solid #262626}
.mcp-command pre{margin:0;padding:16px 56px 16px 18px;font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--rp-mint);white-space:pre-wrap;overflow-wrap:anywhere}
.mcp-command-copy{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:34px;height:34px;border-radius:8px;border:1px solid #333;background:#1f1f1f;color:#e8e8e8;cursor:pointer}
.mcp-command-copy:hover{background:#2a2a2a}
.mcp-command-copy.is-copied{background:var(--rp-moss);border-color:var(--rp-moss);color:#141414}
.mcp-connect-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;margin:16px 0 0;padding:0;counter-reset:step}
.mcp-connect-steps li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--rp-line);font-size:14px}
.mcp-connect-steps span{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;border:1px solid var(--rp-line);color:#087f79}
.mcp-connect-steps span svg,.mcp-connect-steps span img{width:18px;height:18px}
.mcp-connect-steps b{font-weight:500;color:#1b1b1b}
.mcp-connect-more{text-align:center;margin:28px 0 0;font-size:14px}
.mcp-connect-more a{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:#1b1b1b}
.mcp-connect-more a:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:640px){
    .mcp-connect{padding-top:40px;padding-bottom:64px}
    .mcp-connect-head h1{font-size:40px}
    .mcp-connect-url{padding-left:14px}
    .mcp-connect-url code{font-size:14px}
    .mcp-copy span{display:none}
    .mcp-connect-steps{grid-template-columns:1fr}
}