body#docsMcpBody {
    overflow-x: hidden;
}
body#docsMcpBody .appWrapper {
    padding-top: 0;
}

#docsMcp {
    --bls-red:        #E82535;
    --bls-red-2:      #ff3b4a;
    --text:           #0b0b0d;
    --text-soft:      #4b4b53;
    --text-muted:     #80808a;
    --bg:             #ffffff;
    --bg-soft:        #f6f6f8;
    --bg-panel:       #ffffff;
    --bg-deep:        #f1f1f4;
    --border:         #ececef;
    --border-strong:  #d8d8dc;
    --code-bg:        #0b0d10;
    --code-text:      #e9e9ed;
    --shadow-sm:      0 1px 2px rgba(0,0,0,0.05);
    --shadow-md:      0 18px 48px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
    --shadow-lg:      0 40px 80px rgba(0,0,0,0.14), 0 12px 32px rgba(0,0,0,0.08);
    --radius:         16px;
    --radius-sm:      10px;

    /* "Bankless" fonts only outside the mockup interfaces. */
    --display:        'Marlide Display', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    --sans:           'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Mono is system-only outside mockups. Mockups override with --mono-interface. */
    --mono:           ui-monospace, SFMono-Regular, Menlo, monospace;
    --mono-interface: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    color: var(--text);
    background: var(--bg);
    font-family: var(--sans);
    line-height: 1.55;
    /* IMPORTANT: do NOT put overflow-x: hidden here. It clips the
     * full-bleed sections that break out via width:100vw. Horizontal
     * overflow is clipped on body#docsMcpBody instead. */
}

#docsMcp.isDark {
    --text:           #f3f3f5;
    --text-soft:      #b1b1ba;
    --text-muted:     #707079;
    --bg:             #08080a;
    --bg-soft:        #111114;
    --bg-panel:       #131317;
    --bg-deep:        #1a1a1f;
    --border:         #22222a;
    --border-strong:  #2e2e37;
    --code-bg:        #06060a;
    --code-text:      #e9e9ed;
    --shadow-sm:      0 1px 2px rgba(0,0,0,0.6);
    --shadow-md:      0 24px 64px rgba(0,0,0,0.6);
    --shadow-lg:      0 60px 120px rgba(0,0,0,0.7);
}

#docsMcp .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
}

#docsMcp section {
    padding: 112px 0;
    border-top: 1px solid var(--border);
    /* Break out of the (now still constrained) .appWrapper so each
     * section paints the full viewport width. */
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}
#docsMcp section:first-of-type { border-top: 0; }

#docsMcp h1, #docsMcp h2 {
    font-family: var(--display);
    color: var(--text);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    line-height: 1.02;
}
#docsMcp h3 {
    font-family: var(--sans);
    color: var(--text);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
    font-size: 19px;
}

#docsMcp h1 { font-size: clamp(46px, 6vw, 84px); }
#docsMcp h2 { font-size: clamp(32px, 3.6vw, 52px); }

#docsMcp p {
    color: var(--text-soft);
    font-size: 16.5px;
    margin: 0 0 16px;
}

#docsMcp ul, #docsMcp ol {
    color: var(--text-soft);
    font-size: 15.5px;
    margin: 0 0 16px;
    padding-left: 22px;
}
#docsMcp li { margin-bottom: 4px; }

#docsMcp .kicker {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--bls-red);
    margin-bottom: 22px;
    font-family: var(--sans);
}

#docsMcp .sectionHead {
    max-width: 820px;
    margin-bottom: 64px;
}
#docsMcp .sectionHead h2 { margin-bottom: 0; }

/* Body-text links (inline anchors inside paragraphs, list items, captions)
 * get a subtle underline on hover. Pills and buttons have their own
 * border treatment so they are intentionally NOT in this rule. */
