/* ===========================================================================
   LinkEdge design system — dark-first, type-led.

   The restraint is in the element count, not the scale: few things on the page,
   but the type is large and confident. Rules that keep it coherent:
     - One accent hue (violet). Headline gradient, links, primary button. Nothing else.
     - Hairlines and space separate things; shadows only on things that float.
     - No gradients except the headline and the logo node.
     - No emoji in the UI, anywhere.
   =========================================================================== */

:root{
  --accent:#8b5cf6; --accent-hi:#a78bfa; --accent-fg:#fff;
  --good:#3fb98a; --warn:#d4a24c; --danger:#f0736b;

  --bg:#08080b;
  --surface:#101014;
  --surface-2:#17171d;
  --border:#22222a;
  --border-hi:#31313b;

  --fg:#f2f2f4;
  --fg-muted:#9d9daa;
  --fg-subtle:#6b6b78;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --r:7px; --r-lg:10px;
  --nav-h:56px;
  --ease:cubic-bezier(.4,0,.2,1);
}

@media (prefers-color-scheme: light){
  :root{
    --accent:#6d4df0; --accent-hi:#8b6df5;
    --good:#0f9d63; --warn:#b7791f; --danger:#dc2626;
    --bg:#fbfbfc; --surface:#fff; --surface-2:#f5f5f8;
    --border:#e6e6ea; --border-hi:#d2d2d9;
    --fg:#111114; --fg-muted:#5d5d6b; --fg-subtle:#8a8a97;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  font-size:15px;line-height:1.6;
  background:var(--bg);color:var(--fg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-hi);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:rgba(139,92,246,.28)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

h1,h2,h3{margin:0 0 .5em;font-weight:600;line-height:1.25;letter-spacing:-.015em}
h1{font-size:30px}
h2{font-size:18px}
h3{font-size:14px;margin:24px 0 6px}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.muted{color:var(--fg-muted)}
.hint{font-size:13.5px;color:var(--fg-muted);line-height:1.65}
.lede{font-size:16px;color:var(--fg-muted)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  color:var(--fg-subtle)}

/* ------------------------------------------------------------- controls */
button,select,input,textarea{
  font:inherit;color:var(--fg);background:var(--surface);
  border:1px solid var(--border-hi);border-radius:var(--r);padding:8px 11px;
  transition:border-color .12s var(--ease),background .12s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--fg-subtle)}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
button{cursor:pointer;font-size:14px}
button:hover{background:var(--surface-2)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);
  font-weight:500}
