/* Dock MCP: existing Dock tokens, shared illustrations, and assistant tool results. */
.mcp-page { --mx-line:rgba(18,23,34,.1); }
.mcp-page .faq-item .faq-answer,
.mcp-page .faq-item .faq-answer p { font-size:20px; line-height:30px; }
.mcp-page .sp-hero-right { padding:48px 32px; }
.mx-bridge { position:relative; z-index:2; width:100%; max-width:580px; color:var(--ds-ink); font-family:var(--ds-font); }
.mx-assistants { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.mx-assistants > span { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px 6px; background:white; border-radius:16px; box-shadow:0 4px 12px #00358716; }
.mx-assistants img { width:30px; height:30px; object-fit:contain; }
.mx-assistants b { font-size:13px; font-weight:500; }
.mx-connector-line { height:70px; position:relative; display:flex; align-items:center; justify-content:center; }
.mx-connector-line::before { content:''; height:100%; border-left:1px dashed #ffffff80; position:absolute; left:50%; }
.mx-connector-line span { position:relative; background:var(--ds-blue); color:#ffffffd9; font-size:11px; padding:5px 12px; border-radius:100px; }
.mx-connector-line--short { height:36px; }
.mx-hub { background:white; padding:26px; border-radius:18px; box-shadow:0 12px 32px #00358720; }
.mx-hub-heading { display:flex; align-items:center; gap:13px; }
.mx-hub-heading > img { width:36px; height:36px; object-fit:contain; }
.mx-hub h3 { font:500 23px/1.2 var(--ds-font); margin:0; letter-spacing:-.5px; }
.mx-hub p { margin:5px 0 0; color:var(--ds-ink-50); font-size:12px; }
.mx-status { margin-left:auto; font-size:11px; color:#367559; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.mx-status::before { content:''; width:5px; height:5px; border-radius:50%; background:#4b9d73; }
.mx-tools { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.mx-tools > span { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid var(--mx-line); border-radius:100px; font-size:12px; line-height:16px; }
.mx-tools img { width:15px; height:15px; object-fit:contain; }
.mx-tools img[src*='union.svg'] { width:20px; height:13.4px; }
.mx-sources { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mx-sources > span { display:flex; align-items:center; gap:10px; padding:15px 16px; background:#ffffffed; border-radius:9px; font-size:12px; }
.mx-sources img { width:18px; height:18px; object-fit:contain; }
.mx-sources img[src*='union.svg'] { width:21px; height:14px; }
.mx-bridge-note { display:flex; align-items:center; justify-content:center; gap:8px; margin:24px 0 0; font-size:11px; color:#ffffffcf; }
.mx-bridge-note img { width:13px; height:13px; filter:brightness(0) invert(1); }
/* Capability tabs use the same rail, but contain a real changing preview. */
.mcp-page #mcpTabs .sl-tab { border:0; background:transparent; text-align:left; color:var(--ds-ink); font-family:var(--ds-font); width:100%; cursor:pointer; }
.mcp-page #mcpTabs .sl-tab:focus-visible { outline:2px solid var(--ds-blue); outline-offset:-4px; border-radius:8px; }
.mx-demo { position:relative; width:100%; max-width:900px; border:1px solid var(--mx-line); border-radius:14px; background:var(--ds-surface-tint); box-shadow:0 12px 30px #0035871a; overflow:hidden; text-align:left; }
.mx-demo-top { display:flex; align-items:center; gap:16px; height:52px; padding:0 22px; border-bottom:1px solid var(--mx-line); background:white; font-size:13px; }
.mx-demo-top > span { display:flex; align-items:center; gap:8px; }
.mx-demo-top > span:nth-child(2) { margin-left:auto; color:var(--ds-ink-50); font-size:11px; }
.mx-demo-top img { width:18px; height:18px; object-fit:contain; }
.mx-demo-top > img { width:15px; height:15px; opacity:.5; }
.mx-demo-body { max-width:740px; margin:auto; padding:28px 36px 24px; }
.mx-conversation { min-height:360px; }
.mx-conversation[hidden] { display:none; }
.mx-user { margin-left:auto; width:fit-content; max-width:90%; border:1px solid var(--mx-line); background:white; border-radius:16px 16px 4px 16px; padding:13px 17px; font-size:15px; line-height:22px; }
.mx-response { margin-top:26px; }
.mx-assistant-label { display:flex; align-items:center; gap:8px; margin-bottom:16px; font-size:14px; }
.mx-assistant-label img { width:22px; height:22px; object-fit:contain; }
.mx-assistant-label b { font-weight:500; }
.mx-tool { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--ds-ink-50); line-height:18px; }
.mx-tool img { width:16px; height:16px; object-fit:contain; }
.mx-tool img[src*='union.svg'] { width:22px; height:14.7px; }
.mx-tool > img:last-child:not(:first-child) { width:13px; height:13px; margin-left:auto; opacity:.5; }
.mx-tool b { font-weight:500; color:var(--ds-ink); }
.mx-response-content { margin-top:16px; }
.mx-response-content > p { font-size:15px; line-height:23px; margin:0 0 20px; }
.mx-workspace { border:1px solid var(--mx-line); border-radius:10px; overflow:hidden; background:white; padding:18px 22px 24px; }
.mx-workspace-head { display:flex; align-items:center; gap:7px; font-size:12px; }
.mx-workspace-head > img { width:21px; height:21px; }
.mx-workspace-head b { font-weight:500; }
.mx-workspace-head > span { margin-left:auto; font-size:10px; color:var(--ds-ink-50); }
.mx-workspace-tabs { display:flex; gap:22px; margin:20px 0 22px; padding-bottom:10px; border-bottom:1px solid var(--mx-line); font-size:11px; color:var(--ds-ink-50); }
.mx-workspace-tabs span:first-child { color:var(--ds-ink); }
.mx-workspace h3 { margin:0; font:500 25px/32px var(--ds-font); letter-spacing:-.6px; }
.mx-workspace p { font-size:12px; color:var(--ds-ink-50); margin:6px 0 20px; }
.mx-workspace-files { display:flex; gap:18px; }
.mx-workspace-files span { display:flex; gap:6px; align-items:center; font-size:11px; }
.mx-workspace-files img { width:14px; height:14px; }
.mx-result-row { display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--mx-line); }
.mx-result-row > img { width:19px; height:19px; object-fit:contain; flex-shrink:0; }
.mx-result-row > img:last-child { width:14px; height:14px; margin-left:auto; opacity:.45; }
.mx-result-row b { display:block; font-size:14px; line-height:20px; font-weight:500; }
.mx-result-row small { display:block; margin-top:4px; font-size:11px; line-height:16px; color:var(--ds-ink-50); }
.mx-engagement { display:grid; grid-template-columns:repeat(3,1fr); padding:22px; border:1px solid var(--mx-line); border-radius:10px; background:white; margin-bottom:14px; }
.mx-engagement strong { font-size:28px; font-weight:500; letter-spacing:-1px; display:block; }
.mx-engagement span { font-size:11px; color:var(--ds-ink-50); }
.mx-composer { margin-top:24px; padding:15px; border:1px solid #12172226; border-radius:16px; background:white; box-shadow:0 2px 5px #12172205; }
.mx-composer > span { font-size:13px; color:var(--ds-ink-50); }
.mx-composer > div { margin-top:18px; display:flex; align-items:center; gap:12px; }
.mx-composer img { width:17px; height:17px; object-fit:contain; }
.mx-connection { display:flex; align-items:center; gap:6px; font-size:11px; padding:5px 8px; border:1px solid var(--mx-line); border-radius:100px; }
.mx-connection img { width:14px; height:14px; }
.mx-send { display:grid; place-items:center; margin-left:auto; width:28px; height:28px; border-radius:50%; background:var(--ds-ink); }
.mx-send img { filter:brightness(0) invert(1); width:15px; height:15px; }
/* Reusable, restrained result and connection cards complement the shared gallery art. */
.mcp-page .cards-auto.with-chip .ds-card { padding-right:0; }
.mcp-page .il-copy .ds-arrow-chip { display:none; }
.mx-mini { height:340px; display:flex; align-items:center; justify-content:center; padding:32px; width:100%; font-family:var(--ds-font); text-align:left; overflow:hidden; }
.mx-mini-card { width:100%; max-width:410px; background:white; border:1px solid var(--mx-line); border-radius:14px; padding:24px; box-shadow:0 3px 8px #12172204; }
.mx-mini-card h3 { font:500 23px/29px var(--ds-font); letter-spacing:-.5px; margin:20px 0 8px; }
.mx-mini-card > p { font-size:13px; line-height:20px; color:var(--ds-ink-50); margin:16px 0 0; }
.mx-app-pair { display:flex; gap:16px; margin:22px 0; }
.mx-app-pair img { width:32px; height:32px; object-fit:contain; }
.mx-tool-server { display:flex; align-items:center; gap:10px; border-top:1px solid var(--mx-line); border-bottom:1px solid var(--mx-line); padding:18px 0; }
.mx-tool-server img { width:28px; height:28px; object-fit:contain; }
.mx-tool-server b { font-size:14px; font-weight:500; }
.mx-tool-server small { display:block; font-size:10px; color:var(--ds-ink-50); margin-top:4px; }
.mx-permission-user { display:flex; align-items:center; gap:12px; margin:26px 0 8px; }
.mx-permission-user img { width:30px; height:30px; padding:6px; background:var(--ds-surface-tint); border-radius:50%; }
.mx-permission-user b { font-size:15px; font-weight:500; }
.mx-permission-user small { display:block; font-size:11px; color:var(--ds-ink-50); margin-top:5px; }
.mx-private { display:flex; align-items:center; gap:8px; margin-top:20px; font-size:12px; color:var(--ds-ink-50); }
.mx-private img { width:15px; height:15px; }
.mx-key-value { display:flex; justify-content:space-between; gap:10px; padding:15px 0; border-bottom:1px solid var(--mx-line); font-size:13px; }
.mx-key-value span { color:var(--ds-ink-50); }.mx-key-value b { font-weight:500; }
.mx-approval { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; font-size:12px; }
.mx-approval span { padding:8px 14px; border:1px solid var(--mx-line); border-radius:6px; }
.mx-approval span:last-child { background:var(--ds-blue); color:white; border-color:transparent; }
.mcp-page .setup-grid .mx-setup-card { display:flex; flex-direction:column; align-items:flex-start; padding:40px; height:auto; min-height:235px; text-decoration:none; color:var(--ds-ink); }
.mx-setup-card > img { width:36px; height:36px; object-fit:contain; }
.mx-setup-card h3 { font:500 26px/32px var(--ds-font); margin:28px 0 16px; }
.mx-setup-card > span { display:flex; align-items:center; gap:10px; font-size:16px; }
.mx-setup-card span img { width:17px; height:17px; }
.mcp-page #setup { scroll-margin-top:96px; }
@media(max-width:1100px) {
 .mcp-page .tabs-section .ts-fit { grid-template-columns:230px minmax(0,1fr); }
 .mcp-page .mx-stage { padding:20px; }
 .mx-demo-body { padding:24px; }
 .mx-mini { padding:24px; }
 .mx-hub { padding:20px; }
 .mx-status { font-size:10px; }
}
@media(max-width:800px) {
 .mcp-page .tabs-section .ts-fit { display:flex; flex-direction:column; }
 .mcp-page #mcpTabs { display:flex; flex-direction:row; padding:8px; gap:4px; }
 .mcp-page #mcpTabs .sl-tab { padding:14px 12px; flex:1; font-size:14px; min-height:0; }
 .mcp-page #mcpTabs .sl-tab::before { display:none; }
 .mcp-page #mcpTabs .ts-desc { display:none; }
 .mcp-page #mcpTabs .is-active { background:white; border-radius:8px; }
 .mcp-page .mx-stage { min-height:0; padding:20px; }
 .mcp-page .sp-hero-right { min-height:530px; padding:32px 24px; }
 .mcp-page .cards-auto { grid-template-columns:1fr; }
 .mx-mini { height:auto; min-height:320px; }
}
@media(max-width:480px) {
 .mx-assistants { gap:7px; }.mx-assistants > span { padding:16px 4px; gap:9px; border-radius:10px; }.mx-assistants b { font-size:11px; }.mx-assistants img { width:24px; height:24px; }
 .mx-hub-heading { flex-wrap:wrap; }.mx-hub-heading > .mx-status { width:100%; margin:6px 0 0 49px; }
 .mx-sources { gap:7px; }.mx-sources > span { padding:12px 9px; gap:6px; font-size:10px; }
 .mcp-page .mx-stage { padding:12px; }.mx-demo-body { padding:18px 14px; }.mx-demo-top { padding:0 14px; }
 .mx-user { font-size:13px; line-height:20px; }.mx-response-content > p { font-size:13px; line-height:20px; }
 .mx-workspace { padding:16px; }.mx-workspace h3 { font-size:21px; }.mx-workspace-head > span { display:none; }
 .mx-workspace-files { gap:10px; flex-wrap:wrap; }.mx-workspace-tabs { gap:17px; }
 .mx-engagement { padding:16px 12px; gap:8px; }.mx-engagement strong { font-size:23px; }.mx-engagement span { font-size:9px; }
 .mx-conversation { min-height:385px; }.mx-tool { font-size:10px; }
}
/* Keep the navigation copy inside the rail at every width. */
.mcp-page #mcpTabs .sl-tab { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; padding:0 78px 0 0; }
.mcp-page #mcpTabs .sl-tab > .mcp-tab-trigger > span { font-size:24px; line-height:46px; white-space:normal; }
.mcp-page #mcpTabs .ts-desc { width:300px; font-size:18px; line-height:28px; }
@media(max-width:800px) {
 .mcp-page #mcpTabs { padding:8px; }
 .mcp-page #mcpTabs .sl-tab { padding:12px 8px; }
 .mcp-page #mcpTabs .sl-tab > .mcp-tab-trigger > span { font-size:13px; line-height:20px; }
 .mcp-page #mcpTabs .sl-tab::after { display:none; }
}
@media(max-width:800px) {
 .mcp-page .sp-hero-left { padding:40px 24px; }
 .mcp-page .sp-hero-ctas { flex-wrap:wrap; }
 .mcp-page .sp-hero-left .logo-bar { position:static; width:100%; margin:32px 0 0; padding:0; flex-wrap:wrap; gap:16px; }
 .mcp-page .setup-grid { grid-template-columns:1fr; }
 .mcp-page .setup-grid .mx-setup-card { min-height:200px; padding:28px; }
}

.mcp-page #mcpTabs .ts-desc li { display:grid; grid-template-columns:20px minmax(0,1fr); align-items:start; gap:12px; padding:5px 0; line-height:28px; }
.mcp-page #mcpTabs .ts-desc li::before { content:none; }
.mcp-page #mcpTabs .ts-desc li img { width:20px; height:20px; margin-top:3px; object-fit:contain; }
.mcp-page #mcpTabs .ts-desc li span { min-width:0; white-space:normal; text-align:left; justify-self:stretch; font:inherit; }
/* Claude chat layout observed with a real Dock MCP call; one fixed frame for all examples. */
.mx-demo.mcui { max-width:1120px; height:660px; display:flex; background:#faf9f7; border-radius:12px; font-family:var(--ds-font); color:var(--ds-ink); }
.mcui img { display:block; object-fit:contain; width:16px; height:16px; flex-shrink:0; }
.mcui-sidebar { width:190px; flex-shrink:0; padding:18px 12px 12px; background:#f6f5f2; border-right:1px solid #1217220b; display:flex; flex-direction:column; }
.mcui-brand { display:flex; align-items:center; font:500 25px/30px Georgia,serif; padding:0 5px 22px; letter-spacing:-1px; }
.mcui-brand > span { margin-left:auto; opacity:.55; }
.mcui-nav { display:flex; flex-direction:column; gap:3px; }
.mcui-nav > span { display:flex; align-items:center; gap:10px; padding:8px 7px; font-size:12px; line-height:17px; }
.mcui-nav img { width:15px; height:15px; opacity:.7; }
.mcui-recents-label { margin:30px 7px 10px; color:var(--ds-ink-50); font-size:11px; }
.mcui-recent { display:flex; align-items:center; gap:8px; padding:9px 8px; border-radius:7px; background:#ecebe7; font-size:11px; }
.mcui-recent img { width:12px; height:12px; opacity:.45; }
.mcui-recent > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mcui-profile { display:flex; align-items:center; gap:8px; margin-top:auto; border-top:1px solid #1217220b; padding:15px 3px 0; font-size:11px; }
.mcui-profile > span { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#e9e8e2; font-size:9px; }
.mcui-profile small { display:block; color:var(--ds-ink-50); font-size:10px; margin-top:3px; }.mcui-profile > img { margin-left:auto; width:12px; height:12px; }
.mcui-main { display:flex; flex-direction:column; flex:1; min-width:0; height:100%; }
.mcui-topbar { display:flex; align-items:center; gap:7px; height:48px; flex-shrink:0; padding:0 20px; font-size:12px; }
.mcui-topbar > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mcui-topbar > img { width:12px; height:12px; opacity:.6; }
.mcui-share { margin-left:auto; border:1px solid #1217221a; border-radius:6px; padding:5px 10px; background:#ffffff70; font-size:11px; }
.mcui-chat { flex:1; min-height:0; overflow:hidden; padding:20px 32px 0; }
.mcui-thread { width:100%; max-width:680px; margin:0 auto; }
.mcui-thread[hidden] { display:none; }
.mcui-user { max-width:88%; width:fit-content; margin-left:auto; padding:12px 16px; border-radius:13px; background:#eeede9; font-size:14px; line-height:21px; }
.mcui-answer { margin-top:26px; }
.mcui-tool-label { display:flex; align-items:center; gap:6px; color:#85857f; font-size:11px; line-height:17px; margin-bottom:10px; }
.mcui-tool-label img { width:12px; height:12px; opacity:.45; }
.mcui-tool-call { border:1px solid #12172218; border-radius:10px; overflow:hidden; margin-bottom:19px; font-size:11px; line-height:16px; color:#85857f; }
.mcui-tool-call > div { display:flex; align-items:center; gap:8px; padding:8px 10px; white-space:nowrap; overflow:hidden; }
.mcui-tool-call > div + div { border-top:1px solid #12172210; }
.mcui-tool-call > div > img:last-child { width:11px; height:11px; margin-left:auto; transform:rotate(-90deg); opacity:.45; }
.mcui-tool-call img[src*='dock-mark'] { width:14px; height:14px; }
.mcui-reply { font:400 15px/23px var(--ds-font); }
.mcui-reply p { margin:0 0 13px; }
.mcui-reply b { font-weight:500; }
.mcui-reply ul { padding-left:22px; margin:0 0 15px; list-style:disc; }.mcui-reply li { margin:3px 0; }
.mcui-text-link { color:#385a80; text-decoration:underline; text-underline-offset:3px; }
.mcui-message-actions { display:flex; gap:11px; margin-top:15px; opacity:.5; }
.mcui-message-actions img { width:13px; height:13px; }
.mcui-file { display:flex; align-items:center; gap:11px; padding:12px 0; border-bottom:1px solid #12172216; }
.mcui-file + p { margin-top:15px; }.mcui-file > img { width:19px; height:19px; opacity:.7; }.mcui-file b { font-size:14px; }.mcui-file small { display:block; font-size:11px; line-height:17px; color:var(--ds-ink-50); margin-top:2px; }
.mcui-table { margin:0 0 15px; }.mcui-table > div { display:flex; justify-content:space-between; padding:7px 0; font-size:13px; border-bottom:1px solid #12172214; }.mcui-table span { color:var(--ds-ink-50); }
.mcui-compose-wrap { flex-shrink:0; width:100%; max-width:748px; padding:12px 28px 10px; margin:0 auto; }
.mcui-compose { border:1px solid #12172224; border-radius:18px; background:#fff; padding:16px 18px 13px; box-shadow:0 4px 14px #12172206; }
.mcui-compose > p { margin:0; font-size:13px; line-height:20px; color:#85857f; }
.mcui-compose-controls { display:flex; align-items:center; gap:16px; margin-top:21px; }.mcui-compose-controls > img { width:17px; height:17px; }
.mcui-model { display:flex; align-items:center; gap:5px; margin-left:auto; font-size:12px; }.mcui-model span { color:var(--ds-ink-50); }.mcui-model img { width:12px; height:12px; }
.mcui-disclaimer { font-size:9px; line-height:14px; color:#85857f; text-align:center; margin:6px 0 0; }
@media(max-width:1100px) { .mcui-sidebar { width:150px; }.mcui-chat { padding:18px 22px 0; }.mcui-compose-wrap { padding:12px 18px 10px; }.mcui-reply { font-size:14px; line-height:21px; } }
@media(max-width:800px) { .mcp-page .mx-stage { min-height:0; }.mx-demo.mcui { height:660px; }.mcui-sidebar { display:none; }.mcui-chat { padding:18px 20px 0; } }
@media(max-width:480px) { .mx-demo.mcui { height:710px; }.mcui-topbar { padding:0 12px; font-size:10px; }.mcui-share { display:none; }.mcui-chat { padding:14px 16px 0; }.mcui-user { max-width:95%; font-size:12px; line-height:19px; }.mcui-answer { margin-top:22px; }.mcui-reply { font-size:13px; line-height:21px; }.mcui-tool-call { font-size:9px; }.mcui-compose-wrap { padding:10px 12px; }.mcui-model { font-size:10px; }.mcui-compose-controls { gap:12px; }.mcui-disclaimer { font-size:8px; } }

/* Same seven-second progress dot as the home; inactive choices stay legible. */
.mcp-page #mcpTabs .sl-tab > .mcp-tab-trigger > span { color:var(--ds-ink); opacity:.48; transition:opacity .2s ease; }
.mcp-page #mcpTabs .sl-tab:hover > span,
.mcp-page #mcpTabs .sl-tab:focus-visible > span { opacity:.8; }
.mcp-page #mcpTabs .sl-tab.is-active > span { opacity:1; }
@media(max-width:800px) {
 .mcp-page #mcpTabs .sl-tab { padding-right:20px; }
 .mcp-page #mcpTabs .sl-tab::after { display:block; top:19px; right:5px; width:6px; height:6px; }
 .mcp-page #mcpTabs .sl-tab.is-active::after { top:17px; right:3px; width:10px; height:10px; }
}
@media(prefers-reduced-motion:reduce) {
 .mcp-page #mcpTabs .sl-tab > .mcp-tab-trigger > span { transition:none; }
 .mcp-page #mcpTabs .sl-tab.is-active::after { background:var(--ds-sky); }
}

/* Desktop inherits the home’s ts-fit, ts-rail and ts-stage geometry directly. */
@media(min-width:801px) {
 .mcp-page .mx-stage { padding:22px; }
 .mx-stage .mx-demo.mcui { max-width:none; width:100%; height:736px; z-index:1; }
}
@media(max-width:800px) {
 .mcp-page .tabs-section { height:auto; }
 .mcp-page .tabs-section .ts-fit { position:relative; width:100%; height:auto; transform:none; }
 .mcp-page .ts-rail { position:relative; width:auto; height:auto; inset:auto; }
 .mcp-page .mx-stage { position:relative; width:auto; height:auto; inset:auto; }
}

/* Category headings and use cases are separate buttons, never nested controls. */
.mcp-page #mcpTabs .mcp-tab-trigger { display:block; width:100%; padding:0; border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.mcp-page #mcpTabs .mcp-tab-trigger > span { display:block; font-weight:500; }
.mcp-page #mcpTabs .ts-desc li { display:block; padding:0; }
.mcp-page #mcpTabs .mcp-case { display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; align-items:start; width:100%; padding:7px 0; border:0; background:none; font:inherit; line-height:28px; text-align:left; color:var(--ds-ink); cursor:pointer; opacity:.5; transition:opacity .2s ease; }
.mcp-page #mcpTabs .mcp-case:hover { opacity:.8; }
.mcp-page #mcpTabs .mcp-case[aria-pressed='true'] { opacity:1; }
.mcp-page #mcpTabs .mcp-tab-trigger:focus-visible,
.mcp-page #mcpTabs .mcp-case:focus-visible { outline:2px solid var(--ds-blue); outline-offset:4px; border-radius:4px; }
.mcp-page #mcpTabs .sl-tab:has(.mcp-tab-trigger:focus-visible) > .mcp-tab-trigger > span { opacity:1; }

.mcp-page #mcpTabs .mcp-tab-trigger > span { text-align:left; }
.mcp-page #mcpTabs .sl-tab.is-active .mcp-tab-trigger > span { opacity:1; }
.mcp-page #mcpTabs .mcp-tab-trigger:hover > span { opacity:.8; }
/* ChatGPT light reference: compact sidebar, plain assistant text, pill composer. */
.gpt-hero { position:relative; z-index:2; display:flex; width:100%; max-width:700px; min-height:650px; overflow:hidden; border:1px solid #00000012; border-radius:8px; background:#fff; color:#0d0d0d; box-shadow:0 18px 50px #00358724; font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; text-align:left; }
.gpt-hero img { display:block; width:18px; height:18px; object-fit:contain; flex-shrink:0; }
.gpt-rail { display:flex; flex-direction:column; align-items:center; width:48px; flex-shrink:0; padding:18px 0 15px; border-right:1px solid #0000000a; background:#fafafa; }
.gpt-rail .gpt-brand { width:23px; height:23px; }
.gpt-rail-tools { display:flex; flex-direction:column; gap:25px; margin-top:29px; }
.gpt-profile { display:grid; place-items:center; width:25px; height:25px; margin-top:auto; border-radius:50%; background:#9b5044; color:#fff; font-size:9px; }
.gpt-main { display:flex; flex-direction:column; flex:1; min-width:0; }
.gpt-topbar { position:relative; display:flex; align-items:center; justify-content:center; height:60px; flex-shrink:0; padding:10px 18px; }
.gpt-topbar > img { position:absolute; right:19px; width:16px; height:16px; }
.gpt-mode { display:flex; padding:2px; border-radius:100px; background:#f8f8f8; font-size:12px; line-height:20px; }
.gpt-mode > span { padding:4px 25px; border-radius:100px; color:#777; }
.gpt-mode > span:first-child { background:#fff; color:#0d0d0d; box-shadow:0 1px 5px #00000010; }
.gpt-conversation { padding:20px 28px 24px; flex:1; }
.gpt-question { margin:0 0 26px auto; max-width:88%; width:fit-content; padding:11px 16px; border-radius:22px; background:#f4f4f4; font-size:14px; line-height:21px; }
.gpt-tool { display:flex; align-items:center; gap:7px; font-size:12px; line-height:18px; color:#737373; margin-bottom:13px; }
.gpt-tool > img:first-child { width:17px; height:17px; }.gpt-tool > img:last-child { width:12px; height:12px; opacity:.55; }
.gpt-answer,.gpt-followup { font-size:14px; line-height:22px; margin:0 0 16px; }
/* MCP replies are ordinary chat text and links, without a custom Dock widget. */
.mcp-page .gpt-mcp-response { margin:0 0 22px; font-size:14px; line-height:22px; }
.mcp-page .gpt-mcp-response ul { margin:0 0 20px; padding-left:22px; list-style:disc; }
.mcp-page .gpt-mcp-response li { margin:6px 0; padding:0; }
.mcp-page .gpt-mcp-response p { margin:0; font:inherit; }
.mcp-page .gpt-mcp-response .gpt-response-link { color:#0d66d0; text-decoration:underline; text-underline-offset:3px; }
.gpt-dock-card { padding:18px; border:1px solid #e5e5e5; border-radius:16px; box-shadow:0 2px 6px #00000004; font-family:var(--ds-font); margin-bottom:18px; }
.gpt-dock-heading { display:flex; align-items:center; gap:10px; margin-bottom:18px; }.gpt-dock-heading > img:first-child { width:27px; height:27px; }.gpt-dock-heading > img:last-child { width:15px; height:15px; margin-left:auto; opacity:.4; }
.gpt-dock-heading strong { display:block; font-size:17px; line-height:23px; font-weight:500; letter-spacing:-.3px; }.gpt-dock-heading div > span { display:block; font-size:11px; line-height:17px; color:#858585; margin-top:2px; }
.gpt-docs { margin-bottom:16px; }.gpt-docs > div { display:flex; align-items:center; gap:10px; padding:11px 0; font-size:13px; line-height:18px; }.gpt-docs > div + div { border-top:1px solid #f0f0f0; }.gpt-docs img { width:16px; height:16px; opacity:.7; }
.gpt-open-room { display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 14px; border-radius:8px; color:white; background:var(--ds-blue); font-size:13px; line-height:18px; font-weight:500; }.gpt-open-room img { width:15px; height:15px; filter:brightness(0) invert(1); }
.gpt-followup { margin-bottom:13px; }.gpt-actions { display:flex; gap:14px; opacity:.55; }.gpt-actions img { width:15px; height:15px; }
.gpt-bottom { padding:0 18px 10px; }.gpt-composer { display:flex; align-items:center; gap:12px; padding:8px 9px 8px 15px; background:#fff; border:1px solid #e8e8e8; border-radius:100px; box-shadow:0 3px 12px #00000006; }.gpt-composer > span:not(.gpt-voice) { flex:1; color:#909090; font-size:13px; white-space:nowrap; }.gpt-voice { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#000; }.gpt-voice img { width:17px; height:17px; filter:brightness(0) invert(1); }.gpt-bottom > p { text-align:center; font-size:9px; line-height:14px; color:#858585; margin:9px 0 0; }
.mcui .mcui-wordmark { width:110px; height:auto; aspect-ratio:573 / 125; object-fit:contain; }
@media(max-width:1100px) { .gpt-conversation { padding:18px 20px; }.gpt-rail { width:40px; }.gpt-dock-card { padding:15px; }.mcui .mcui-wordmark { width:94px; } }
@media(max-width:480px) { .gpt-hero { min-height:0; border-radius:8px; }.gpt-rail { display:none; }.gpt-conversation { padding:16px; }.gpt-question,.gpt-answer,.gpt-followup { font-size:13px; line-height:20px; }.gpt-dock-heading strong { font-size:16px; }.gpt-mode > span { padding:4px 20px; }.gpt-topbar > img { right:13px; }.gpt-dock-card { padding:14px; }.gpt-bottom { padding:0 12px 10px; } }
/* Keep the hero window inset evenly on all four sides. */
.mcp-page .sp-hero-right { padding:32px; align-items:stretch; }
.gpt-hero { max-width:none; }
.gpt-rail { --rail-inset:12px; width:49px; padding:var(--rail-inset) 0; }
.gpt-rail .gpt-brand { width:25px; height:25px; }
.gpt-rail-tools { gap:18px; margin-top:22px; }
/* One shared grid: consistent copy block, scene size, and padding for all agents. */
.mcp-page .mcp-agent-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
.mcp-page .mcp-agent-grid .ds-card { display:flex; flex-direction:column; height:auto; padding:0; gap:0; overflow:hidden; }
.mcp-page .mcp-agent-grid .il-copy { flex:none; min-height:160px; padding:32px 32px 24px; }
.mcp-page .mcp-agent-grid .ds-card-title { margin:0; font-size:24px; line-height:32px; }
.mcp-page .mcp-agent-grid .ds-card-body { margin:12px 0 0; font-size:16px; line-height:24px; }
.mcp-page .mcp-agent-grid .dock-illustration { margin-top:auto; }
@media(max-width:1100px) and (min-width:801px) { .mcp-page .mcp-agent-grid .il-copy { min-height:206px; padding:24px; } }
@media(max-width:800px) { .mcp-page .mcp-agent-grid { grid-template-columns:1fr; }.mcp-page .sp-hero-right { padding:24px; }.mcp-page .mcp-agent-grid .il-copy { min-height:160px; padding:28px; } }
.mcp-page #mcpTabs .mcp-case > span { position:relative; top:-1px; }
.gpt-conversation { width:100%; max-width:600px; margin-inline:auto; padding-inline:40px; }
.gpt-bottom { width:100%; max-width:600px; margin-inline:auto; padding-inline:32px; }
@media(max-width:1100px) { .gpt-conversation { padding-inline:28px; }.gpt-bottom { padding-inline:20px; } }
@media(max-width:480px) { .gpt-conversation { padding-inline:20px; }.gpt-bottom { padding-inline:14px; } }

/* Persistent chat history mirrors the nine capability examples. */
.mcui-chat-list { display:flex; flex-direction:column; gap:3px; }
.mcui-chat-list .mcui-recent { background:transparent; color:#74746f; transition:background .2s ease,color .2s ease; }
.mcui-chat-list .mcui-recent.is-current { background:#ecebe7; color:var(--ds-ink); }
.mcui-chat-list .mcui-recent.is-current img { opacity:.7; }
@media(prefers-reduced-motion:reduce) { .mcui-chat-list .mcui-recent { transition:none; } }

/* Setup links reuse the home customer-card surface and arrow component. */
.mcp-page .setup-grid .mx-setup-card { position:relative; padding:48px; min-height:260px; gap:0; }
.mx-setup-card h3 { margin:28px 0 12px; }
.mx-setup-card > .mx-setup-label { font-size:18px; line-height:28px; color:var(--ds-ink-50); }
.mcp-page .setup-grid .mx-setup-card > .ds-arrow-chip { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; right:37px; top:48px; }
.mcp-page .setup-grid .mx-setup-card > .ds-arrow-chip img { width:12px; height:10px; }
@media(max-width:800px) { .mcp-page .setup-grid .mx-setup-card { padding:28px; min-height:230px; }.mcp-page .setup-grid .mx-setup-card > .ds-arrow-chip { top:28px; right:28px; } }

/* Security follows the home split: introduction and trust marks, two safeguards. */
.mcp-page .setup-grid .mx-setup-card { min-height:0; height:auto; }
.mcp-page .mcp-security.security-panel { display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0; }
.mcp-security-intro { padding:64px; display:flex; flex-direction:column; min-width:0; }
.mcp-security-intro .ds-h2 { margin:16px 0 24px; max-width:560px; }
.mcp-security-intro > p { margin:0; max-width:540px; font-size:20px; line-height:30px; color:rgba(255,255,255,.6); }
.mcp-security-intro .security-badges { margin-top:auto; padding-top:64px; }
.mcp-security-features { display:flex; flex-direction:column; justify-content:center; gap:24px; padding:64px; background:#0a0e15; border-radius:var(--ds-radius-md) 0 0 var(--ds-radius-md); min-width:0; }
.mcp-security-feature { padding:32px; background:var(--ds-ink); border:1px solid #ffffff12; border-radius:var(--ds-radius-md); }
.mcp-security-feature > img { display:block; width:28px; height:28px; filter:brightness(0) invert(1); margin-bottom:20px; }
.mcp-security .mcp-security-feature .ds-card-title { margin:0 0 12px; font-size:24px; line-height:32px; }
.mcp-security .mcp-security-feature .ds-card-body { margin:0; max-width:none; font-size:18px; line-height:28px; }
@media(max-width:1100px) and (min-width:801px) { .mcp-security-intro,.mcp-security-features { padding:40px; }.mcp-security-feature { padding:24px; } }
@media(max-width:800px) { .mcp-page .mcp-security.security-panel { grid-template-columns:1fr; }.mcp-security-intro { padding:32px 24px; }.mcp-security-intro > p { font-size:18px; line-height:28px; }.mcp-security-intro .security-badges { padding-top:32px; }.mcp-security-features { padding:24px; gap:20px; border-radius:0 0 var(--ds-radius-md) var(--ds-radius-md); }.mcp-security-feature { padding:24px; } }

/* QA DOC-7141: separate section titles from their supporting paragraphs. */
.mcp-page .mcp-section-intro { max-width:1060px; padding-left:var(--ds-heading-indent); margin-bottom:var(--ds-heading-gap); }
.mcp-page .mcp-section-intro .ds-h2 { margin:0; }
.mcp-page .mcp-section-intro > p { max-width:760px; margin:20px 0 0; font-size:20px; line-height:30px; color:rgba(18,23,34,.68); text-wrap:pretty; }
.mcp-page .mcp-agent-grid .il-copy .ds-card-title { font-size:28px; line-height:34px; }
.mcp-page .mcp-agent-grid .il-copy .ds-card-body { color:rgba(18,23,34,.68); }
.mcp-page .demo-cta-section { margin-top:96px; }
@media(max-width:1024px) { .mcp-page .mcp-section-intro { padding-left:24px; } }
@media(max-width:800px) {
  .mcp-page .mcp-section-intro > p { margin-top:16px; font-size:18px; line-height:28px; }
  .mcp-page .mcp-agent-grid .il-copy .ds-card-title { font-size:26px; line-height:32px; }
  .mcp-page .demo-cta-section { margin-top:56px; }
}