#docsMcp p a,
#docsMcp li a,
#docsMcp .signInLink a,
#docsMcp .tabNote a,
#docsMcp .vignetteCaption a {
    color: var(--bls-red);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s;
}
#docsMcp p a:hover,
#docsMcp li a:hover,
#docsMcp .signInLink a:hover,
#docsMcp .tabNote a:hover,
#docsMcp .vignetteCaption a:hover { border-bottom-color: var(--bls-red); }

#docsMcp code {
    font-family: var(--mono);
    font-size: 0.86em;
    background: var(--bg-soft);
    padding: 2px 6px;
    border-radius: 5px;
    border: 1px solid var(--border);
    color: var(--text);
}

#docsMcp pre {
    margin: 0;
    background: var(--code-bg);
    border-radius: var(--radius-sm);
    overflow: auto;
}
#docsMcp pre code {
    display: block;
    padding: 18px 20px;
    background: transparent;
    border: 0;
    color: var(--code-text);
    font-size: 13px;
    line-height: 1.65;
    border-radius: 0;
    font-family: var(--mono-interface);
}

/* ============ HERO ============ */
#docsMcp .hero {
    padding: 152px 0 120px;
    border-top: 0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 80% at 0% 0%, rgba(232, 37, 53, 0.10), transparent 60%),
        radial-gradient(ellipse 50% 60% at 100% 30%, rgba(232, 37, 53, 0.05), transparent 65%),
        var(--bg);
}
#docsMcp.isDark .hero {
    background:
        radial-gradient(ellipse 60% 80% at 0% 0%, rgba(232, 37, 53, 0.18), transparent 60%),
        radial-gradient(ellipse 50% 60% at 100% 30%, rgba(232, 37, 53, 0.10), transparent 65%),
        var(--bg);
}
#docsMcp .heroGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
#docsMcp .heroLeft {
    min-width: 0;
}

#docsMcp .hero h1 {
    margin-bottom: 24px;
    max-width: 660px;
}

/* Rotating word in hero */
#docsMcp .rotator {
    position: relative;
    display: inline-block;
    color: var(--bls-red);
    /* widest of the words sets the slot; words are absolutely positioned */
    min-width: 4ch;
    vertical-align: baseline;
}
#docsMcp .rotator .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.18em);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
#docsMcp .rotator .word:not(:first-child) {
    position: absolute;
    left: 0;
    top: 0;
}
#docsMcp .rotator .word.current {
    opacity: 1;
    transform: translateY(0);
}
#docsMcp .rotator .word.leaving {
    opacity: 0;
    transform: translateY(-0.18em);
}
#docsMcp .hero h1 .period {
    color: var(--text);
}

#docsMcp .hero .lede {
    font-size: clamp(17px, 1.4vw, 20px);
    color: var(--text-soft);
    max-width: 540px;
    margin: 0 0 36px;
    line-height: 1.5;
}
#docsMcp .hero .cta {
    display: flex;
    gap: 14px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}
#docsMcp .heroMeta {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    align-items: center;
}
#docsMcp .heroMeta span,
#docsMcp .heroMeta .githubLink {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
#docsMcp .heroMeta .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bls-red);
    display: inline-block;
}
#docsMcp .heroMeta .githubLink {
    color: var(--text);
    font-weight: 600;
    padding: 8px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    transition: background 0.15s, border-color 0.15s;
}
#docsMcp .heroMeta .githubLink:hover {
    background: var(--bg-soft);
    border-color: var(--text-soft);
}

#docsMcp .signInLink {
    margin: -22px 0 32px;
    font-size: 14px;
    color: var(--text-muted);
}
#docsMcp .signInLink a {
    color: var(--text);
    font-weight: 600;
    border-bottom: 1px solid var(--border-strong);
}
#docsMcp .signInLink a:hover {
    border-bottom-color: var(--bls-red);
    color: var(--bls-red);
}

