/* The juris connector page. Layered on styles.css, chambers.css (bands, hero,
   FAQ, form, reveal motion) and business.css (plan cards, pause button). This
   file holds only what the connector page has: the logo row, the hero
   conversation, the steps, the tool grid and the app chips. Tokens only. */

.cx-sprite{position:absolute; width:0; height:0; overflow:hidden}

/* Brand marks. Single-colour paths from simple-icons, drawn in each owner's
   colour, or in ink where the owner's mark is black. */
.lg{width:18px; height:18px; flex:none; fill:currentColor}
.lg-claude{color:#D97757}
.lg-openai, .lg-cursor{color:var(--ink)}
.lg-mistral{color:#FA520F}
.lg-perplexity{color:#1FB8CD}

/* ------------------------------------------------------------- hero --- */
.cx .ch-hero h1{max-width:16ch}
.cx-new{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
  font-size:var(--fs-sm); font-weight:600; color:var(--ink);
}
.cx-new-tag{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent-soft); border-radius:var(--r-pill); padding:4px 9px;
}

.cx-works{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:34px}
.cx-works-k{font-size:var(--fs-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.cx-logos{display:flex; flex-wrap:wrap; gap:8px 20px; list-style:none; margin:0; padding:0}
.cx-logos li{display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-sm); font-weight:600; color:var(--muted)}

/* Two columns from 1100px: the copy beside the conversation, inside the same
   1040px measure as the nav, so the right half is never empty and every left
   edge lines up with the wordmark. */
@media(min-width:1100px){
  .cx-hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,500px); gap:44px;
    align-items:center; max-width:1040px; margin:0 auto; padding:56px 20px 56px}
  .cx-hero > .wrap{max-width:none; padding:0; margin:0}
  .cx .cx-hero h1{font-size:clamp(2.4rem,3.4vw,3.1rem)}
}

/* ---- the conversation ---- */
.cx-stage{position:relative; max-width:640px; margin:40px auto 0; display:flex; flex-direction:column; align-items:center; gap:14px}
@media(min-width:1100px){ .cx .ch-hero-stage .cx-stage{margin-top:0} }

.cx-switch{
  position:relative; display:inline-flex; gap:2px; padding:3px;
  background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-pill); box-shadow:var(--shadow-1);
}
.cx-switch-ind{
  position:absolute; top:3px; bottom:3px; left:3px; width:0; border-radius:var(--r-pill);
  background:var(--ink); transition:transform .45s var(--ease), width .45s var(--ease);
}
.cx-switch-b{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px;
  min-height:38px; padding:0 16px; border:0; background:transparent; border-radius:var(--r-pill);
  font:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--muted); cursor:pointer;
  transition:color .3s var(--ease);
}
/* 38px drawn, 44px to the finger, the pattern .lang uses. */
.cx-switch-b::after{content:""; position:absolute; left:0; right:0; top:-3px; bottom:-3px}
.cx-switch-b[aria-selected="true"]{color:var(--canvas)}
.cx-switch-b[aria-selected="true"] .lg-openai{color:var(--canvas)}
.cx-switch-b:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
/* Without JavaScript there is no indicator to slide, so the selected tab paints itself. */
.cx-switch:not(.is-live) .cx-switch-b[aria-selected="true"]{background:var(--ink)}

.cx-win{
  position:relative; width:100%; overflow:hidden;
  background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-xl);
  box-shadow:var(--shadow-2);
}
.cx-win-top{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--hair); background:color-mix(in srgb, var(--canvas) 55%, var(--panel));
}
.cx-dots{display:inline-flex; gap:6px}
.cx-dots i{width:10px; height:10px; border-radius:50%; background:color-mix(in srgb, var(--ink) 14%, transparent)}
.cx-host{display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:600; color:var(--ink)}
.cx-linked{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:var(--fs-xs); font-weight:600; color:var(--verified-ink);
  background:color-mix(in srgb, var(--verified) 11%, transparent); border-radius:var(--r-pill); padding:4px 10px;
}
.cx-linked i{width:7px; height:7px; border-radius:50%; background:var(--verified)}