.btn-primary:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.btn-lg{padding:11px 22px;font-size:15px;border-radius:999px}
.btn-ghost{background:transparent}
.btn-danger{background:transparent;border-color:var(--border-hi);color:var(--danger)}
.btn-danger:hover{border-color:var(--danger)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
textarea{min-height:130px;resize:vertical;line-height:1.6}

/* ------------------------------------------------------------------- nav */
.brand{display:inline-flex;align-items:center;color:var(--fg);font-weight:600;
  font-size:15px;letter-spacing:.2em}
.brand:hover{text-decoration:none}
/* The logo is the wordmark: the "I" is a graph node on a stem. */
/* Sized to cap height with the stem foot on the baseline, so it sets as a letter
   rather than an icon dropped into the word. Width is derived from the viewBox. */
.glyph-i{height:.73em;width:auto;margin:0 .2em 0 .14em;vertical-align:baseline}
.glyph-i .node{fill:var(--accent)}

nav{display:flex;align-items:center;gap:24px}
nav .spacer{flex:1}
nav .navlink{font-size:13.5px;color:var(--fg-muted);letter-spacing:.01em}
nav .navlink:hover{color:var(--fg);text-decoration:none}
.navbtn{padding:6px 14px;font-size:13px;border-radius:999px;background:transparent}
.navbtn.primary{background:var(--fg);border-color:var(--fg);color:var(--bg);
  font-weight:500}
.navbtn.primary:hover{opacity:.86;background:var(--fg)}

/* Floating pill on marketing pages. */
nav.pill{position:fixed;top:14px;left:14px;right:14px;height:var(--nav-h);
  padding:0 12px 0 22px;z-index:40;border-radius:999px;
  border:1px solid var(--border);background:rgba(16,16,20,.72);
  backdrop-filter:saturate(150%) blur(14px)}
@media (prefers-color-scheme: light){
  nav.pill{background:rgba(255,255,255,.78)}
}
@supports not (backdrop-filter:blur(1px)){
  nav.pill{background:var(--surface)}
}
body.site-page{padding-top:calc(var(--nav-h) + 28px)}

/* Solid bar inside the app, where a floating pill would sit over the table. */
nav.bar{height:var(--nav-h);padding:0 20px;border-bottom:1px solid var(--border);
  background:var(--surface);position:sticky;top:0;z-index:30}

/* ------------------------------------------------------------ page shell */
.wrap{max-width:680px;margin:0 auto;padding:56px 24px 110px}
.card{border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;
  margin-bottom:16px;background:var(--surface)}
.field{margin:16px 0}
.field label{display:block;font-size:13px;font-weight:500;color:var(--fg-muted);
  margin-bottom:5px}
.field input,.field select,.field textarea{width:100%}
.alert{padding:10px 13px;border-radius:var(--r);font-size:13.5px;margin-bottom:16px;
  border:1px solid}
.alert-err{background:rgba(240,115,107,.07);border-color:rgba(240,115,107,.4);
  color:var(--danger)}
.alert-ok{background:rgba(63,185,138,.07);border-color:rgba(63,185,138,.4);
  color:var(--good)}

/* --------------------------------------------------------------- landing */
.hero{position:relative;text-align:center;padding:104px 24px 88px;overflow:hidden}
/* A single soft violet bloom. One light source, nothing else. */
.hero::before{content:"";position:absolute;left:50%;top:-30%;translate:-50% 0;
  width:min(1100px,150vw);height:760px;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,
    rgba(139,92,246,.30) 0%,rgba(139,92,246,.11) 38%,transparent 68%)}
@media (prefers-color-scheme: light){
  .hero::before{background:radial-gradient(ellipse at center,
    rgba(109,77,240,.16) 0%,rgba(109,77,240,.06) 40%,transparent 70%)}
}
.hero > *{position:relative;z-index:1}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;
  color:var(--fg-subtle);margin:0 0 26px}
.display{
  font-size:clamp(40px,7.6vw,94px);
  line-height:.98;letter-spacing:-.035em;font-weight:600;
  margin:0 auto 30px;max-width:15ch;
  background:linear-gradient(180deg,var(--accent-hi) 12%,var(--accent) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.06em;
}
.hero .lede{font-size:17px;max-width:56ch;margin:0 auto 34px;line-height:1.62}
.hero-note{font-size:12.5px;color:var(--fg-subtle);margin-top:20px;
  font-family:var(--mono);letter-spacing:.08em}

/* The slot a reference site fills with client logos. We have no clients, so it
   carries measured facts about the product instead of borrowed credibility. */
.factstrip{display:flex;flex-wrap:wrap;justify-content:center;gap:26px 56px;
  padding:44px 24px 56px;max-width:900px;margin:0 auto 44px;
  border-bottom:1px solid var(--border)}
.fact{text-align:center}
.fact .v{font-size:19px;font-weight:600;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;color:var(--fg)}
.fact .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--fg-subtle);margin-top:2px}

.section{max-width:680px;margin:0 auto;padding:0 24px 64px}
.section > h2{font-family:var(--mono);font-size:12px;font-weight:400;
  letter-spacing:.16em;color:var(--fg-subtle);text-transform:uppercase;
  padding-bottom:16px;margin-bottom:26px;border-bottom:1px solid var(--border)}

