/* Onboarding uses the existing product tokens. */
.connect-main { max-width: var(--content-max); margin: auto; padding: var(--s-8) var(--s-6) var(--s-10); display: grid; gap: var(--space-card-gap); }
.connect-main > * { min-width: 0; }
.connect-main .card { padding: var(--s-6); }
.connect-main .lead { font-size: var(--fs-md); color: var(--ink-soft); }
.connect-nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.connect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.connect-main p { margin-bottom: 0; }
.connect-main ul, .connect-main ol { padding-left: var(--s-6); margin-bottom: 0; }
.connect-main li + li { margin-top: var(--s-2); }
.connect-main details { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.connect-main summary { cursor: pointer; font-weight: 600; min-height: var(--control-sm-h); }
.connect-main details p { margin-top: var(--s-3); }
.connect-main textarea { box-sizing: border-box; width: 100%; padding: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-1); font: inherit; color: var(--ink); background: var(--surface-soft); resize: vertical; }
.connect-main textarea:focus-visible { outline: 3px solid var(--shadow-focus); }
.connect-main .actions { flex-wrap: wrap; }
.connect-main code, .guide-document { overflow-wrap: anywhere; }
.guide-document pre { overflow: auto; padding: var(--s-4); background: var(--surface-soft); border-radius: var(--r-1); white-space: pre-wrap; }
.guide-document h2, .guide-document h3 { margin-top: var(--s-7); }
.guide-document p, .guide-document ul, .guide-document ol { margin-top: var(--s-4); }
.guide-document table { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 640px) { .connect-main { padding: var(--s-6) var(--s-4); } .connect-main .card { padding: var(--s-4); } .connect-grid { grid-template-columns: 1fr; } }