/* Single deliberate theme: the product's nocturnal identity (colors arrive as
   custom properties from brand.json via base.html — never hardcode them). */
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Instrument Sans",-apple-system,sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}
h1,h2,h3{font-family:"Bricolage Grotesque","Instrument Sans",sans-serif; line-height:1.12; text-wrap:balance}
h1{font-size:clamp(34px,6vw,52px); font-weight:700; margin:18px 0 10px}
h2{font-size:22px; font-weight:600; margin:0 0 12px}
h3{font-size:17px; font-weight:600; margin:0 0 6px}
a{color:var(--accent-b)}
code{font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:.85em}
.muted{color:var(--muted)}

header.site, footer.site{
  display:flex; align-items:center; justify-content:space-between;
  max-width:960px; width:100%; margin:0 auto; padding:18px 24px;
}
footer.site{margin-top:auto; color:var(--muted); font-size:13px}
header.site .home{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--ink); font-weight:600; font-family:"Bricolage Grotesque",sans-serif;
}
header.site nav{display:flex; align-items:center; gap:18px}
header.site nav a{color:var(--muted); text-decoration:none; font-size:14.5px; font-weight:500}
header.site nav a:hover{color:var(--ink)}

main{max-width:960px; width:100%; margin:0 auto; padding:24px; flex:1}

.cta{
  display:inline-block; background:var(--ink); color:var(--ground);
  border:none; border-radius:10px; padding:9px 18px; font-weight:600;
  font-size:14.5px; text-decoration:none; cursor:pointer;
  font-family:"Instrument Sans",sans-serif;
}
.cta:hover{opacity:.9}
.cta.big{padding:12px 26px; font-size:16px}
.ghost{
  display:inline-block; background:transparent; color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:8px 16px;
  font-weight:500; font-size:14.5px; text-decoration:none; cursor:pointer;
  font-family:"Instrument Sans",sans-serif;
}
.ghost:hover{border-color:var(--muted)}
.ghost.small{padding:3px 12px; font-size:13px}
.ghost.danger{color:var(--danger)}
button:focus-visible, a:focus-visible, input:focus-visible{outline:2px solid var(--accent-b); outline-offset:2px}
form.inline{display:inline}

.hero{text-align:center; padding:56px 0 30px}
.hero .arc{width:min(560px,90%); height:auto; margin:0 auto; display:block}
.hero .lede{max-width:56ch; margin:0 auto 26px; color:var(--muted); font-size:18px}
.actions{display:flex; gap:12px; justify-content:center}
.actions.center{justify-content:center}

.three{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px; padding:36px 0 60px;
}
.three > div{
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:20px 22px;
}
.three p{margin:0; color:var(--muted); font-size:14.5px}

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:26px 28px; margin:0 auto;
}
.card.narrow{max-width:420px; margin-top:48px}
.card.center{text-align:center}
.stack{display:flex; flex-direction:column; gap:18px; max-width:640px; margin:0 auto}

form label{display:block; margin:14px 0; font-size:14px; font-weight:500}
form input{
  display:block; width:100%; margin-top:6px; padding:10px 12px;
  background:var(--ground); border:1px solid var(--line); border-radius:9px;
  color:var(--ink); font-size:15px; font-family:inherit;
}
form.row{display:flex; gap:10px; margin-top:14px}
form.row input{flex:1; margin:0}
.error{color:var(--danger); font-size:14px}
.hint{color:var(--muted); font-size:13px; margin-top:12px}

.list{list-style:none; margin:0 0 8px; padding:0}
.list li{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 0; border-bottom:1px solid var(--line); font-size:15px;
}
.list li:last-child{border-bottom:none}
.list .muted{font-size:13px}
code.invite{
  background:var(--ground); border:1px solid var(--line); border-radius:7px;
  padding:3px 9px; font-size:12.5px; user-select:all;
}
@media (prefers-reduced-motion:no-preference){
  .cta,.ghost{transition:opacity .15s ease, border-color .15s ease}
}

/* System faces: no external font host, nothing leaked, nothing to block. */
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
h1,h2,h3{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; letter-spacing:-0.015em}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.row-between{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%}
.list li.block{display:block}
.members{list-style:none; margin:6px 0 0; padding:0}
.members li{display:flex; align-items:center; gap:8px; font-size:13px; padding:2px 0; border:none}
.ghost.tiny{padding:1px 8px; font-size:11.5px}
code.fingerprint{
  background:var(--ground); border:1px solid var(--line); border-radius:6px;
  padding:2px 7px; font-size:12px; letter-spacing:.06em;
}

code.fingerprint.big{font-size:20px; letter-spacing:.12em; padding:8px 14px; display:inline-block}