/* MCP-led product page (templates/pages/mcp.html). Self-contained — defines the
   hero bits it needs so it doesn't lean on home.css. */


/* hero */
.api-hero { padding-top: clamp(1.5rem, 4vh, 3rem); }
.api-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.api-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); margin-top: 1.1rem; }
.api-lede { color: var(--ink-60); font-size: 1.12rem; margin-top: 1rem; max-width: 35rem; }
.api-note { color: var(--ink-40); font-size: .85rem; margin-top: 1.1rem; }
.api-note a { color: var(--blue); }

/* code cards (dark) */
.api-code { background: var(--navy); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.api-code-head { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.api-dot { width: .7rem; height: .7rem; border-radius: 50%; background: rgba(255,255,255,.2); }
.api-dot.r { background: #ff5f57; } .api-dot.y { background: #febc2e; } .api-dot.g { background: #28c840; }
.api-code-title { font-family: var(--jbmono); font-size: .74rem; color: rgba(255,255,255,.6); margin-left: .4rem; }
.api-code pre { margin: 0; padding: 1.1rem 1.2rem; overflow-x: auto; }
.api-code code { font-family: var(--jbmono); font-size: .76rem; line-height: 1.6; color: #cdd6e6; white-space: pre; }
.c-fn { color: #7fd1b9; } .c-st { color: #9dc0ff; } .c-k { color: #c9a9f5; } .c-nm { color: #f0b67f; }

/* hero chat under the config */
.api-chat { border-top: 1px solid rgba(255,255,255,.1); padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.api-q { align-self: flex-start; background: rgba(255,255,255,.08); color: #e7edf6; border-radius: 10px 10px 10px 2px; padding: .6rem .8rem; font-size: .85rem; max-width: 92%; }
.api-a { align-self: flex-end; background: var(--blue); color: #fff; border-radius: 10px 10px 2px 10px; padding: .6rem .8rem; font-size: .85rem; max-width: 92%; }

/* why super-rag */
.api-why-sec { background: var(--bg-soft); }
.api-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.api-whyc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem 1.5rem; }
.api-whyc h3 { font-size: 1.05rem; }
.api-whyc p { font-size: .88rem; color: var(--ink-60); margin-top: .45rem; line-height: 1.5; }
@media (max-width: 64rem) { .api-why { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .api-why { grid-template-columns: 1fr; } }

/* how it works steps */

/* tools your agent gets */
.api-tools { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.api-tools-label { grid-column: 1 / -1; font-family: var(--jbmono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-40); }
.api-tool { display: flex; align-items: baseline; gap: .8rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: .7rem .95rem; }
.api-tool code { font-family: var(--jbmono); font-size: .85rem; color: var(--blue-deep); }
.api-tool span { font-size: .84rem; color: var(--ink-60); }
.api-tool.soon { opacity: .85; }
.api-xlayer { margin-top: 1.1rem; background: var(--blue-tint); border: 1px solid rgba(21,101,232,.2); border-radius: var(--radius); padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.api-xlayer-q { font-weight: 600; color: var(--ink); }
.api-xlayer-a { font-size: .88rem; color: var(--ink-60); }
.api-xlayer-a code { font-family: var(--jbmono); font-size: .82em; color: var(--blue-deep); }
.api-with { margin-top: 1.6rem; text-align: center; color: var(--ink-60); font-size: .95rem; }
.api-with b { color: var(--ink); }
@media (max-width: 48rem) { .api-tools { grid-template-columns: 1fr; } }

/* REST API (secondary) */
.api-api-sec { background: var(--bg-soft); }
.api-api-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; margin-bottom: 1.4rem; }
.api-eps { display: flex; flex-direction: column; gap: .55rem; }
.api-ep { display: flex; align-items: center; gap: .8rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .75rem 1rem; }
.api-m { font-family: var(--jbmono); font-size: .62rem; font-weight: 700; letter-spacing: .04em; padding: .25rem .5rem; border-radius: 6px; flex: none; }
.api-m.get { color: var(--green); background: var(--green-tint); }
.api-m.post { color: var(--blue-deep); background: var(--blue-tint); }
.api-ep code { font-family: var(--jbmono); font-size: .82rem; color: var(--ink); }
.api-ep span { font-size: .82rem; color: var(--ink-60); margin-left: auto; text-align: right; }
@media (max-width: 56rem) { .api-api-grid { grid-template-columns: 1fr; } }

/* api infra features */
.api-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.api-feat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.3rem; }
.api-feat h3 { font-size: 1rem; }
.api-feat p { font-size: .87rem; color: var(--ink-60); margin-top: .4rem; line-height: 1.5; }
@media (max-width: 56rem) { .api-feats { grid-template-columns: 1fr; } }