/* One window, two hosts: only the chrome that names the host changes. */
.cx-win[data-host="claude"] .cx-host-chatgpt,
.cx-win[data-host="chatgpt"] .cx-host-claude{display:none}

.cx-body{display:flex; flex-direction:column; gap:12px; padding:20px 18px 22px; min-height:420px}
@media(min-width:560px){ .cx-body{padding:24px 24px 26px} }

.cx-you{
  align-self:flex-end; max-width:86%; margin:0 0 4px;
  background:var(--accent-soft); color:var(--ink); border-radius:18px 18px 6px 18px;
  padding:11px 15px; font-size:var(--fs-md); line-height:1.45;
}
.cx-win[data-host="chatgpt"] .cx-you{background:var(--panel-2); border-radius:22px}

.cx-call{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:10px;
  align-items:center; padding:10px 12px; border:1px solid var(--hair); border-radius:var(--r-md);
  background:color-mix(in srgb, var(--canvas) 40%, var(--panel));
}
.cx-call-ic{grid-row:1 / span 2}
.mark.mini{width:26px; height:26px; border-radius:8px}
.mark.mini .scales{width:14px; height:14px}
.cx-call-t{font-size:var(--fs-sm); color:var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cx-call-k{font-weight:600; color:var(--ink)}
.cx-call-t code, .cx-tool-name, .cx-url code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
.cx-call-t code{font-size:13px; color:var(--ink)}
.cx-call-s{display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-xs); color:var(--verified-ink); font-weight:600}
.cx-call-done:before{content:"\2713"; margin-right:5px}
.cx-spin{display:none; width:12px; height:12px; border-radius:50%; border:2px solid color-mix(in srgb, var(--ink) 15%, transparent); border-top-color:var(--ink)}

.cx-ans{display:flex; gap:12px; align-items:flex-start; margin-top:2px}
.cx-ans-av{display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:50%; background:color-mix(in srgb, var(--canvas) 60%, var(--panel)); border:1px solid var(--hair)}
.cx-ans-av .lg{width:16px; height:16px}
.cx-ans-body p{margin:0 0 8px; font-size:var(--fs-md); line-height:1.55; color:var(--ink)}
.cx-ans-body p:last-child{margin:0}
.cx-ans-body .cite{margin-left:2px}

.cx-src{
  margin:4px 0 0 40px; padding:14px 16px; border-radius:var(--r-lg);
  border:1px solid var(--hair); background:var(--panel); box-shadow:var(--shadow-1);
}
.cx-src-k{margin:0 0 6px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink)}
.cx-src-code{margin:0; font-weight:700; font-size:var(--fs-sm); color:var(--ink)}
.cx-src-title{margin:2px 0 8px; font-family:var(--font-display); font-size:var(--fs-lg); color:var(--ink)}
.cx-src-meta{display:flex; flex-wrap:wrap; gap:4px 14px; margin:0; font-size:var(--fs-xs); color:var(--muted)}
.cx-status{color:var(--verified-ink); font-weight:600}

.cx-pause{align-self:center}
.cx-stage:not(.is-anim) .cx-pause{display:none}

/* ---- conversation motion ----
   Only under html.js-motion and only once connector.js has taken the stage
   (.is-anim): data-step walks 0 (typing) to 9 (done). A block with
   data-cx-at="n" shows from step n; a call spins at step n and ticks at n+1.
   Without either class every step is simply there, finished. */