/* Right column hero chat */
#docsMcp .heroRight {
    min-width: 0;
    position: relative;
}
#docsMcp .heroChat {
    box-shadow: var(--shadow-lg);
    border-radius: 18px;
}
#docsMcp .heroChat .windowChrome {
    padding: 13px 18px;
    background: #fafafa;
}
#docsMcp.isDark .heroChat .windowChrome { background: #1a1a1f; }
#docsMcp .heroChat .windowTitle {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
}
#docsMcp.isDark .heroChat .windowTitle { color: #d8d8de; }

/* ============ BUTTONS ============ */
#docsMcp .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14.5px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s, background 0.15s, color 0.15s;
    text-decoration: none;
    font-family: inherit;
}
#docsMcp .btnLarge { padding: 16px 30px; font-size: 16px; }
#docsMcp .btnPrimary {
    background: var(--bls-red);
    color: #fff;
    box-shadow: 0 10px 28px rgba(232, 37, 53, 0.28);
}
#docsMcp .btnPrimary:hover {
    background: var(--bls-red-2);
    transform: translateY(-1px);
}
#docsMcp .btnGhost {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}
#docsMcp .btnGhost:hover { background: var(--bg-soft); }

/* ============ CAPABILITIES (compact 4-column inline) ============ */
#docsMcp .capabilities { padding: 80px 0; }
#docsMcp .capGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    border-top: 1px solid var(--border);
    padding-top: 48px;
}
#docsMcp .capCard {
    display: flex;
    flex-direction: column;
}
#docsMcp .capCard .num {
    font-family: var(--mono-interface);
    font-size: 12px;
    font-weight: 500;
    color: var(--bls-red);
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}
#docsMcp .capCard h3 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
}
#docsMcp .capCard p {
    font-size: 14.5px;
    color: var(--text-soft);
    line-height: 1.5;
    margin: 0 0 22px;
    flex: 1; /* push tool pills to the bottom so all four cards align */
}
#docsMcp .capCard .tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#docsMcp .capCard .tools span {
    font-family: var(--mono-interface);
    font-size: 11.5px;
    color: var(--text-muted);
    background: transparent;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
}

/* ============ VIGNETTES ============ */
#docsMcp .vignettes {
    background: var(--bg-soft);
}

#docsMcp .vignetteRow {
    display: grid;
    grid-template-columns: 0.85fr 1.4fr;
    gap: 64px;
    align-items: center;
    margin-bottom: 96px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
#docsMcp .vignetteRow.revealed,
#docsMcp .vignetteRow:not(.reveal) {
    opacity: 1;
    transform: translateY(0);
}
#docsMcp .vignetteRow:last-child { margin-bottom: 0; }
#docsMcp .vignetteRow.reverse { grid-template-columns: 1.4fr 0.85fr; }
#docsMcp .vignetteRow.reverse .vignetteCaption { order: 2; }
#docsMcp .vignetteRow.reverse .vignette { order: 1; }

#docsMcp .vignetteCaption .num {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--bls-red);
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}
#docsMcp .vignetteCaption h3 {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.05;
    margin-bottom: 16px;
    letter-spacing: -0.015em;
}
#docsMcp .vignetteCaption p {
    font-size: 16px;
    color: var(--text-soft);
    margin: 0;
    max-width: 360px;
}

#docsMcp .vignette {
    border-radius: var(--radius);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* window chrome */
#docsMcp .windowChrome {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #f1f1f3;
    border-bottom: 1px solid var(--border);
}
#docsMcp.isDark .windowChrome { background: #1d1d22; border-bottom-color: #28282f; }
#docsMcp .windowChrome.dark {
    background: #1a1a1d;
    color: #ddd;
    border-bottom-color: #28282f;
}
#docsMcp .windowChrome .dots {
    display: flex;
    gap: 7px;
    margin-right: 14px;
}
#docsMcp .windowChrome .dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d8d8dc;
}
#docsMcp .windowChrome .dots span:nth-child(1) { background: #ff5f57; }
#docsMcp .windowChrome .dots span:nth-child(2) { background: #febc2e; }
#docsMcp .windowChrome .dots span:nth-child(3) { background: #28c840; }
#docsMcp .windowChrome .windowTitle {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
    font-family: var(--mono-interface);
}
#docsMcp .windowChrome.dark .windowTitle { color: #a3a3aa; }

