.connect-page {
  padding: 48px 0 72px;
  max-width: 760px;
}

.connect-page h1 {
  font-size: clamp(30px, 5vw, 42px);
  margin-bottom: 16px;
}

.connect-page .lede {
  font-size: 17px;
  margin-bottom: 8px;
}

.connect-page section {
  margin-top: 44px;
}

.connect-page h2 {
  font-size: 22px;
  margin-bottom: 12px;
}

.connect-page h3 {
  font-size: 16px;
  margin: 20px 0 8px;
}

.connect-page p,
.connect-page li {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.connect-page ol,
.connect-page ul {
  padding-left: 22px;
  margin: 8px 0;
}

.connect-page li { margin-bottom: 6px; }

.connect-page strong { color: var(--text); }

.connect-page a { color: var(--accent); }

.connect-page p > code,
.connect-page li > code {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 13px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.copy-block {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0;
}

.copy-block .copy-button {
  padding: 10px 14px;
}

.copy-block code {
  min-width: 0;
  flex: 1;
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.aside {
  font-size: 13px;
}

.connect-page section { scroll-margin-top: 24px; }
.connect-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.connect-nav a { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.setup-summary { padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.setup-summary p { margin-bottom: 0; }
.manual-setup { margin-top: 20px; border: 1px solid var(--line); border-radius: 10px; padding: 0 16px 12px; }
.manual-setup summary { color: var(--text); cursor: pointer; padding: 14px 0; font-weight: 600; }
.manual-setup:not([open]) { padding-bottom: 0; }
.connect-page :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.connect-page .copy-button { min-height: 44px; flex-shrink: 0; }
.verification-steps li { padding-bottom: 10px; }
.compatibility-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.compatibility-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 1.5; }
.compatibility-table caption { text-align: left; padding: 14px; color: var(--muted); }
.compatibility-table th, .compatibility-table td { text-align: left; vertical-align: top; padding: 14px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.compatibility-table thead { background: var(--panel); }
.compatibility-table th:first-child { width: 23%; }
.compatibility-table td { color: var(--muted); }
.table-scroll-hint { display: none; }

@media (max-width: 560px) {
  .connect-page { padding-top: 28px; }
  .copy-block { flex-direction: column; }
  .copy-block code { width: 100%; }
  .compatibility-table { min-width: 560px; }
  .table-scroll-hint { display: block; }
  .connect-nav a { flex: 1 1 42%; text-align: center; }
}