.connection-hero { padding-block: 66px 76px; }
.connection-promise { margin: 24px 0 0; color: var(--primary-strong); font-weight: 750; }
.connection-guide .number-badge { margin-bottom: 20px; }
.connection-guide code { overflow-wrap: anywhere; font-size: .93em; }
.connection-guide .button { color: var(--ink); cursor: pointer; }
.copy-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: center; padding: 20px; margin: 20px 0; border: 1px solid var(--line); border-radius: 16px; background: var(--background); }
.copy-label { grid-column: 1 / -1; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.copy-field code { min-width: 0; user-select: all; color: var(--ink); line-height: 1.7; }
.copy-button { min-height: 44px; padding: 8px 16px; font-size: 14px; }
.copy-button[hidden] { display: none; }
.connection-guide .copy-status { min-height: 1.6em; margin: -8px 0 16px; font-size: 13px; color: var(--primary-strong); }
.connection-settings { margin: 20px 0 28px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.connection-settings > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 17px 20px; }
.connection-settings > div + div { border-top: 1px solid var(--line); }
.connection-settings dt, .connection-settings dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.connection-settings dt { color: var(--muted); }
.connection-settings dd { font-weight: 650; }
.connection-guide .example-prompts { padding: 0; list-style: none; }
.example-prompts li { padding: 18px 22px; border-radius: 14px; background: var(--soft-sage); }
.connection-guide .support-list { margin-block: 26px; }
.connection-guide .guide-reviewed { margin-top: 30px; font-size: 13px; }
@media (max-width: 600px) {
  .connection-hero { padding-block: 42px 56px; }
  .connection-hero h1 { font-size: clamp(36px, 9vw, 50px); }
  .connection-hero .page-summary { font-size: 18px; }
  .connection-settings > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .copy-field { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .copy-button { justify-self: start; }
  .connection-guide .support-list details > div { padding-right: 4px; }
}