/* Claude Desktop chat */
#docsMcp .claudeDesktop .chat {
    padding: 32px 28px 36px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: var(--bg-panel);
    min-height: 560px;
    transition: opacity 0.35s ease;
}
#docsMcp .claudeDesktop .chat.fading {
    opacity: 0;
}
#docsMcp .bubble {
    padding: 14px 18px;
    border-radius: 18px;
    max-width: 86%;
    font-size: 14.5px;
    line-height: 1.55;
}
/* User bubble: dark slate, not red. Less visually heavy + closer to real chat UIs. */
#docsMcp .bubble.user {
    align-self: flex-end;
    background: #1d1d22;
    color: #f4f4f6;
    border-bottom-right-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
#docsMcp.isDark .bubble.user {
    background: #2a2a30;
}
#docsMcp .bubble.assistant {
    align-self: flex-start;
    background: transparent;
    color: var(--text);
    border: 0;
    padding: 4px 0;
    max-width: 100%;
}

/* Chat animation: each step starts hidden, becomes visible in JS order */
#docsMcp [data-chat-anim] [data-step] {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
#docsMcp [data-chat-anim] [data-step].visible {
    opacity: 1;
    transform: translateY(0);
}
#docsMcp .toolCall.step3,
#docsMcp .assistantBody.step4 {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
#docsMcp .toolCall.step3.visible,
#docsMcp .assistantBody.step4.visible {
    opacity: 1;
    transform: translateY(0);
}

#docsMcp .toolCall {
    background: #faf9f7;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    font-size: 13px;
    font-family: var(--sans);
}
#docsMcp.isDark .toolCall {
    background: #15151a;
    border-color: #25252c;
    color: #d6d6dc;
}
#docsMcp .toolHeader {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-soft);
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 12.5px;
}
#docsMcp .toolIcon {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bls-red);
}
#docsMcp .toolHeader code {
    background: var(--text);
    color: var(--bg);
    border: 0;
    padding: 2px 8px;
    font-family: var(--mono-interface);
    font-size: 11.5px;
    border-radius: 5px;
}
#docsMcp.isDark .toolHeader code {
    background: #f3f3f5;
    color: #0b0b0d;
}
#docsMcp .toolCall pre.toolArgs {
    background: #0e0f12;
    border-radius: 8px;
    margin: 0;
}
#docsMcp .toolCall pre.toolArgs code {
    padding: 11px 14px;
    font-size: 12px;
    color: #e8e6df;
    font-family: var(--mono-interface);
    line-height: 1.55;
}
#docsMcp .toolStatus {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 11.5px;
    margin-top: 10px;
    font-family: var(--mono-interface);
}
#docsMcp .toolStatus .dotGreen {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #28c840;
    box-shadow: 0 0 0 3px rgba(40, 200, 64, 0.12);
}
#docsMcp .assistantBody { padding: 6px 2px 2px; }
#docsMcp .assistantBody p {
    color: var(--text);
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.55;
}
#docsMcp .assistantBody ul {
    padding-left: 22px;
    margin: 0;
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.55;
}
#docsMcp .assistantBody li { margin-bottom: 6px; }

/* Cursor */
#docsMcp .cursorIDE { color: #f5f5f5; }
#docsMcp .cursorBody {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    background: #0e0e10;
    min-height: 280px;
}
#docsMcp .cursorBody .editor {
    padding: 18px;
    border-right: 1px solid #232328;
    overflow: auto;
    font-family: var(--mono-interface);
}
#docsMcp .cursorBody .editor pre,
#docsMcp .cursorBody .editor pre code {
    background: transparent;
    font-size: 12.5px;
    color: #d4d4d4;
    font-family: var(--mono-interface);
}
#docsMcp .cursorBody .sidebar {
    padding: 20px 18px;
    background: #131316;
    color: #ddd;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}
