/* The connect page only. Every colour comes from a base.css token — no new hex
   values — so the palette stays in one place.

   The page has one job: get a URL out of here and into somebody's AI client.
   So the numbered steps are the loudest thing on it, the URL field is the widest
   element on the page, and everything else — per-client commands, the tool
   table, the caveats — sits below the fold in the same brochure grammar as the
   rest of the site. */

.connect-head{padding:22px 0 8px;max-width:940px}
.connect-head h1{font-size:clamp(34px,5.4vw,52px);letter-spacing:-.012em;margin:0 0 14px}
.connect-head .sub{font-size:17.5px;line-height:1.55;max-width:56ch;margin:0 0 30px}

/* ------------------------------------------------------------------- steps */
/* The stone card and the counters are the one place this page raises its voice.
   Everything a first-time visitor needs is inside this box. */
.steps{background:var(--card);border:1px solid var(--line);border-top:2px solid var(--rule);
  border-radius:0 0 6px 6px;padding:30px 30px 26px;margin:0 0 12px}
.steps ol{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.steps .n{font-family:var(--display);font-weight:600;font-size:34px;line-height:.95;
  color:var(--rule);font-variant-numeric:tabular-nums;min-width:1.1em}
.step-body{min-width:0}
.step-title{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.3;margin:0 0 10px}
.step-note{margin:0;color:var(--muted);font-size:15px;line-height:1.65;max-width:58ch}

/* ------------------------------------------------------------------ the URL */
/* A readonly input rather than a <code> block, because the fallback when the
   Clipboard API is unavailable or refused has to be selecting the text by hand,
   and an input makes that one gesture instead of a careful drag. */
.urlbox{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;max-width:640px}
.urlbox input{flex:1;min-width:240px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15px;padding:13px 15px;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:4px}
.urlbox input:focus{outline:2px solid var(--accent);outline-offset:1px}
.urlbox .btn{padding:13px 22px;min-width:96px}
.urlbox .btn.copied{background:var(--good);border-color:var(--good)}

/* --------------------------------------------------------------- per-client */
/* align-items:start, or a card with two lines of text stretches to match the
   tallest one in its row and ends in a pool of empty stone. */
.clients{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;
  align-items:start}
.client{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:20px}
.client .label{margin:0 0 12px}
.client-note{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 14px;max-width:50ch}
.client pre{position:relative;margin:0;background:var(--bg);border:1px solid var(--line);
  border-radius:4px;padding:14px 62px 14px 14px;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.6;
  /* Wrap at spaces first and only break inside a token when there is no space to
     break at — otherwise `--transport` splits across two lines and the reader
     has to reassemble a command they are about to run. */
  white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere}
.copy-mini{position:absolute;top:8px;right:8px;border:1px solid var(--line);background:var(--card);
  color:var(--muted);border-radius:3px;padding:4px 9px;font-family:var(--ui);font-size:11.5px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.copy-mini:hover{color:var(--accent);border-color:var(--accent)}
.copy-mini.copied{color:var(--good);border-color:var(--good)}
.deeplinks{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.deeplinks .btn{text-decoration:none;display:inline-block}

/* ------------------------------------------------------------- tools table */
.tools{width:100%;border-collapse:collapse;font-size:15px}
.tools th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--muted);font-weight:700;padding:0 14px 8px 0;border-bottom:1px solid var(--line)}
.tools td{padding:14px 14px 14px 0;border-bottom:1px solid var(--line);
  color:var(--muted);line-height:1.6;vertical-align:top}
.tools td:first-child{white-space:nowrap;color:var(--ink)}
.tools code{font-size:13.5px}

/* Prose links, in the client notes and the small print. Without this they fall
   back to the browser default — a raw blue underline, which on this palette
   reads as an unstyled page rather than a link. Same treatment as the landing
   page's: accent ink, hairline underneath, which firms up on hover. */
.client-note a,
.caveats a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line)}
.client-note a:hover,
.caveats a:hover{border-bottom-color:var(--accent)}

/* ---------------------------------------------------------------- caveats */
.caveats p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 16px;max-width:74ch}
.caveats b{color:var(--ink);font-weight:600}
.notsurvey{font-style:italic}

/* Section furniture, borrowed from the landing page so the two do not drift. */
.sec{border-top:1px solid var(--line);padding:44px 0 8px;margin-top:36px}
.sec h2{font-family:var(--display);font-weight:600;font-size:27px;letter-spacing:-.005em;margin:0 0 8px}
.sec .intro{color:var(--muted);max-width:68ch;margin:0 0 26px}
.sec-head{margin:0 0 24px}

@media (max-width:560px){
  .steps{padding:24px 18px 20px}
  .steps li{gap:14px}
  .steps .n{font-size:27px}
}