.connect-page { color: var(--color-text-primary); }
.connect-page h1, .connect-page h2 { font-family: 'Segoe UI', sans-serif; font-weight: 600; letter-spacing: -.045em; line-height: 1.08; text-wrap: balance; }
.connect-page h1 { font-size: clamp(2.5rem, 4.1vw, 3.65rem); margin: 0 0 24px; }
.connect-page h2 { font-size: clamp(2rem, 3.2vw, 2.9rem); margin: 0 0 24px; }
.connect-page h1 em, .connect-page h2 em { font-family: Georgia, serif; font-weight: 400; color: var(--color-text-brand); }
.connect-page p { line-height: 1.65; margin: 0 0 20px; }
.connect-page a, .connect-page a:hover { text-decoration: none; }
.connect-page a:focus-visible { outline: 3px solid var(--color-text-brand); outline-offset: 5px; }
.connect-page .btn-primary { border-radius: 3px; background: #2563eb; color: #fff; }
.connect-page .btn-primary:hover { background: #1d4ed8; }
.connect-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--color-text-brand); font-weight: 600; font-size: .95rem; }
.connect-page .cta-group { margin-top: 28px; gap: 12px 24px; align-items: center; }
.connect-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 72px; align-items: center; }
.connect-hero { padding: 40px 0 64px; }
.connect-page .connect-plan { margin-top: 24px; font-size: .875rem; color: var(--color-text-secondary); max-width: 470px; }
.connect-plan a { display: inline-block; color: var(--color-text-brand); }
.connect-page .mcp-terminal { min-width: 0; max-width: none; }
.connect-page .mcp-terminal-body { height: 25rem; max-height: none; }
.connect-page .mcp-terminal-body:focus-visible,
.connect-page .mcp-terminal-replay:focus-visible { outline: 3px solid #9ec4ff; outline-offset: -3px; }
.connect-page .mcp-terminal-boot { color: #94a3b8; }
.connect-campaign { position: relative; color: #0b2842; overflow: hidden; border-radius: 3px; }
.connect-campaign img { display: block; width: 100%; height: auto; }
.connect-campaign__text { position: absolute; inset: 7% 7% auto; text-align: center; }
.connect-campaign__text span { display: block; font-family: Georgia, serif; font-size: clamp(1rem,1.65vw,1.5rem); }
.connect-campaign__text strong { display: block; margin-top: 8px; font-size: clamp(1.9rem,3vw,2.7rem); letter-spacing: -.04em; line-height: 1.1; }
.connect-section { padding: 76px 0; border-top: 1px solid var(--color-border); scroll-margin-top: 80px; }
.connect-section .connect-split, .connect-setup .connect-split { align-items: start; }
.connect-jobs { margin: 0; }
.connect-jobs > div { padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid var(--color-border); }
.connect-jobs > div:last-child { margin-bottom: 0; padding-bottom: 0; border: 0; }
.connect-page dt, .connect-page h3 { font-size: 1.13rem; font-weight: 600; line-height: 1.35; margin: 0 0 10px; }
.connect-page dd { margin: 0; line-height: 1.65; color: var(--color-text-secondary); }
.connect-setup { background: var(--color-bg-tinted); padding: 72px 0; scroll-margin-top: 80px; }
.connect-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.connect-steps li { counter-increment: step; position: relative; padding: 0 0 28px 44px; }
.connect-steps li:last-child { padding-bottom: 0; }
.connect-steps li::before { content: counter(step,decimal-leading-zero); position: absolute; left: 0; top: 3px; font-size: .8rem; color: var(--color-text-brand); font-weight: 600; }
.connect-steps p { margin-bottom: 0; }
.connect-steps code { display: block; font-size: .85rem; margin-top: 12px; overflow-wrap: anywhere; color: var(--color-text-brand); }
.connect-api-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; }
.connect-api-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin: 28px 0 36px; }
.connect-api-jobs > div { border-top: 1px solid var(--color-border); padding-top: 24px; }
.connect-api-jobs .connect-link { margin-top: 8px; }
.connect-docs { display: grid; grid-template-columns: .65fr 1.35fr; gap: 36px; padding-top: 28px; border-top: 1px solid var(--color-border); }
.connect-docs p { margin: 0; }
.connect-docs a { color: var(--color-text-brand); font-weight: 600; }
.connect-close { padding: 64px 0 0; background: #0b2842; color: #fff; }
.connect-close__main { display: grid; grid-template-columns: 1.5fr 1fr; gap: 72px; align-items: center; padding-bottom: 52px; }
.connect-close h2 { color: #fff; font-size: clamp(2.4rem,4vw,3.5rem); }
.connect-close h2 em { color: #9ec4ff; }
.connect-close p { color: #cfdeea; }
.connect-close__main p { max-width: 470px; margin-bottom: 28px; }
.connect-close .btn-primary { background: #fff; color: #0b2842; }
.connect-close .btn-primary:hover { background: #dfebff; }
.connect-close a:focus-visible { outline-color: #9ec4ff; }
.connect-close__art { max-width: 340px; width: 100%; justify-self: end; }
.connect-close__art .connect-campaign__text span { font-size: 1.1rem; }
.connect-close__art .connect-campaign__text strong { font-size: 2.2rem; }
.connect-close__footer { border-top: 1px solid #385167; padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.connect-close__footer p { margin: 0; font-size: .875rem; }
.connect-close__footer a { color: #fff; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.connect-close__footer p a { margin-left: 12px; }
@media(max-width:1000px) { .connect-split, .connect-api-intro, .connect-api-jobs, .connect-close__main { gap: 36px; } }
@media(max-width:760px) {
  .connect-split, .connect-api-intro, .connect-api-jobs, .connect-docs, .connect-close__main { grid-template-columns: 1fr; gap: 32px; }
  .connect-hero { padding: 28px 0 44px; }
  .connect-page h1 { font-size: clamp(2.35rem,8.5vw,3.4rem); }
  .connect-page .cta-group { flex-direction: column; align-items: flex-start; }
  .connect-section, .connect-setup { padding: 48px 0; }
  .connect-campaign__text span { font-size: 1.2rem; }
  .connect-campaign__text strong { font-size: 2.3rem; }
  .connect-close { padding-top: 44px; }
  .connect-close__art { justify-self: center; }
  .connect-close__footer { flex-direction: column; align-items: flex-start; gap: 4px; }
  .connect-close__footer p a { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .connect-page .mcp-terminal-body { height: auto; }
}