/* MCP server page — composes the shared product-page vocabulary (pp-*).
   No new type sizes, colours, radii, shadows or easings: everything below reuses
   values already defined in product-page.css / the token sheets. */

/* Hero */
.mcp-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);gap:56px;align-items:center;max-width:1144px;margin:0 auto}
.mcp-badge{display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:9px 16px;border-radius:999px;background:var(--mint-100);border:1px solid var(--mint-200);font:500 13px/1 var(--font-body);color:var(--green-700b)}
.mcp-dot{width:8px;height:8px;border-radius:999px;background:var(--green-500b);animation:mcpPulse 2s ease-in-out infinite}
@keyframes mcpPulse{0%,100%{opacity:1}50%{opacity:.35}}
.mcp-qual{margin:18px 0 0;max-width:56ch;font:400 14.5px/1.6 var(--font-body);color:var(--ink-mutedb)}
/* Headline word reveal — same values as the site-wide SplitText pattern */
.sw{display:inline-block;overflow:hidden;padding-bottom:0.2em;margin-bottom:-0.2em;vertical-align:bottom}
.swi{display:inline-block;transform:translateY(112%);animation:mcpSwiUp .85s cubic-bezier(.16,1,.3,1) forwards}
@keyframes mcpSwiUp{to{transform:translateY(0)}}

/* Hero illustration — AI tools orbiting the Gain.io record, lines pulsing toward the hub */
.mcpo{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:56/50}
.mcpo .mcpd-grid{position:absolute;inset:0;background:var(--pattern-grid,none);opacity:.45;-webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000 20%,transparent 100%);mask-image:radial-gradient(80% 80% at 50% 50%,#000 20%,transparent 100%)}
.mcpo-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mcpo-l{stroke:var(--green-500b);stroke-width:1.5;fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.35;stroke-dasharray:3 6;animation:mcpoFlow 1.4s linear infinite,mcpoBreathe 3.6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes mcpoFlow{to{stroke-dashoffset:-18}}
@keyframes mcpoBreathe{0%,100%{opacity:.22}50%{opacity:.55}}
.mcpo-t img{width:26px;height:26px;object-fit:contain}
.mcpo-pulse{fill:var(--green-500b);opacity:0;animation:mcpoDot 2.8s linear infinite;animation-delay:var(--d,0s)}
@keyframes mcpoDot{0%,4%{opacity:0}12%,72%{opacity:.9}84%,100%{opacity:0}}
.mcpo-ring{position:absolute;left:50%;top:50%;width:170px;height:170px;border:1px solid var(--green-500b);border-radius:999px;opacity:0;animation:mcpoRing 3.4s cubic-bezier(.16,1,.3,1) infinite;animation-delay:var(--d,0s);pointer-events:none}
@keyframes mcpoRing{0%{transform:translate(-50%,-50%) scale(.5);opacity:.45}70%{opacity:0}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
.mcpo-n{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:7px;opacity:0;animation:mcpFade .5s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.35s + var(--i,0)*.09s)}
.mcpo-t{position:relative;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:var(--surface);border:1px solid var(--border-a);box-shadow:0 4px 14px rgba(18,60,44,.09);font:500 12px/1 'JetBrains Mono',ui-monospace,monospace;color:var(--green-700b)}
.mcpo-t::after{content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:999px;background:var(--lime);border:2px solid var(--surface);animation:mcpoBlink 2.4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes mcpoBlink{0%,100%{opacity:.25}50%{opacity:1}}
.mcpo-n small{font:400 10.5px/1.4 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.04em;color:var(--ink-mutedb);background:var(--surface);padding:1px 6px;border-radius:999px}
.mcpo-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:9px;padding:20px 26px 16px;border-radius:22px;background:var(--surface);border:1px solid var(--border-a);box-shadow:0 14px 36px rgba(18,60,44,.14)}
.mcpo-g{display:block;width:46px;height:46px;border-radius:14px;object-fit:contain}
.mcpo-hub b{font:700 15px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink-a)}
.mcpo-hub small{font:500 9.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--green-700b)}
@keyframes mcpFade{from{opacity:0;transform:translate(-50%,calc(-50% + 6px))}to{opacity:1;transform:translate(-50%,-50%)}}