.steps{display:flex;flex-direction:column;gap:26px}
.stepitem{display:grid;grid-template-columns:26px 1fr;gap:16px;align-items:start}
.stepitem .num{font-family:var(--mono);font-size:12px;color:var(--fg-subtle);
  padding-top:3px}
.stepitem b{display:block;font-weight:560;margin-bottom:3px;font-size:15px}
.stepitem p{font-size:13.5px;color:var(--fg-muted);margin:0;line-height:1.65}

.qa{border-top:1px solid var(--border);padding-top:20px;margin-top:20px}
.qa:first-of-type{border-top:none;padding-top:0;margin-top:0}
.qa b{display:block;font-weight:560;font-size:14.5px;margin-bottom:5px}
.qa p{font-size:13.5px;color:var(--fg-muted);margin:0;line-height:1.65}

.note{font-size:13px;color:var(--fg-muted);border-left:2px solid var(--border-hi);
  padding-left:15px;line-height:1.65}

footer{border-top:1px solid var(--border);padding:24px;color:var(--fg-subtle);
  font-size:12.5px}
footer .inner{max-width:680px;margin:0 auto;display:flex;gap:16px;flex-wrap:wrap;
  align-items:center}
footer a{color:var(--fg-subtle)}
footer a:hover{color:var(--fg-muted)}
footer .spacer{flex:1}

/* ------------------------------------------------------------------- auth */
.auth-wrap{max-width:348px;margin:0 auto;padding:64px 24px 110px}
.auth-wrap h1{font-size:24px;margin-bottom:6px;letter-spacing:-.02em}
.tick{display:flex;gap:9px;align-items:baseline;margin-top:10px;font-size:13px;
  color:var(--fg-muted)}
.tick .mark{color:var(--good);flex:none;font-size:11px}

/* Demo banner. Must be unmissable -- a visitor who mistakes sample data for their
   own network is a far worse outcome than a slightly loud bar. */
.demobar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:10px 20px;font-size:13px;color:var(--fg);
  background:rgba(139,92,246,.13);border-bottom:1px solid var(--accent);
  min-height:44px}
.demobar b{color:var(--accent-hi)}
.demobar a{margin-left:auto}

/* -------------------------------------------------------------- app view */
.app{display:grid;grid-template-columns:238px 1fr;height:calc(100vh - var(--nav-h))}
.app.with-demobar{height:calc(100vh - var(--nav-h) - 45px)}
aside{background:var(--surface);border-right:1px solid var(--border);
  overflow-y:auto;padding:16px 12px}
.facet{margin-bottom:18px}
.facet>summary,.facet>.sumlabel{cursor:pointer;font-family:var(--mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.13em;color:var(--fg-subtle);
  padding:4px;user-select:none;list-style:none;display:flex;
  justify-content:space-between;align-items:center}
.facet>summary::-webkit-details-marker{display:none}
.facet>summary::after{content:"›";font-size:14px;transition:transform .15s var(--ease)}
.facet[open]>summary::after{transform:rotate(90deg)}
.facet .opts{max-height:220px;overflow-y:auto;margin-top:3px}
.opt{display:flex;align-items:center;gap:8px;padding:4px 5px;border-radius:var(--r);
  cursor:pointer}
.opt:hover{background:var(--surface-2)}
.opt input{margin:0;accent-color:var(--accent);width:13px;height:13px;padding:0}
.opt .lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.opt .n{color:var(--fg-subtle);font-size:11px;font-variant-numeric:tabular-nums}
.preset{font-size:13px;padding:6px 8px;text-align:left;width:100%;margin-bottom:2px;
  background:transparent;border-color:transparent;color:var(--fg-muted);font-weight:400}
.preset:hover{background:var(--surface-2);color:var(--fg)}

main{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.toolbar{display:flex;gap:9px;align-items:center;padding:11px 16px;
  border-bottom:1px solid var(--border);background:var(--surface);flex-wrap:wrap}
.toolbar input[type=text]{flex:1;min-width:170px}
.count{color:var(--fg-subtle);font-family:var(--mono);font-size:11.5px;
  white-space:nowrap;letter-spacing:.06em}
.tablewrap{flex:1;overflow:auto}
table{width:100%;border-collapse:collapse}
th{position:sticky;top:0;background:var(--surface);text-align:left;
  font-family:var(--mono);font-size:10.5px;font-weight:400;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fg-subtle);padding:10px 14px;
  border-bottom:1px solid var(--border);z-index:2}
td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:top;
  font-size:13.5px}