.js-motion .cx-stage.is-anim [data-cx-at]{
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.js-motion .cx-stage.is-anim .cx-win[data-step="0"] [data-cx-at],
.js-motion .cx-stage.is-anim .cx-win[data-step="1"] [data-cx-at],
.js-motion .cx-stage.is-anim .cx-win[data-step="2"] [data-cx-at]:not([data-cx-at="2"]),
.js-motion .cx-stage.is-anim .cx-win[data-step="3"] [data-cx-at="4"],
.js-motion .cx-stage.is-anim .cx-win[data-step="3"] [data-cx-at="6"],
.js-motion .cx-stage.is-anim .cx-win[data-step="3"] [data-cx-at="8"],
.js-motion .cx-stage.is-anim .cx-win[data-step="4"] [data-cx-at="6"],
.js-motion .cx-stage.is-anim .cx-win[data-step="4"] [data-cx-at="8"],
.js-motion .cx-stage.is-anim .cx-win[data-step="5"] [data-cx-at="6"],
.js-motion .cx-stage.is-anim .cx-win[data-step="5"] [data-cx-at="8"],
.js-motion .cx-stage.is-anim .cx-win[data-step="6"] [data-cx-at="8"],
.js-motion .cx-stage.is-anim .cx-win[data-step="7"] [data-cx-at="8"]{
  opacity:0; transform:translateY(8px);
}
/* A call is working at its own step, done from the next. */
.js-motion .cx-stage.is-anim .cx-win[data-step="2"] [data-cx-at="2"] .cx-spin,
.js-motion .cx-stage.is-anim .cx-win[data-step="4"] [data-cx-at="4"] .cx-spin{display:inline-block; animation:cx-spin .8s linear infinite}
.js-motion .cx-stage.is-anim .cx-win[data-step="2"] [data-cx-at="2"] .cx-call-done,
.js-motion .cx-stage.is-anim .cx-win[data-step="4"] [data-cx-at="4"] .cx-call-done{display:none}
@keyframes cx-spin{to{transform:rotate(360deg)}}
/* The caret while the question types itself. */
.cx-caret{display:inline-block; width:2px; height:1.1em; margin-left:2px; vertical-align:-3px; background:var(--accent); animation:cx-blink 1s steps(1) infinite}
@keyframes cx-blink{50%{opacity:0}}
.cx-win:not([data-step="0"]) .cx-caret{display:none}
/* The answer's citations land after its words. */
.js-motion .cx-stage.is-anim .cx-ans .cite{transition:opacity .35s var(--ease) .5s, transform .35s var(--ease) .5s}
.js-motion .cx-stage.is-anim .cx-win[data-step="6"] .cx-ans .cite{opacity:0; transform:scale(.9)}

@media (prefers-reduced-motion: reduce){
  .cx-switch-ind{transition:none}
}

/* ------------------------------------------------------------ steps --- */
.cx-steps{list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){ .cx-steps{grid-template-columns:repeat(3, minmax(0,1fr))} }
.cx-step{
  display:flex; flex-direction:column; gap:8px; min-width:0;
  background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-xl); padding:24px;
  box-shadow:var(--shadow-1);
}
.cx-step-n{
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--ink); color:var(--canvas); font-weight:700; font-size:var(--fs-sm);
}
.cx-step h3{margin:6px 0 0; font-family:var(--font-display); font-weight:400; font-size:var(--fs-xl); color:var(--ink)}
.cx-step p{margin:0; color:var(--muted); font-size:var(--fs-md); line-height:1.55}