/* "What will you ask" — asymmetric bento of prompt cards, not a marquee */
.mcp-ask-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:38px}
.mcp-ask{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px 24px;border-radius:20px;background:var(--surface);border:1px solid var(--border-a);box-shadow:0 1px 2px rgba(36,81,59,.06);transition:box-shadow .22s ease-out,translate .22s ease-out}
.mcp-ask:hover{translate:0 -3px;box-shadow:var(--shadow-md-g)}
.mcp-ask:nth-child(1){grid-column:span 3}
.mcp-ask:nth-child(2){grid-column:span 3}
.mcp-ask:nth-child(3){grid-column:span 2}
.mcp-ask:nth-child(4){grid-column:span 2}
.mcp-ask:nth-child(5){grid-column:span 2;background:linear-gradient(150deg,var(--mint-50) 0%,var(--mint-100) 100%)}
.mcp-ask-tag{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;background:var(--mint-100);color:var(--green-700b);font:500 11px/1.4 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
.mcp-ask-tag::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--green-500b)}
.mcp-ask-q{margin:0;flex:1;font:500 17px/1.5 var(--font-display);letter-spacing:-.012em;color:var(--ink-a);text-wrap:pretty}
.mcp-ask-tools{display:flex;flex-wrap:wrap;gap:7px;padding-top:12px;border-top:1px solid var(--border-a)}
.mcp-ask-tools code{padding:4px 10px;border-radius:999px;background:var(--green-900b);color:var(--lime);font:500 10.5px/1.5 'JetBrains Mono',ui-monospace,monospace}
@media(max-width:900px){.mcp-ask:nth-child(n){grid-column:span 3}}
@media(max-width:600px){.mcp-ask-grid{grid-template-columns:1fr}.mcp-ask:nth-child(n){grid-column:auto}}

/* Working annotations — visible by design while the product is planned, not shipped */
.mcp-note{width:fit-content;max-width:100%;margin:26px 0 0;padding:13px 16px;border:1px dashed var(--border-a);border-radius:12px;background:var(--surface);font:400 12.5px/1.65 'JetBrains Mono',ui-monospace,monospace;color:var(--ink-mutedb);text-wrap:pretty;box-sizing:border-box}
.mcp-tbc{padding:2px 7px;border-radius:6px;border:1px dashed var(--border-a);background:var(--mint-50);font:400 .85em 'JetBrains Mono',ui-monospace,monospace;color:var(--ink-mutedb)}

/* Two-column comparison — one panel, centre divider, equal weight, tint only */
.mcp-vs{display:grid;grid-template-columns:1fr 1fr;margin-top:40px;border:1px solid var(--border-a);border-radius:20px;overflow:hidden;background:var(--canvas);box-shadow:var(--shadow-md-g)}
.mcp-col{padding:32px}
.mcp-col--sep{border-right:1px solid var(--border-a)}
.mcp-col--one{background:var(--mint-50)}
.mcp-col-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.mcp-col h3{margin:0;font:600 19px/1.3 var(--font-display);letter-spacing:-.014em;color:var(--ink-a)}
.mcp-chip{flex:none;padding:5px 11px;border-radius:999px;border:1px solid var(--border-a);background:var(--surface);font:500 11px/1.4 'JetBrains Mono',ui-monospace,monospace;color:var(--ink-mutedb);white-space:nowrap}
.mcp-chip--on{background:var(--mint-200);border-color:var(--mint-200);color:var(--green-800b)}
.mcp-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.mcp-col li{position:relative;padding-left:20px;font:400 15.5px/1.55 var(--font-body);color:var(--ink-mutedb);text-wrap:pretty}
.mcp-col li::before{content:"";position:absolute;left:0;top:.58em;width:6px;height:6px;border-radius:999px;background:var(--mint-200)}
.mcp-col--one li::before{background:var(--green-500b)}
.pp-motion .mcp-col li{opacity:0;transform:translateY(8px);transition:opacity .35s cubic-bezier(.25,.46,.45,.94) calc(var(--i,0)*60ms + var(--cd,0ms)),transform .35s cubic-bezier(.25,.46,.45,.94) calc(var(--i,0)*60ms + var(--cd,0ms))}
.pp-motion .mcp-vs .mcp-col.is-in li{opacity:1;transform:none}

/* Prompt list — sentences, not cards */
.mcp-prompts{list-style:none;margin:38px 0 0;padding:0;border-top:1px solid var(--border-a)}
.mcp-prompt{position:relative;display:flex;align-items:baseline;gap:14px;padding:17px 14px;border-bottom:1px solid var(--border-a);font:400 17px/1.55 var(--font-body);color:var(--ink-a);font-style:italic;text-wrap:pretty;transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.mcp-prompt::after{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--green-500b);opacity:0;transition:opacity .22s cubic-bezier(.2,.7,.2,1)}
.mcp-prompt:hover{transform:translateX(3px)}
.mcp-prompt:hover::after{opacity:1}
.mcp-prompt i{flex:none;font:400 11px/1.9 'JetBrains Mono',ui-monospace,monospace;font-style:normal;letter-spacing:.14em;color:var(--green-700b)}
.mcp-close-line{margin:26px 0 0;font:500 17px/1.5 var(--font-body);color:var(--ink-a)}