/* Connected-on and Status must never wrap; the classification column absorbs slack. */
td:nth-child(4),td:nth-child(5),th:nth-child(4),th:nth-child(5){white-space:nowrap;
  width:1%}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface-2)}
.nm{font-weight:560}
.sm{color:var(--fg-muted);font-size:12.5px}

.chip{display:inline-block;border:1px solid var(--border-hi);border-radius:4px;
  padding:1px 6px;font-size:11px;margin:1px 3px 1px 0;white-space:nowrap;
  color:var(--fg-muted);background:transparent}
.chip.ai{border-color:var(--accent);color:var(--accent-hi)}
.chip.tag{border-color:var(--good);color:var(--good)}
.chip.inf{opacity:.6;font-style:italic}
.badge{font-size:11px;padding:1px 7px;border-radius:4px;font-weight:500;
  text-transform:capitalize;border:1px solid var(--border-hi);color:var(--fg-muted)}
.s-none{border-color:transparent;color:var(--fg-subtle)}
.s-target{border-color:var(--warn);color:var(--warn)}
.s-drafted{color:var(--fg-muted)}
.s-sent{border-color:var(--accent);color:var(--accent-hi)}
.s-replied,.s-meeting{border-color:var(--good);color:var(--good)}
.s-closed{opacity:.5}
.empty{padding:64px 24px;text-align:center;color:var(--fg-muted);font-size:14px}

/* ------------------------------------------------------- drawer / modal */
.drawer{position:fixed;top:0;right:0;width:436px;max-width:96vw;height:100vh;
  background:var(--surface);border-left:1px solid var(--border);padding:22px;
  overflow-y:auto;transform:translateX(102%);transition:transform .2s var(--ease);
  z-index:60;box-shadow:-24px 0 48px -24px rgba(0,0,0,.5)}
.drawer.open{transform:none}
.drawer h2{margin:0 0 2px;font-size:17px}
.close{float:right;background:none;border:none;font-size:19px;color:var(--fg-subtle);
  padding:0 5px;line-height:1}
.close:hover{color:var(--fg);background:none}
.modal{position:fixed;inset:0;background:rgba(4,4,6,.66);display:none;z-index:70;
  align-items:center;justify-content:center;padding:22px}
.modal.open{display:flex}
.modal .box{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:24px;width:600px;max-width:100%;max-height:88vh;
  overflow-y:auto}
.dropzone{border:1px dashed var(--border-hi);border-radius:var(--r-lg);
  padding:34px 20px;text-align:center;cursor:pointer;color:var(--fg-muted);
  transition:border-color .12s var(--ease)}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);color:var(--fg)}

/* --------------------------------------------------------------- account */
.statrow{display:flex;gap:38px;flex-wrap:wrap;margin:18px 0 4px}
.stat .v{font-size:25px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.2}
.stat .k{font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  color:var(--fg-subtle);margin-top:2px}

@media (max-width:820px){
  .app{grid-template-columns:1fr}
  aside{display:none}
  nav.pill{left:10px;right:10px;padding:0 10px 0 16px;gap:14px}
  nav.pill .navlink{display:none}
  .hero{padding:64px 20px 56px}
  .display{letter-spacing:-.025em}
  .factstrip{gap:14px 26px;padding-top:36px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}