/* /platform/mcp — one server, access by family. Scoped to .mcpp. */

.mcpp .sec-pill{margin-bottom:var(--sp-3)}
.mcpp-hero{background:linear-gradient(155deg,#0e1633 0%,#2a1c57 55%,#5b2b63 100%);color:#fff;
  padding:clamp(48px,7vw,96px) 0 var(--sp-10)}
.mcpp-hero .sec-pill{background:rgba(255,255,255,.12);color:#fff}
.mcpp-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:900px){.mcpp-hero__grid{grid-template-columns:1fr}}
.mcpp-hero h1{color:#fff;margin:0 0 var(--sp-4);max-width:16ch}
.mcpp-hero__lede{color:rgba(255,255,255,.8);font-size:var(--step-1);max-width:54ch;margin:0}
.mcpp-hero__cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
.mcpp-btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.mcpp-clients{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-6) 0 0}
.mcpp-clients span{font-size:var(--step--1);padding:4px 12px;border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.85)}
.mcpp pre{margin:0;padding:var(--sp-4) var(--sp-5);font-family:var(--font-mono);font-size:var(--step--1);
  line-height:1.6;color:#182230;background:#fbfbfc;overflow-x:auto;white-space:pre}
.mcpp-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);margin-top:var(--sp-10);
  padding-top:var(--sp-6);border-top:1px solid rgba(255,255,255,.18)}
@media(max-width:700px){.mcpp-facts{grid-template-columns:1fr 1fr}}
.mcpp-facts b{display:block;font-family:var(--font-display);font-size:clamp(28px,3.4vw,40px);color:#fff;line-height:1.1}
.mcpp-facts span{font-size:var(--step--1);color:rgba(255,255,255,.7)}

.mcpp-h2{margin:0 0 var(--sp-6)}
.mcpp-h2--light{color:#fff}
.mcpp-head{max-width:62ch;margin-bottom:var(--sp-8)}
.mcpp-head h2{margin:0 0 var(--sp-3)}
.mcpp-head p{color:var(--text-soft);font-size:var(--step-1);margin:0}

.mcpp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.mcpp-steps--3{grid-template-columns:repeat(3,1fr);margin-bottom:var(--sp-8)}
@media(max-width:900px){.mcpp-steps,.mcpp-steps--3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mcpp-steps,.mcpp-steps--3{grid-template-columns:1fr}}
.mcpp-steps li{background:var(--surface);border:var(--border) solid var(--line);border-radius:var(--radius);padding:var(--sp-5)}
.mcpp-steps__n{display:block;font-family:var(--font-display);font-size:var(--step-2);color:var(--action);margin-bottom:var(--sp-2)}
.mcpp-steps b{display:block;color:var(--text-heading);margin-bottom:var(--sp-1)}
.mcpp-steps p{margin:0;color:var(--text-soft);font-size:var(--step--1)}

.mcpp .section--tint{background:var(--surface-tint)}
.mcpp-fams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
@media(max-width:1000px){.mcpp-fams{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.mcpp-fams{grid-template-columns:1fr}}
.mcpp-fam{background:var(--surface);border:var(--border) solid var(--line);border-top:3px solid var(--brand-600);
  border-radius:var(--radius);padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2)}
.mcpp-fam__tag{font-size:var(--step--2);font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--action)}
.mcpp-fam h3{margin:0;font-size:var(--step-2);color:var(--text-heading)}
.mcpp-fam p{margin:0;color:var(--text-soft);font-size:var(--step--1)}
.mcpp-fam--cta{background:var(--brand-900);border-color:var(--brand-900);border-top-color:var(--action);justify-content:center;gap:var(--sp-3)}
.mcpp-fam--cta h3{color:#fff}
.mcpp-fam--cta p{color:rgba(255,255,255,.75)}
.mcpp-fam--cta .btn{align-self:flex-start}

.mcpp-connect{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
@media(max-width:900px){.mcpp-connect{grid-template-columns:1fr}}
.mcpp-clientlist{display:grid;gap:var(--sp-3)}
.mcpp-clientlist div{border-left:2px solid var(--action);padding-left:var(--sp-4)}
.mcpp-clientlist b{color:var(--text-heading)}
.mcpp-clientlist p{margin:2px 0 0;color:var(--text-soft);font-size:var(--step--1)}
.mcpp-note{margin:var(--sp-3) 0 0;color:var(--text-soft);font-size:var(--step--1)}
.mcpp-tips{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-8)}
@media(max-width:800px){.mcpp-tips{grid-template-columns:1fr}}
.mcpp-tips div{background:var(--surface-tint);border-radius:var(--radius);padding:var(--sp-4) var(--sp-5)}
.mcpp-tips b{color:var(--text-heading)}
.mcpp-tips p{margin:var(--sp-1) 0 0;color:var(--text-soft);font-size:var(--step--1)}

.mcpp-trust{background:var(--brand-900);color:#fff}
.mcpp-trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
@media(max-width:900px){.mcpp-trust__grid{grid-template-columns:1fr 1fr}}
.mcpp-trust__grid div{border-top:2px solid var(--action);padding-top:var(--sp-3)}
.mcpp-trust__grid b{color:#fff}
.mcpp-trust__grid p{margin:var(--sp-1) 0 0;color:rgba(255,255,255,.72);font-size:var(--step--1)}
.mcpp-bench{margin-top:var(--sp-8);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--sp-6);
  align-items:center;padding:var(--sp-6);border-radius:var(--radius-lg);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14)}
@media(max-width:800px){.mcpp-bench{grid-template-columns:1fr}}
.mcpp-bench h3{color:#fff;margin:0 0 var(--sp-2)}
.mcpp-bench p{margin:0;color:rgba(255,255,255,.75)}
.mcpp-bench__stats{display:flex;gap:var(--sp-6)}
.mcpp-bench__stats b{display:block;font-family:var(--font-display);font-size:clamp(28px,3.6vw,44px);color:var(--act-300);line-height:1.1}
.mcpp-bench__stats span{font-size:var(--step--1);color:rgba(255,255,255,.7)}

.mcpp-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;
  padding:var(--sp-8);border-radius:var(--radius-lg);background:var(--brand-900);color:#fff;border-top:3px solid var(--action)}
.mcpp-cta h2{color:#fff;margin:0 0 var(--sp-2)}
.mcpp-cta p{color:rgba(255,255,255,.78);margin:0;max-width:52ch}
.mcpp-cta__btns{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.mcpp-cta .btn:not(.btn--action){color:#fff;border-color:rgba(255,255,255,.4)}

/* section pill (defined in landing.css, which this page doesn't load) */
.mcpp .sec-pill{display:inline-block;background:rgba(109,92,231,.1);color:var(--brand-700);
  padding:var(--sp-2) var(--sp-5);border-radius:20px;font-size:var(--step--1);font-weight:650;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:var(--sp-4)}
.mcpp-hero .sec-pill{background:rgba(255,255,255,.12);color:#fff}