/**
 * Shared skin for the pages around the app: the landing page, the connector
 * page and the brain index. The app itself (chat.html) stays self contained,
 * because pulling its 400 lines of layout out from under a working screen buys
 * nothing today. These tokens are copied from it, so the two stay in step.
 */

:root{
  /* Claude palette, light is the default */
  --bg:#faf9f5; --surface:#ffffff; --surface-2:#f0eee6; --surface-3:#e9e6dc;
  --ink:#141413; --ink-2:#3d3d3a; --ink-3:#6e6e68; --ink-4:#93918a;
  --line:#e5e2d9; --line-2:#d4d0c4;
  --accent:#bf5a3c; --accent-fill:#d97757; --accent-on:#ffffff;
  --accent-soft:rgba(217,119,87,.10); --accent-line:rgba(217,119,87,.34);
  --good:#3f7d5c;
  --shadow:0 1px 2px rgba(20,20,19,.05), 0 1px 8px rgba(20,20,19,.04);
  --shadow-lift:0 2px 6px rgba(20,20,19,.07), 0 12px 32px rgba(20,20,19,.10);

  --sans:'Hanken Grotesk',ui-sans-serif,system-ui,'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;

  @media (prefers-color-scheme:dark){
    --bg:#262624; --surface:#30302e; --surface-2:#3a3a37; --surface-3:#44443f;
    --ink:#f5f4ef; --ink-2:#d8d6ce; --ink-3:#a8a69d; --ink-4:#8a887f;
    --line:#45443f; --line-2:#57564f;
    --accent:#e79173; --accent-fill:#d97757; --accent-on:#1a1a18;
    --accent-soft:rgba(217,119,87,.13); --accent-line:rgba(217,119,87,.40);
    --good:#6fb891;
    --shadow:0 1px 2px rgba(0,0,0,.22), 0 1px 8px rgba(0,0,0,.18);
    --shadow-lift:0 2px 6px rgba(0,0,0,.28), 0 12px 32px rgba(0,0,0,.34);
    color-scheme:dark;
  }
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--ink);
  font:400 16px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh; display:flex; flex-direction:column;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:2px; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
img,svg{ max-width:100%; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--accent-fill); outline-offset:2px; border-radius:4px; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:10px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }

/* ============ frame ============ */
.wrap{ width:100%; max-width:860px; margin:0 auto; padding-inline:24px; }

