/* Loaded only on Connect your AI: keep the shared navigation, with less height. */
.header { padding: 14px 0; }
.main-content { padding-top: 0; }
.connect-page { max-width: 1040px; margin: 0 auto; padding: 34px 0 48px; }
.connect-page p { color: #aebeb3; line-height: 1.6; margin: 0; }
.connect-intro { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.connect-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; color: #6ae69d; font: 11px/1.5 var(--font-mono); }
.connect-beta { padding: 3px 8px; border: 1px solid #2b4032; border-radius: 4px; color: #a6b9ac; font-size: 10px; }
.connect-page h1 { max-width: 560px; font-size: clamp(32px, 3.5vw, 44px); line-height: 1.12; letter-spacing: -.04em; margin: 18px 0 22px; }
.connect-page h1 span { display: block; }
.connect-page h1 span:last-child { color: #35d778; }
.connect-benefits { list-style: none; margin: 0 0 24px; padding: 0; }
.connect-benefits li { display: flex; gap: 12px; margin: 10px 0; color: #c7d4cb; font: 16px/1.5 var(--font-sans); }
.connect-benefits li span { color: #35d778; font-family: var(--font-mono); }
.connect-action { display: inline-flex; align-items: center; gap: 18px; min-height: 48px; padding: 12px 18px; color: #06140b; background: #35d778; border: 1px solid #35d778; border-radius: 5px; font: 600 13px/1.5 var(--font-mono); text-decoration: none; }
.connect-action:hover { color: #06140b; background: #53e48e; }
.connect-page .connect-access { max-width: 400px; font-size: 12px; margin-top: 12px; color: #91a699; }
.connect-example { padding: 18px; border: 1px solid #2c4133; border-radius: 8px; background: linear-gradient(135deg, #112219, #0b100d 75%); }
.connect-page .connect-label { color: #8eaa98; font: 10px/1.5 var(--font-mono); letter-spacing: .07em; }
.connect-page .connect-example blockquote { margin: 12px 0; color: #c8d7ce; font: 500 17px/1.5 var(--font-sans); }
.connect-page .connect-example-note { margin-top: 10px; font-size: 12px; color: #94a79b; }
.connect-copy, .connect-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 9px 13px; border: 1px solid #334a3b; border-radius: 5px; color: #afdfbf; background: #0b140e; font: 500 12px/1.5 var(--font-mono); text-decoration: none; cursor: pointer; }
.connect-copy:hover, .connect-secondary:hover { background: #12271a; border-color: #4c8e60; color: #d7f5e0; }
.connect-example .connect-copy { min-height: 32px; padding: 5px 9px; font-size: 11px; color: #a9bfb1; background: transparent; border-color: #2d3e32; }
@media (pointer: coarse) { .connect-example .connect-copy { min-height: 44px; } }
.connect-setup { margin-top: 40px; padding-top: 30px; border-top: 1px solid #24362b; scroll-margin-top: 104px; }
.connect-page h2 { font-size: 22px; line-height: 1.3; margin: 0 0 8px; }
.connect-section-heading > p { font-size: 14px; }
.connect-tool-picker { border: 0; padding: 0; margin: 20px 0 0; scroll-margin-top: calc(var(--connect-header-height, 112px) + 16px); }
.connect-tool-picker legend { font-size: 14px; color: #b7c9be; margin-bottom: 12px; }
.connect-tool-options { display: flex; flex-wrap: wrap; gap: 10px; }
.connect-tool-options label { position: relative; cursor: pointer; }
.connect-tool-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.connect-tool-options span { display: block; min-height: 44px; padding: 11px 16px; box-sizing: border-box; border: 1px solid #334a3b; border-radius: 5px; color: #aebeb3; font: 12px/1.6 var(--font-mono); }
.connect-tool-options input:checked + span { color: #80ecaa; border-color: #45b86d; background: #112b1b; }
.connect-tool-options input:focus-visible + span { outline: 2px solid #35d778; outline-offset: 4px; }
.connect-page [hidden] { display: none !important; }
.connect-assisted { margin: 20px 0; padding: 20px; border: 1px solid #334a3b; border-radius: 8px; background: #0b140e; }
.connect-assisted h3 { margin: 0 0 8px; font-size: 18px; }
.connect-assisted p { font-size: 14px; overflow-wrap: anywhere; }
.connect-assisted-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.connect-manual-heading { margin: 24px 0 0; font-size: 17px; }
.mcp-consent-page { max-width: 680px; padding: 40px 20px; }
.mcp-consent-page > p { margin: 12px 0; }
.mcp-consent-page h2 { margin-top: 28px; }
.mcp-consent-page code { overflow-wrap: anywhere; }
.mcp-consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0; }
.connect-page .connect-client-note { margin-top: 12px; font-size: 12px; color: #94a79b; }
.connect-steps { list-style: none; margin: 22px 0 0; padding: 0; }
.connect-steps > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; padding: 24px; margin-bottom: 14px; border: 1px solid #26362c; border-radius: 8px; background: #0b110d; }
.connect-step-number { padding-top: 3px; color: #55d787; font: 12px/1.5 var(--font-mono); }
.connect-step-content h3 { font-size: 21px; margin: 0 0 7px; }
.connect-step-content > p { max-width: 780px; font-size: 18px; color: #e0e7e2; }
.connect-command-row, .connect-try-row { margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.connect-command-row pre { flex: 1; min-width: 0; max-width: 100%; margin: 0; padding: 14px; white-space: pre; overflow-wrap: normal; overflow-x: auto; background: #070d09; border: 1px solid #293a2e; border-radius: 5px; color: #d7e6dc; font: 12px/1.7 var(--font-mono); }
.connect-command-row button, .connect-try-row button { flex-shrink: 0; }
.connect-page code { font-family: var(--font-mono); }
.connect-try-row p { font-size: 14px; color: #e0e9e3; }
.connect-page .connect-copy-status { font-size: 12px; color: #a6dfb9; }
.connect-copy-status:empty { display: none; }
.connect-workspace { display: flex; justify-content: space-between; gap: 28px; align-items: center; padding: 26px 0; margin-top: 12px; border-top: 1px solid #24362b; }
.connect-workspace > div { max-width: 640px; }
.connect-workspace p { font-size: 14px; }
.connect-workspace a { flex-shrink: 0; }
.connect-details { border-top: 1px solid #24362b; padding-top: 18px; }
.connect-details summary { cursor: pointer; font-size: 15px; color: #a7baae; }
.connect-details p { max-width: 800px; margin-top: 12px; font-size: 16px; }
.connect-page :is(button, a, summary):focus-visible { outline: 2px solid #35d778; outline-offset: 4px; }
.connect-client-picker, .connect-surface-picker { border: 0; padding: 0; margin: 18px 0; min-width: 0; }
.connect-surface-picker legend { margin: 0 0 10px; color: #aebeb3; font-size: 13px; }
.connect-client-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.connect-client-cards label { position: relative; cursor: pointer; min-width: 0; }
.connect-client-cards input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.connect-client-cards input + span { display: block; height: 100%; box-sizing: border-box; padding: 20px 28px 20px 18px; border: 1px solid #334a3b; border-radius: 7px; background: #0b140e; }
.connect-client-cards strong { display: block; color: #d4e1d8; font: 600 18px/1.3 var(--font-sans); }
.connect-client-cards small { display: block; margin-top: 8px; color: #91a699; font-size: 12px; line-height: 1.5; }
.connect-card-chevron { position: absolute; right: 12px; top: 22px; color: #91a699; font-family: var(--font-mono); }
.connect-client-cards input:checked + span { border-color: #45b86d; background: #112219; }
.connect-client-cards input:checked + span strong, .connect-client-cards input:checked + span .connect-card-chevron { color: #6ae69d; }
.connect-client-cards input:focus-visible + span { outline: 2px solid #35d778; outline-offset: 4px; }
.connect-prerequisites, .connect-availability { padding: 20px; border-left: 2px solid #486551; background: #0c1510; margin: 20px 0; border-radius: 4px; }
.connect-prerequisites h3, .connect-availability h3 { margin: 0 0 10px; font-size: 17px; }
.connect-prerequisites p + p { margin-top: 8px; }
.connect-prerequisites p, .connect-availability p { font-size: 14px; }
.connect-prerequisites a { margin-top: 12px; }
.connect-substeps { margin: 14px 0 0; padding-left: 20px; color: #aebeb3; font-size: 14px; line-height: 1.7; }
.connect-substeps li { margin-top: 8px; padding-left: 4px; }
.connect-page .connect-step-content > .connect-command-row + p { margin-top: 12px; }
.connect-command-row:has([data-copy-kind="prompt"]) pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-sans); font-size: 15px; }
.connect-command-row:has([data-copy-kind="prompt"]) code { font-family: inherit; }
.connect-page .connect-success-hint { margin-top: 12px; color: #a6cfb3; }
.connect-details { margin-top: 20px; }
.connect-help-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.connect-help-section { margin-top: 36px; padding-top: 30px; border-top: 1px solid #24362b; scroll-margin-top: 16px; }
.connect-help-section h2 { margin-top: 8px; }
.connect-help-intro { max-width: 760px; font-size: 14px; }
.connect-use-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.connect-use-heading h3 { margin: 0; }
.connect-access-tag { padding: 3px 7px; border: 1px solid #334a3b; border-radius: 4px; color: #aebeb3; font: 10px/1.5 var(--font-mono); }
.connect-access-tag-pro { color: #80ecaa; border-color: #3c7650; }
.connect-use-example { margin: 16px 0; padding: 16px; border: 1px solid #293a2e; border-radius: 6px; background: #070d09; }
.connect-page .connect-use-prompt { margin: 8px 0 12px; color: #d7e6dc; font-size: 15px; overflow-wrap: anywhere; }
.connect-page .connect-use-result { color: #a6bfaf; font-size: 13px; }
.connect-faq .connect-help-intro { margin-bottom: 22px; }
.connect-faq .connect-details { margin: 0; padding: 0 0 18px; }
.connect-faq .connect-details summary { padding: 18px 0 0; color: #d0dfd5; font: 500 15px/1.5 var(--font-sans); }
.connect-faq .connect-details .connect-secondary { margin-top: 14px; }
.connect-faq .connect-details:last-child { border-bottom: 1px solid #24362b; }
.connect-copy-status { position: sticky; bottom: 12px; padding: 10px 14px; background: #112219; border: 1px solid #334a3b; border-radius: 5px; z-index: 2; }
.connect-command-row pre:focus-visible { outline: 2px solid #35d778; outline-offset: 2px; }
@media (max-width: 768px) {
    .header { padding: 8px 0; }
    .header .header-content { gap: 0; }
    .header .header-search-toggle { bottom: 100%; }
    .connect-page { padding-top: 22px; }
    .connect-intro { gap: 28px; grid-template-columns: minmax(0, 1fr); }
    .connect-page h1 { max-width: 490px; }
    .connect-example { padding: 16px; }
    .connect-example blockquote { font-size: 17px; margin: 12px 0; }
    .connect-page .connect-example-note { margin-top: 8px; }
    .connect-workspace { align-items: flex-start; flex-direction: column; gap: 16px; }
    .connect-setup { margin-top: 28px; padding-top: 24px; scroll-margin-top: 112px; }
    .connect-command-row, .connect-try-row { align-items: flex-start; flex-direction: column; }
    .connect-command-row pre { width: 100%; box-sizing: border-box; }
    .connect-client-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .connect-client-cards input + span { padding: 16px 24px 16px 12px; }
    .connect-steps > li { grid-template-columns: 24px minmax(0, 1fr); padding: 16px 12px; gap: 8px; }
    .connect-use-example { padding: 12px; }
}
/* At tablet widths, the existing links fit on one row without hiding navigation. */
@media (min-width: 600px) and (max-width: 768px) {
    .header .header-content { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
    .header .header-nav { grid-row: 1; grid-column: 2; gap: 12px; flex-wrap: nowrap; }
    .header .header-search-toggle { position: static; }
    .header .header-free { margin-right: 0; }
    .header .search-container { grid-row: 2; grid-column: 1 / -1; }
    .connect-setup { scroll-margin-top: 80px; }
}

/* Reading-focused setup. The hero and client cards keep their existing width. */
.connect-setup > [data-client-panel],
.connect-setup > .connect-details,
.connect-help-section,
.connect-workspace { max-width: 780px; margin-left: auto; margin-right: auto; min-width: 0; }
.connect-setup > [data-client-panel] { margin-top: 26px; font-family: var(--font-sans); }
.connect-prerequisites { padding: 0 0 20px; margin: 24px 0; background: none; border: 0; border-bottom: 1px solid #26362c; }
.connect-prerequisites h3 { font-size: 18px; margin-bottom: 10px; }
.connect-needs { padding-left: 20px; margin: 0; color: #e0e7e2; font: 17px/1.6 var(--font-sans); }
.connect-needs li + li { margin-top: 4px; }
.connect-prerequisites .connect-details { border: 0; padding-top: 0; margin-top: 12px; }
.connect-assisted { padding: 18px 20px; background: #0c1510; border-color: #26362c; }
.connect-assisted-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.connect-assisted-heading h3 { margin: 0; font-size: 18px; }
.connect-assisted > p { margin-top: 8px; font-size: 16px; }
.connect-assisted .connect-details { margin-top: 12px; padding-top: 0; border: 0; }
.connect-steps > li { padding: 26px; gap: 14px; margin-bottom: 18px; }
.connect-step-content { min-width: 0; }
.connect-step-content > p + p { margin-top: 12px; }
.connect-page .connect-step-content > .connect-preserve { font-size: 16px; color: #d5e2d9; padding-left: 12px; border-left: 2px solid #486551; margin-top: 16px; }
.connect-step-content > p code, .connect-details p code { font-size: .86em; overflow-wrap: anywhere; }
.connect-page .connect-success-hint { font-size: 16px; color: #a6cfb3; }
.connect-details { margin-top: 16px; padding-top: 14px; }
.connect-details summary { min-height: 30px; line-height: 1.6; font-family: var(--font-sans); }
.connect-details summary { list-style: none; }
.connect-details summary::marker { content: ''; }
.connect-details summary::-webkit-details-marker { display: none; }
.connect-details p { color: #b7c7bd; line-height: 1.6; }
.connect-page .connect-text-link,
.connect-setup .connect-secondary,
.connect-faq .connect-secondary { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 0; border: 0; border-radius: 2px; background: none; color: #aac8b4; font: 15px/1.6 var(--font-sans); text-decoration: none; gap: 6px; }
.connect-page .connect-text-link:hover,
.connect-setup .connect-secondary:hover,
.connect-faq .connect-secondary:hover { color: #7ceaab; background: none; }
.connect-step-action { display: inline-flex; align-items: center; margin-top: 16px; min-height: 44px; padding: 9px 15px; border: 1px solid #459b61; border-radius: 5px; background: #13291b; color: #a5edbd; font: 600 16px/1.5 var(--font-sans); text-decoration: none; }
.connect-step-action:hover { background: #193623; color: #c4f7d4; }
.connect-fields { margin: 20px 0 0; padding: 0; border-top: 1px solid #293a2e; }
.connect-fields > div { display: grid; grid-template-columns: 155px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid #24342a; }
.connect-fields dt { font: 13px/1.6 var(--font-mono); color: #a4b7ab; }
.connect-fields dd { margin: 0; min-width: 0; color: #e0e7e2; font: 17px/1.6 var(--font-sans); overflow-wrap: anywhere; }
.connect-fields dd > code { font-size: 13px; }
.connect-optional { display: block; margin-top: 4px; font: 12px/1.5 var(--font-sans); color: #92a69a; }
.connect-command-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid #293a2e; border-radius: 6px; background: #070d09; overflow: hidden; margin-top: 16px; }
.connect-command-row pre { border: 0; border-radius: 0; width: 100%; box-sizing: border-box; padding: 16px; font-size: 13px; }
.connect-command-row .connect-copy { justify-self: end; min-height: 36px; margin: 0 10px 10px; padding: 5px 10px; font: 500 13px/1.5 var(--font-sans); background: transparent; border-color: #2d4435; }
.connect-command-row[data-copy-format="prompt"] pre,
.connect-command-row[data-copy-format="text"] pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 17px/1.6 var(--font-sans); }
.connect-command-row[data-copy-format="prompt"] code,
.connect-command-row[data-copy-format="text"] code { font-family: inherit; }
.connect-fields .connect-command-row { margin-top: 0; }
.connect-help-intro { font-size: 18px; color: #dbe5de !important; }
.connect-help-section { font-family: var(--font-sans); }
.connect-page .connect-use-prompt { font-size: 17px; line-height: 1.6; }
.connect-page .connect-use-result { font-size: 16px; }
.connect-use-example .connect-copy { display: flex; margin-left: auto; min-height: 36px; font: 500 13px/1.5 var(--font-sans); background: transparent; }
.connect-page .connect-client-note { font: 15px/1.6 var(--font-sans); }
.connect-page .connect-help-links { gap: 8px 24px; margin-top: 8px; }
@media (max-width: 600px) {
    .connect-steps > li { padding: 20px 14px; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
    .connect-step-content > p { font-size: 17px; }
    .connect-step-content h3 { font-size: 20px; }
    .connect-assisted-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
    .connect-assisted-heading .connect-copy { align-self: flex-end; }
    .connect-fields > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .connect-fields dt .connect-optional { display: inline; margin-left: 8px; }
    .connect-command-row pre { padding: 12px; }
    .connect-command-row .connect-copy, .connect-use-example .connect-copy { min-height: 44px; }
    .connect-help-intro { font-size: 17px; }
}