/* site.css — the institutional design system for the sub pages: /connect, /privacy and /terms.
   A copy of the front page's own system (static/enterprise.html, the page John ruled on Sep 30:
   IBM Plex Sans and Mono at 400 to 600, the brand's dark set, the wordmark header, the quiet
   footer). John, Oct 5: "none of these pages look institutional at all, they're all different font
   and styles as well", then "The main website shouldn't be changed but agreed on editing the other
   sub pages".

   So the front page is the source and is never edited for this file: it keeps its own inline
   styles and does not link this one. Every rule here that the front page also has is copied from
   it verbatim, and tests/test_site_design_system.py fails if the two drift apart. What the sub
   pages need beyond it (running text, code, callouts, one AI's mark) is below, in the same tokens.

   Dark only, as the front page is: the wordmark and the monochrome logo marks are drawn for a dark
   ground. Served at /site/site.css by nginx from the checkout (deploy/nginx-site-locations.conf)
   and by the app's StaticFiles mount as the fallback; not under /assets/, which is the vite
   bundle's untracked, rebuilt directory (docs/deploy-discipline.md rule 2). No weight above 600. */

:root{color-scheme:dark;
  --bg:#060709; --bg2:#0e1014; --bg3:#1b1e26; --bg4:#252930;
  --line:#2a2f3a; --line2:#444d60;
  --tx:#e9ecf2; --tx2:#b9bfcd; --tx3:#7b849c;
  --blue:#4A9EFF; --up:#33b784; --down:#e0566b;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Helvetica Neue",sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:15px;line-height:1.6}
a{color:var(--blue);text-decoration:none}
a:hover{color:#7fbcff}
.wrap{max-width:1040px;margin:0 auto;padding-inline:20px}
.measure{max-width:620px}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
h1{font-size:clamp(30px,3.4vw,42px);line-height:1.15;letter-spacing:-.015em;margin:14px 0 14px;font-weight:500;text-wrap:balance;color:var(--tx)}
h2{font-size:clamp(22px,2.4vw,28px);line-height:1.25;letter-spacing:-.01em;margin:8px 0 12px;font-weight:500;text-wrap:balance}
h3{font-size:15px;margin:0 0 6px;font-weight:600}
p{margin:0 0 14px;color:var(--tx2)}
.lead{font-size:17px;color:var(--tx2)}
section{padding-block:60px;border-top:1px solid var(--bg3)}
section.first{border-top:0;padding-top:40px}

/* the header: the wordmark, the two product links and the button (John, Sep 30); on a phone the
   links drop to their own row under the wordmark and the button */
nav{display:flex;align-items:center;gap:24px;padding-block:20px;flex-wrap:wrap}
.brand img{height:28px;width:auto;display:block}
.navlinks{display:flex;gap:24px;align-items:center;margin-left:auto}
.navlinks a{color:var(--tx2);font-size:14px;font-weight:500}
.navlinks a:hover{color:var(--tx)}
nav .btn{flex:0 0 auto}
@media (max-width:700px){nav{gap:14px} .brand img{height:24px} .navlinks{order:3;flex:0 0 100%;margin-left:0;gap:20px} nav .btn{margin-left:auto;padding-inline:14px}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:6px;font-weight:500;font-size:14px;border:1px solid transparent;min-height:42px;font-family:inherit;cursor:pointer;white-space:nowrap}
.btn.primary{background:var(--blue);color:#060709}
.btn.primary:hover{background:#7fbcff;color:#060709}
.btn.ghost{border-color:var(--line2);color:var(--tx);background:transparent}
.btn.ghost:hover{border-color:var(--tx3);color:var(--tx)}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

/* panels, cards, lists */
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:18px 20px;margin-top:22px;min-width:0}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:760px){.cols3{grid-template-columns:1fr}}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:20px;min-width:0}
.card p{font-size:14px;margin-bottom:0}
.list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px;margin-top:22px}
@media (max-width:760px){.list{grid-template-columns:1fr}}
.list div{border-top:1px solid var(--line);padding-top:12px}
.list b{display:block;color:var(--tx);margin-bottom:4px;font-weight:600;font-size:15px}
.list span{color:var(--tx2);font-size:14px}
.quiet{color:var(--tx3);font-size:13px}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);border:1px solid var(--line);border-radius:3px;padding:2px 6px;white-space:nowrap}
.tag.live{color:var(--up);border-color:#33b78455}

/* logo strips: the marks as their owners draw them, in one colour, sized to read as one row */
.strip{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.strip .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);flex:0 0 100%}
.logos{display:flex;gap:32px 40px;flex-wrap:wrap;align-items:center}
.logos img{height:22px;width:auto;max-width:160px;display:block;opacity:.8;filter:brightness(0) invert(1)}
.logos img.stack{height:40px}
.logos img.two{height:32px}
.logos img.low{height:19px}
.logos img:hover{opacity:1}
.logos .fallback{font-weight:600;color:var(--tx2);font-size:15px;opacity:.8}
/* one AI's mark beside its own heading, drawn exactly as the strip draws it */
.ai-mark{height:22px;width:auto;max-width:160px;display:block;opacity:.85;filter:brightness(0) invert(1)}
.fallback{font-weight:600;color:var(--tx2);font-size:15px}

/* running text: the connect steps and the legal pages */
.doc{max-width:720px}
.doc h2{font-size:17px;line-height:1.35;letter-spacing:0;font-weight:600;margin:36px 0 10px;color:var(--tx)}
.doc h3{margin:20px 0 6px}
.doc p,.doc li{color:var(--tx2)}
.doc ul,.doc ol{margin:0 0 14px;padding-left:22px}
.doc li{margin:0 0 8px}
.doc li::marker{color:var(--tx3)}
.doc strong,.card strong,.doc b,.card b{color:var(--tx);font-weight:600}
.meta{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--tx3);margin:0 0 24px}
.callout{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:6px;padding:14px 16px;margin:0 0 24px}
.callout p{margin:0;font-size:14px}
.callout.draft{border-left-color:#d6a23a}
code,pre,kbd{font-family:var(--mono);font-size:13px}
code{background:var(--bg3);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--tx);overflow-wrap:anywhere}
pre{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:12px 14px;overflow-x:auto;color:var(--tx);margin:8px 0 0;line-height:1.5;-webkit-overflow-scrolling:touch}
pre code{background:none;border:0;padding:0;overflow-wrap:normal}

footer{padding-block:28px 56px;border-top:1px solid var(--bg3);color:var(--tx3);font-size:13px}
footer .frow{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--tx2)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.btn,.logos img,.navlinks a{transition:background .15s,border-color .15s,opacity .15s,color .15s}}