header.top{
  border-bottom:1px solid var(--line); background:var(--surface-2);
  position:sticky; top:0; z-index:10;
}
header.top .wrap{ display:flex; align-items:center; gap:11px; padding-block:13px; }
.mark{ width:24px; height:24px; flex-shrink:0; color:var(--accent-fill); }
.mark svg, .mark img{ width:100%; height:100%; display:block; }
.wordmark{ font:600 18px/1 var(--sans); letter-spacing:-.015em; color:var(--ink); }
nav.links{ margin-left:auto; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
nav.links a{
  font:500 13.5px/1 var(--sans); color:var(--ink-3);
  padding:7px 10px; border-radius:7px;
  transition:color .15s var(--ease), background .15s var(--ease);
}
nav.links a:hover{ color:var(--ink); background:var(--surface-3); text-decoration:none; }
nav.links a[aria-current]{ color:var(--accent); background:var(--accent-soft); }
nav.links a.cta{
  color:var(--accent-on); background:var(--accent-fill); padding-inline:13px;
}
nav.links a.cta:hover{ background:var(--accent); color:var(--accent-on); }

main{ flex:1; padding-block:52px 72px; }

footer.bot{
  border-top:1px solid var(--line); background:var(--surface-2);
  font:400 12px/1.7 var(--mono); color:var(--ink-3);
}
footer.bot .wrap{ display:flex; flex-wrap:wrap; gap:10px 18px; padding-block:16px; }
footer.bot span{ margin-left:auto; }

/* ============ type ============ */
h1.hero{
  font:600 clamp(30px,6vw,46px)/1.1 var(--sans); letter-spacing:-.025em;
  color:var(--ink); text-wrap:balance;
}
p.lede{
  margin-top:16px; font-size:clamp(16px,2.4vw,19px); line-height:1.6; color:var(--ink-2);
  max-width:62ch; text-wrap:pretty;
}
h2{
  font:600 22px/1.25 var(--sans); letter-spacing:-.015em; color:var(--ink);
  margin-top:56px; text-wrap:balance;
}
h2 + p, h2 + .grid, h2 + .steps, h2 + .tiles, h2 + .urlbox, h2 + table{ margin-top:14px; }
h3{ font:600 15px/1.35 var(--sans); color:var(--ink); }
p{ color:var(--ink-2); max-width:68ch; text-wrap:pretty; }
p + p{ margin-top:12px; }
.eyebrow{
  font:500 11px/1.6 var(--mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px;
}
.muted{ color:var(--ink-3); }
code, .mono{ font:400 13.5px/1.5 var(--mono); }

/* ============ pieces ============ */
.row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font:500 14.5px/1 var(--sans); padding:12px 17px; border-radius:9px;
  border:1px solid var(--line-2); color:var(--ink); background:var(--surface);
  transition:border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.btn:hover{ border-color:var(--accent-fill); text-decoration:none; transform:translateY(-1px); }
.btn.primary{ background:var(--accent-fill); border-color:var(--accent-fill); color:var(--accent-on); }
.btn.primary:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-on); }

.grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(236px,1fr)); }
.card{
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:17px 18px; box-shadow:var(--shadow);
}
.card h3{ margin-bottom:6px; }
.card p{ font-size:14px; line-height:1.55; color:var(--ink-3); max-width:none; }

.stats{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.stat{
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  padding:12px 16px; min-width:104px;
}
.stat b{ display:block; font:600 25px/1.1 var(--sans); color:var(--ink); letter-spacing:-.02em; }
.stat span{ font:400 10.5px/1.6 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }

.steps{ counter-reset:st; }
.steps li{
  counter-increment:st; position:relative; list-style:none;
  padding:0 0 12px 30px; color:var(--ink-2); max-width:68ch;
}
.steps li::before{
  content:counter(st); position:absolute; left:0; top:3px;
  font:600 10.5px/18px var(--mono); color:var(--accent);
  width:19px; height:19px; border-radius:50%; background:var(--accent-soft); text-align:center;
}
.steps li b{ color:var(--ink); font-weight:600; }

.tbl{ overflow-x:auto; margin-top:14px; }
table{ border-collapse:collapse; width:100%; min-width:440px; font-size:14.5px; }
th, td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th{
  font:500 10.5px/1.6 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); border-bottom-color:var(--line-2);
}
td{ color:var(--ink-2); }
td code{ color:var(--accent); }

.urlbox{
  display:flex; align-items:stretch; border:1px solid var(--line-2);
  border-radius:9px; overflow:hidden; background:var(--surface-2); max-width:560px;
}
.urlbox input{
  flex:1; min-width:0; background:none; border:none; color:var(--ink);
  font:400 13px/1.4 var(--mono); padding:12px 13px;
}
.urlbox button{
  flex-shrink:0; padding:0 15px; border-left:1px solid var(--line-2);
  font:500 13px/1 var(--sans); color:var(--accent); background:var(--surface);
}
.urlbox button:hover{ background:var(--accent-soft); }

.note{
  margin-top:20px; border-left:2px solid var(--accent-line);
  padding:2px 0 2px 15px; color:var(--ink-3); font-size:14.5px; max-width:66ch;
}

@media (max-width:620px){
  .wrap{ padding-inline:16px; }
  main{ padding-block:36px 52px; }
  h2{ margin-top:42px; }
  nav.links a{ padding:6px 8px; font-size:13px; }
}