*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none}
:root{
  --sans: ui-sans-serif,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --mono: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
:root{
  --bg:#FCFDFF; --bg-2:#F5F8FD; --card:#FFFFFF;
  --ink:#12213F; --ink-2:#545C70; --ink-3:#8A93B0;
  --line:#E1E8F5; --line-2:#CFDBEF;
  --accent:#3A5BC8; --accent-2:#2E47A0; --accent-soft:#ECF1FC;
  --pos:#2E7D57; --neg:#C0392B; --neg-soft:#F7E7E5;
  --btn-bg:#12213F; --btn-fg:#fff;
  --dgrid:#E8EEF9; --dfill:#F3F7FD; --dchip:#FFFFFF;
}


/* Base applies to every page, not just index — a page without .site
   (e.g. /thanks/) must still inherit the type stack. */
body,.site{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55}
.wrap{max-width:1120px;margin:0 auto;padding:0 36px}
@media(max-width:640px){.wrap{padding:0 20px}}
section{padding:88px 0;border-top:1px solid var(--line)}
h2{font-size:31px;line-height:1.14;letter-spacing:-.024em;margin:0 0 14px;font-weight:620;color:var(--ink)}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px}
.sub{font-size:17px;color:var(--ink-2);margin:0;max-width:62ch}
.kick{margin:32px 0 0;font-size:17px;color:var(--ink);border-left:3px solid var(--accent);
  padding-left:16px;max-width:62ch}

.nav{border-bottom:1px solid var(--line);background:var(--bg)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav img{height:24px;width:auto}
.nav nav{display:flex;gap:26px;font-size:14px}
.nav nav a{color:var(--ink-2)}
.nav nav a:hover{color:var(--accent)}

.hero{padding:96px 0 88px;border-top:0;position:relative;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;position:relative;z-index:1}
h1{font-size:56px;line-height:1.03;letter-spacing:-.033em;margin:0 0 22px;font-weight:640;color:var(--ink)}
h1 .l2{display:block;color:var(--accent)}
h1 .l2{color:var(--accent-2)}
.hero p{font-size:18px;color:var(--ink-2);margin:0 0 14px;max-width:48ch}
.hero p b{color:var(--ink);font-weight:600}
.trust{display:flex;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  margin:26px 0;border:1px solid var(--line-2);border-radius:5px;width:fit-content;overflow:hidden}
.trust b{font-weight:500;color:var(--accent);padding:8px 15px}
.trust b{color:var(--accent-2)}
.trust b+b{border-left:1px solid var(--line-2)}
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:6px}
.btn{display:inline-block;padding:12px 20px;border-radius:6px;font-size:15px;font-weight:560}
.btn.p{background:var(--btn-bg);color:var(--btn-fg)}
.btn.p:hover{opacity:.88}
.btn.s{border:1px solid var(--line-2);color:var(--ink)}
.btn.s:hover{border-color:var(--accent)}
.btn.big{padding:14px 26px;font-size:16px}
.invite{margin:34px 0 0;font-size:13.5px;color:var(--ink-3);max-width:50ch;line-height:1.6}
.invite a{color:var(--accent);border-bottom:1px solid var(--line-2);padding-bottom:1px}
.invite a:hover{border-bottom-color:var(--accent)}


/* diagrams */
.dia{margin-top:44px}
.dia svg{width:100%;height:auto;display:block}
.cap{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:18px 0 0}
.d-lbl{font-family:var(--mono);font-size:13px;fill:var(--ink)}
.d-sub{font-family:var(--mono);font-size:11.5px;fill:var(--ink-3)}
.d-name{font-family:var(--sans);font-size:14.5px;font-weight:600;fill:var(--ink)}
.d-det{font-family:var(--mono);font-size:12px;fill:var(--ink-2)}
.d-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;fill:var(--ink-3)}

.steps{display:grid;grid-template-columns:repeat(5,1fr);margin-top:40px;
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.steps div{padding:24px 20px 26px;border-left:1px solid var(--line)}
.steps div:first-child{border-left:0}
.steps .n{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin:0 0 12px}
.steps h3{font-size:16px;margin:0 0 8px;font-weight:620;letter-spacing:-.01em}
.steps p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.5}

.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px}
.two > div{border:1px solid var(--line);border-radius:10px;padding:24px 24px 26px;background:var(--card)}
.two > div{background:var(--bg-2)}
.two .pos{border-top:2px solid var(--pos)}
.two .neg{border-top:2px solid var(--neg)}
.two h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 16px;font-weight:500}
.two .pos h3{color:var(--pos)}
.two .neg h3{color:var(--neg)}
.two ul{margin:0;padding:0;list-style:none}
.two li{position:relative;padding-left:20px;margin-bottom:11px;font-size:15px;color:var(--ink-2);line-height:1.5}
.two li:last-child{margin-bottom:0}
.two li::before{position:absolute;left:0;top:-1px;font-family:var(--mono);font-size:13px}
.pos li::before{content:"+";color:var(--pos)}
.neg li::before{content:"\2212";color:var(--neg)}

.three{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:44px;
  padding-top:36px;border-top:1px solid var(--line)}