#docsMcp .cursorBody .sidebarTitle {
    color: #8d8d96;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    font-family: var(--sans);
}
#docsMcp .cursorBody .bubble.small { font-size: 13px; padding: 11px 13px; max-width: 100%; }
#docsMcp .cursorBody .bubble.small p { font-size: 13px; color: #e4e4ea; }
#docsMcp .cursorBody .bubble.user {
    background: #2b1a1d;
    color: #fff;
    border: 1px solid #3d1f23;
}
#docsMcp .cursorBody .bubble.assistant {
    background: #1c1c20;
    color: #e4e4ea;
    border: 1px solid #2a2a30;
}

/* Terminal */
#docsMcp .terminal .terminalBody {
    background: #0c0c0e;
    color: #d4d4d4;
    font-family: var(--mono-interface);
    font-size: 12.8px;
    padding: 22px 24px;
    line-height: 1.7;
}
#docsMcp .terminal .line { white-space: pre-wrap; word-break: break-word; }
#docsMcp .terminal .line.indent { padding-left: 14px; }
#docsMcp .terminal .line.indent2 { padding-left: 28px; }
#docsMcp .terminal .line.indent3 { padding-left: 42px; }
#docsMcp .terminal .line.indent4 { padding-left: 56px; }
#docsMcp .terminal .line.blank { line-height: 1; }
#docsMcp .terminal .prompt { color: #28c840; margin-right: 6px; }
#docsMcp .terminal .cmd    { color: #f1f1f3; }
#docsMcp .terminal .out    { color: #c1c1cc; }
#docsMcp .terminal .json-key    { color: #87b7ff; }
#docsMcp .terminal .json-string { color: #e5b275; }
#docsMcp .terminal .json-number { color: #b8e986; }
#docsMcp .terminal .json-bool   { color: #ff6e9c; }
#docsMcp .terminal .json-punc   { color: #f5f5f7; }

/* ============ WIRE IT UP ============ */
#docsMcp .wireup .steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
    margin-bottom: 64px;
}
#docsMcp .wireup .step {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    display: flex;
    flex-direction: column;
}
#docsMcp .wireup .stepNum {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--bls-red);
    margin-bottom: 18px;
}
#docsMcp .wireup .step h3 {
    font-family: var(--display);
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 14px;
    line-height: 1.05;
    letter-spacing: -0.01em;
}
#docsMcp .wireup .step p {
    font-size: 14.5px;
    margin: 0;
    flex: 1;
}
#docsMcp .wireup .step em {
    color: var(--text);
    font-style: italic;
}

#docsMcp .wireup .tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin: 4px 0 18px;
    position: relative;
}
#docsMcp .wireup .tab {
    position: relative;
    background: transparent;
    border: 0;
    padding: 12px 4px 14px;
    margin: 0 26px 0 0;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: color 0.15s;
}
/* Red underline rendered as a pseudo-element so it sits on top of the
 * tabs container's gray bottom border (specificity-free). */
#docsMcp .wireup .tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--bls-red);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.2s ease;
}
#docsMcp .wireup .tab:hover { color: var(--text); }
#docsMcp .wireup .tab.active { color: var(--text); }
#docsMcp .wireup .tab.active::after { transform: scaleX(1); }
#docsMcp .wireup .tab:focus { outline: none; }
#docsMcp .wireup .tab:focus-visible {
    outline: 2px solid rgba(232, 37, 53, 0.35);
    outline-offset: 4px;
    border-radius: 4px;
}
#docsMcp .wireup .tabBody { display: none; }
#docsMcp .wireup .tabBody.active { display: block; }
/* Breathing room between the descriptive note above a code block and
 * the code block itself. Applies inside tabs AND inside the
 * collapsible <details> alternatives. */
#docsMcp .wireup .tabBody .codeBlock { margin-top: 16px; }
#docsMcp .wireup .tabDetails .codeBlock { margin-top: 12px; }
#docsMcp .wireup .tabBody small {
    display: block;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 12px;
}
#docsMcp .wireup .tabBody small code { font-size: 11.5px; }