/* Install section */
.mcp-meta{display:flex;flex-wrap:wrap;gap:14px 40px;margin:28px 0 0;padding:0}
.mcp-meta div{display:flex;align-items:baseline;gap:10px}
.mcp-meta dt{font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--green-700b)}
.mcp-meta dd{margin:0;font:500 14.5px/1.5 var(--font-body);color:var(--ink-a)}
.mcp-verify{margin:24px 0 0;font:400 15.5px/1.6 var(--font-body);color:var(--ink-mutedb)}
.mcp-verify em{color:var(--ink-a)}

/* Tools table */
.mcp-scroll{overflow-x:auto;margin-top:38px}
.mcp-tools{width:100%;min-width:640px;border-collapse:collapse}
.mcp-tools th{width:230px;padding:20px 24px 20px 0;vertical-align:top;text-align:left;font:600 15px/1.45 var(--font-body);color:var(--ink-a)}
.mcp-tools td{padding:16px 0;vertical-align:top}
.mcp-tools tr{border-bottom:1px solid var(--border-a);transition:background-color .14s ease-out}
.mcp-tools tr:first-child{border-top:1px solid var(--border-a)}
.mcp-tools tr:hover{background:var(--mint-50)}
.mcp-tool{display:inline-block;margin:3px 8px 3px 0;padding:4px 9px;border-radius:8px;background:var(--surface);border:1px solid var(--border-a);font:400 13px/1.5 'JetBrains Mono',ui-monospace,monospace;color:var(--ink-a);transition:color .14s ease-out,border-color .14s ease-out}
.mcp-tools tr:hover .mcp-tool{color:var(--green-700b);border-color:var(--mint-200)}
.pp-motion .mcp-tools tr{opacity:0;transition:opacity .35s cubic-bezier(.25,.46,.45,.94) calc(var(--i,0)*80ms)}
.pp-motion .is-in .mcp-tools tr{opacity:1}

/* Permissions — plain by design */
.mcp-sec-list{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;max-width:64ch}
.mcp-sec-list li{position:relative;padding-left:19px;font:400 16.5px/1.6 var(--font-body);color:var(--ink-a);text-wrap:pretty}
.mcp-sec-list li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:999px;background:var(--green-500b)}
.pp-motion .mcp-sec-list li{opacity:0;transform:translateY(8px);transition:opacity .35s cubic-bezier(.25,.46,.45,.94) calc(var(--i,0)*90ms),transform .35s cubic-bezier(.25,.46,.45,.94) calc(var(--i,0)*90ms)}
.pp-motion .mcp-sec-list.is-in li{opacity:1;transform:none}

/* Early-access form */
#early-access{scroll-margin-top:80px}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr!important}}
.mcp-form{display:flex;gap:10px;margin-top:30px;max-width:460px}
.mcp-field{flex:1;min-width:0;height:50px;padding:0 20px;border:1px solid var(--border-a);border-radius:12px;background:var(--surface);font:400 15px/1 var(--font-body);color:var(--ink-a);transition:border-color .14s ease-out,box-shadow .14s ease-out}
.mcp-field::placeholder{color:var(--ink-mutedb)}
.mcp-field:focus{outline:none;border-color:var(--green-500b);box-shadow:0 0 0 3px rgba(20,147,101,.22)}
.mcp-field[aria-invalid="true"]{border-color:var(--coral-600,#B4472E)}
.mcp-err{margin:10px 0 0;font:400 13.5px/1.5 var(--font-body);color:var(--coral-700,#943A26)}
.mcp-ok{display:flex;align-items:center;gap:10px;margin:30px 0 0;font:500 16px/1.5 var(--font-body);color:var(--green-800b)}
.mcp-anx{margin:16px 0 0;font:400 13.5px/1.5 var(--font-body);color:var(--ink-mutedb)}

@media(max-width:1000px){.mcp-hero-grid{grid-template-columns:1fr;gap:44px}}
@media(max-width:820px){.mcp-vs{grid-template-columns:1fr}.mcp-col--sep{border-right:0;border-bottom:1px solid var(--border-a)}}
@media(max-width:720px){
 .mcpo-t{width:42px;height:42px;border-radius:13px;font-size:10.5px}
 .mcpo-n small{font-size:9.5px}
 .mcpo-hub{padding:14px 18px 12px;gap:6px}
 .mcpo-g{width:38px;height:38px;border-radius:12px}
 .mcp-form{flex-direction:column}.mcp-form .pp-cta{justify-content:center}
 .mcp-prompt{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
 .mcp-dot{animation:none}
 .swi{transform:none;animation:none}
 .mcpo-l{animation:none;stroke-dasharray:none;opacity:.3}
 .mcpo-pulse{display:none}
 .mcpo-ring{animation:none}
 .mcpo-t::after{animation:none;opacity:1}
 .mcpo-n{animation:none;opacity:1}
 .mcp-prompt,.mcp-prompt::after,.mcp-tools tr,.mcp-tool,.mcp-field{transition:none}
 .pp-motion .mcp-col li,.pp-motion .mcp-tools tr,.pp-motion .mcp-sec-list li{opacity:1;transform:none;transition:none}
}