/* /connect: how to add Timepoint to Claude, ChatGPT and Claude Code.
   Linked from site/templates/connect.html itself, so no shared stylesheet
   or layout changes. Colours are the theme tokens, so both themes follow. */
.tp-page-connect .cn-hero { padding: 120px 24px 8px; }
.cn-sec { padding-top: 36px; scroll-margin-top: 90px; }
.cn-sec h2 {
  font-family: var(--serif, Georgia, serif);
  font-weight: 600;
  font-size: 1.7rem;
  margin: 0 0 12px;
  color: var(--ivory, #1a1510);
}
.cn-last { padding-bottom: 56px; }

.cn-url {
  max-width: 640px;
  margin: 18px 0 0;
  padding: 12px 16px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #d8d0c4);
  border-left: 3px solid var(--gold, #8f661d);
}
.cn-url-label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dim, #6e4d12);
}
.cn-url code {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 1rem;
  color: var(--ivory, #1a1510);
  overflow-wrap: anywhere;
  user-select: all;
}

.cn-jump { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 16px 0 0; padding: 0; font-size: 0.95rem; }
.cn-jump a, .cn-sec a { color: var(--gold-dim, #6e4d12); }

.cn-steps, .cn-points { max-width: 680px; margin: 0; padding-left: 1.4em; color: var(--text-primary, #2d2520); }
.cn-steps li, .cn-points li { padding: 5px 0; line-height: 1.55; }
.cn-note { max-width: 680px; margin: 12px 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--text-secondary, #6b6055); }
.cn-sec .lp-code { margin: 0; }

.cn-can {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 940px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.cn-can li {
  padding: 14px 16px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #d8d0c4);
  border-radius: 12px;
}
.cn-can h3 { margin: 0 0 4px; font-size: 1.05rem; color: var(--ivory, #1a1510); }
.cn-can p { margin: 0; line-height: 1.5; color: var(--text-primary, #2d2520); }

.cn-try { margin: 26px 0 10px; font-family: var(--mono, ui-monospace, monospace); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dim, #6e4d12); }
.cn-prompts { list-style: none; max-width: 720px; margin: 0; padding: 0; }
.cn-prompts li {
  margin: 0 0 10px;
  padding: 6px 0 6px 14px;
  border-left: 3px solid var(--gold, #8f661d);
  font-family: var(--serif, Georgia, serif);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--ivory, #1a1510);
}

@media (max-width: 760px) {
  .tp-page-connect .cn-hero { padding: 104px 16px 8px; }
  .cn-sec h2 { font-size: 1.45rem; }
  .cn-can { grid-template-columns: 1fr; }
}