#docsMcp .wireup .tabNote {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 14px;
}
#docsMcp .wireup .tabNote:last-child { margin-bottom: 0; }
#docsMcp .wireup .tabNote code { font-size: 11.5px; }
#docsMcp .wireup .tabNote strong { color: var(--text); }

/* Collapsible fallback paths (older builds, OAuth-only UIs, etc.).
 * Keeps the primary path one screen-height while still surfacing the
 * alternatives for anyone who needs them. */
#docsMcp .wireup .tabDetails {
    margin-top: 16px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
#docsMcp .wireup .tabDetails + .tabDetails {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 0;
}
/* Position-based +/- indicator (not flex). display:flex would turn each
 * text node into a separate flex item, which made the summary line
 * wrap into vertical stacks. Absolute positioning lets the summary
 * text wrap naturally as a single inline flow. */
#docsMcp .wireup .tabDetails summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    list-style: none;
    padding: 6px 0 6px 22px;
    position: relative;
    line-height: 1.45;
    transition: color 0.15s;
}
/* Suppress the default disclosure marker in every browser. */
#docsMcp .wireup .tabDetails summary::-webkit-details-marker { display: none; }
#docsMcp .wireup .tabDetails summary::marker { content: ''; }
#docsMcp .wireup .tabDetails summary::before {
    content: '+';
    color: var(--bls-red);
    font-family: var(--mono);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    position: absolute;
    left: 0;
    top: 8px;
}
#docsMcp .wireup .tabDetails[open] summary::before { content: '\2212'; /* unicode minus */ }
#docsMcp .wireup .tabDetails summary:hover { color: var(--text); }
#docsMcp .wireup .tabDetails summary code {
    font-size: 11.5px;
    background: var(--bg-soft);
}
#docsMcp .wireup .tabDetails summary em {
    color: var(--text-soft);
    font-style: italic;
}
#docsMcp .wireup .tabDetails > *:not(summary) { margin-top: 12px; }

#docsMcp .closer {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 18px;
}

/* ============ CODE BLOCKS + COPY ============ */
#docsMcp .codeBlock { position: relative; }
#docsMcp .copyBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.07);
    color: #e6e6e6;
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 5px 11px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    transition: background 0.15s, border-color 0.15s;
}
#docsMcp .copyBtn:hover { background: rgba(255, 255, 255, 0.13); }
#docsMcp .copyBtn.copied {
    background: rgba(40, 200, 64, 0.18);
    border-color: rgba(40, 200, 64, 0.4);
    color: #b6e9b6;
}

/* ============ MOBILE ============ */
@media (max-width: 960px) {
    #docsMcp .container { padding: 0 24px; }
    #docsMcp section { padding: 72px 0; }
    #docsMcp .hero { padding: 112px 0 80px; }
    #docsMcp .heroGrid { grid-template-columns: 1fr; gap: 48px; }
    #docsMcp .heroChat { transform: none; }
    #docsMcp .hero .cta { flex-direction: column; align-items: stretch; }
    #docsMcp .hero .cta .btn { justify-content: center; }
    #docsMcp .heroMeta { gap: 14px; }

    #docsMcp .capGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 28px;
    }
    #docsMcp .capCard p { flex: 0; }

    #docsMcp .vignetteRow,
    #docsMcp .vignetteRow.reverse {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 64px;
    }
    #docsMcp .vignetteRow.reverse .vignetteCaption { order: 1; }
    #docsMcp .vignetteRow.reverse .vignette { order: 2; }
    #docsMcp .vignetteCaption p { max-width: none; }

    #docsMcp .cursorBody { grid-template-columns: 1fr; }
    #docsMcp .cursorBody .editor { border-right: 0; border-bottom: 1px solid #232328; }

    #docsMcp .closer .btn { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
    #docsMcp .capGrid { grid-template-columns: 1fr; }
}