.cx-url{
  display:flex; align-items:center; gap:8px; margin-top:8px; padding:5px 5px 5px 14px;
  border:1px solid var(--hair); border-radius:var(--r-md); background:color-mix(in srgb, var(--canvas) 50%, var(--panel));
  min-width:0;
}
.cx-url code{flex:1; min-width:0; font-size:var(--fs-sm); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cx-copy{
  flex:none; min-height:var(--tap); min-width:var(--tap); padding:0 14px; border:0; border-radius:var(--r-sm);
  background:var(--primary-fill); color:var(--primary-fg); font:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
}
.cx-copy:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.cx-copy.is-done{background:var(--verified-ink)}

/* ------------------------------------------------------------ tools --- */
.cx-count{color:var(--ink); font-weight:600}
.cx-count[hidden]{display:none}
.cx-tools{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){
  .cx-tools{grid-template-columns:repeat(2, minmax(0,1fr))}
  .cx-tool-juris{grid-column:1 / -1}
}
@media(min-width:1040px){
  .cx-tools{grid-template-columns:repeat(3, minmax(0,1fr))}
  .cx-tool-wide{grid-column:span 2}
  .cx-tool-juris{grid-column:1 / -1}
}
.cx-tool{
  position:relative; display:flex; flex-direction:column; gap:8px;
  background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-xl); padding:24px;
  box-shadow:var(--shadow-1); transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.cx-tool-ic{
  display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
  background:var(--accent-2-soft); color:var(--accent-2-ink);
}
.cx-tool-ic svg{width:20px; height:20px}
.cx-tool-juris .cx-tool-ic{background:transparent}
.cx-tool-juris .mark.mini{width:40px; height:40px; border-radius:12px}
.cx-tool-juris .mark.mini .scales{width:20px; height:20px}
.cx-tool h3{margin:6px 0 0; font-family:var(--font-display); font-weight:400; font-size:var(--fs-xl); color:var(--ink)}
.cx-tool p{margin:0; color:var(--muted); font-size:var(--fs-md); line-height:1.55; flex:1}
.cx-tool-name{align-self:flex-start; margin-top:8px; font-size:var(--fs-xs); color:var(--faint); background:color-mix(in srgb, var(--ink) 5%, transparent); border-radius:6px; padding:3px 8px}
.cx-tool-juris{background:linear-gradient(160deg, var(--panel) 40%, color-mix(in srgb, var(--accent-soft) 70%, var(--panel)))}
@media (hover:hover) and (pointer:fine){
  .cx-tool:hover{transform:translateY(-2px); box-shadow:var(--shadow-2)}
}

.cx-tool-demo{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.cx-pass{
  display:inline-flex; align-items:center; gap:10px; padding:8px 12px;
  border:1px solid var(--hair); border-radius:var(--r-md); background:color-mix(in srgb, var(--canvas) 40%, var(--panel));
  font-size:var(--fs-sm);
}
.cx-pass b{font-weight:600; color:var(--ink)}
.cx-pass i{font-style:normal; font-size:var(--fs-xs); font-weight:600; border-radius:var(--r-pill); padding:2px 8px}
.cx-pass i.ok{color:var(--verified-ink); background:color-mix(in srgb, var(--verified) 12%, transparent)}
.cx-pass i.off{color:var(--unverified-ink); background:color-mix(in srgb, var(--unverified) 10%, transparent)}

/* ------------------------------------------------------------ trust --- */
.cx-trust{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:900px){ .cx-trust{grid-template-columns:repeat(3, 1fr)} }
.cx-trust .panel h3{margin:0 0 8px; font-family:var(--font-display); font-weight:400; font-size:var(--fs-xl); color:var(--ink)}
.cx-trust .panel p{margin:0; color:var(--muted); line-height:1.6}

/* --------------------------------------------------------- packages --- */
.cx-packs{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:900px){ .cx-packs{grid-template-columns:repeat(3, 1fr)} }
.cx-packs .ch-list{margin-bottom:0}
.cx-packs-cta{display:flex; justify-content:center; margin-top:28px}

/* ------------------------------------------------------------- form --- */
.cx-apps{border:0; margin:4px 0 14px; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.cx-apps legend{padding:0; margin-bottom:8px; font-size:var(--fs-sm); font-weight:600; color:var(--ink)}
.cx-chip{position:relative; display:inline-flex}
.cx-chip input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.cx-chip span{
  display:inline-flex; align-items:center; gap:8px; min-height:var(--tap); padding:0 16px;
  border:1px solid var(--hair); border-radius:var(--r-pill); background:var(--panel);
  font-size:var(--fs-sm); font-weight:600; color:var(--muted); transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.cx-chip input:checked + span{background:var(--ink); border-color:var(--ink); color:var(--canvas)}
.cx-chip input:checked + span .lg-openai{color:var(--canvas)}
.cx-chip input:focus-visible + span{outline:2px solid var(--focus); outline-offset:2px}

.cx-inline{color:var(--accent-ink)}
.cx-marks{flex-basis:100%; order:3; font-size:var(--fs-xs)}