.three h3{font-size:16px;margin:0 0 9px;font-weight:620;letter-spacing:-.01em}
.three p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.55}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px}
.cards > div{border:1px solid var(--line);border-radius:10px;padding:26px;background:var(--card)}
.cards > div{background:var(--bg-2)}
.cards h3{font-size:17px;margin:0 0 9px;font-weight:620}
.cards p{margin:0 0 16px;font-size:15px;color:var(--ink-2);line-height:1.55}
.cards code{font-family:var(--mono);font-size:13px;background:var(--accent-soft);color:var(--accent);
  padding:8px 12px;border-radius:5px;display:block;margin-bottom:14px;border:1px solid var(--line)}
.cards code{color:var(--accent-2)}
.cards a.go{font-size:14.5px;color:var(--accent);font-weight:560}
.cards a.go{color:var(--accent-2)}
.note{margin-top:22px;font-size:14.5px;color:var(--ink-3)}

/* engagement */
.eng{margin-top:36px;max-width:64ch}
.eng p{font-size:17px;color:var(--ink-2);margin:0 0 16px}
.eng .ctas{margin-top:30px}
.eng .fine{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:18px 0 0}



/* work together + form */
.work{display:grid;grid-template-columns:1fr .9fr;gap:56px;margin-top:34px;align-items:start}
.work p{font-size:17px;color:var(--ink-2);margin:0 0 16px;max-width:44ch}
.work p b{color:var(--ink);font-weight:600}
.work .slots{font-family:var(--mono);font-size:13px;color:var(--ink-3);margin-top:26px}
form{border:1px solid var(--line);border-radius:10px;padding:26px;background:var(--bg-2)}
form h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-2);margin:0 0 20px;font-weight:500}
label{display:block;font-size:13.5px;color:var(--ink-2);margin:0 0 6px}
input[type=text],input[type=email],textarea{width:100%;padding:11px 13px;border:1px solid var(--line-2);
  border-radius:6px;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;margin-bottom:16px}
textarea{resize:vertical;min-height:92px;margin-bottom:22px}
.check{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2);margin-bottom:22px}
.check input{margin:0}
.btn.big{padding:14px 26px;font-size:16px;width:100%;text-align:center;border:0;cursor:pointer;font-family:inherit}
form .fine{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin:14px 0 0;line-height:1.6}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
@media(max-width:900px){.work{grid-template-columns:1fr;gap:30px}}


.navcta{border:1px solid var(--line-2);border-radius:5px;padding:7px 14px;color:var(--ink)!important;
  font-size:13.5px;font-weight:560}
.navcta:hover{border-color:var(--accent);color:var(--accent)!important}
.hero{padding:104px 0 96px}
.hero .wrap > p{font-size:19px;color:var(--ink-2);margin:0 0 14px;max-width:56ch}
.hero .wrap > p b{color:var(--ink);font-weight:600}
.quiet{font-size:14.5px;color:var(--ink-2);border-bottom:1px solid var(--line-2);padding-bottom:1px}
.quiet:hover{color:var(--accent);border-bottom-color:var(--accent)}


.mini{padding:52px 0}
.minirow{display:flex;gap:40px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.mini .eyebrow{margin:0 0 8px}
.mini h3{font-size:19px;margin:0 0 8px;font-weight:620;letter-spacing:-.015em}
.mini p{margin:0;font-size:15.5px;color:var(--ink-2);max-width:60ch}
.mini .go{font-size:14.5px;color:var(--accent-2);font-weight:560;white-space:nowrap}




form .hint{font-size:13px;color:var(--ink-3);margin:-2px 0 8px;line-height:1.55}
form .hint em{font-style:normal;font-family:var(--mono);font-size:12.5px}

38%,100%{opacity:0}}38%,100%{opacity:1}}40%,94%{opacity:0;transform:translateY(-4px)}98%,100%{opacity:1;transform:translateY(0)}}40%,94%{opacity:1;transform:translateY(0)}98%,100%{opacity:0;transform:translateY(4px)}}
  .byteB,.bad{opacity:1}
}





footer{padding:40px 0 56px;border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer img{height:20px;opacity:.75}
footer p{margin:0;font-size:13.5px;color:var(--ink-3)}
footer nav{display:flex;gap:20px;font-size:13.5px}
footer nav a{color:var(--ink-3)}
footer nav a:hover{color:var(--accent)}

@media(max-width:900px){
  .hero{padding:64px 0 56px}
  .hero .grid{grid-template-columns:1fr;gap:36px}
  h1{font-size:38px}h2{font-size:26px}
  section{padding:60px 0}
  .steps{grid-template-columns:1fr}
  .steps div{border-left:0;border-top:1px solid var(--line)}
  .steps div:first-child{border-top:0}
  .two,.cards{grid-template-columns:1fr}
  .three{grid-template-columns:1fr;gap:26px}
  .dia{overflow-x:auto}
  .dia svg{min-width:640px}
}

/* Netlify honeypot — must exist in the DOM, must never be seen or focusable */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* /thanks/ */
.thanks{max-width:640px;padding:120px 0 140px}
.thanks h1{font-size:38px;margin:0 0 18px}
.thanks p{font-size:17px;color:var(--ink-2);margin:0 0 16px;max-width:52ch}
.thanks a.back{font-size:15px;color:var(--accent-2);font-weight:560;
  border-bottom:1px solid var(--line-2);padding-bottom:1px}
.thanks a.back:hover{border-bottom-color:var(--accent)}