@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-roman.var.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-italic.var.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root{
  --bg: #F6F6F4;
  --text: #1C1C1C;
  --text2: #6A6A6A;
  --accent: #0E1A2B;
  --border: 1px solid rgba(28,28,28,0.18);
  --container: 1280px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family: Inter, system-ui, sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:18px;
  line-height:1.65;
}

img{max-width:100%; display:block;}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

.section{padding:64px 0;}
@media(min-width:700px){.section{padding:88px 0;}}
@media(min-width:1000px){.section{padding:120px 0;}}

.maxtext{max-width:720px;}
.grid{display:grid; gap:18px;}
@media(min-width:900px){.grid{gap:28px;}}

h1{font-size:64px; line-height:1.08; font-weight:500; margin:0;}
h2{font-size:42px; line-height:1.15; font-weight:500; margin:0;}
h3{font-size:28px; line-height:1.25; font-weight:500; margin:0;}

p{margin:0; color:var(--text2);}
.small{font-size:14px; line-height:1.55; color:var(--text2);}

.header{
  position:sticky;
  top:0;
  background:var(--bg);
  border-bottom:var(--border);
}
.header-inner{
  height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.nav a{
  margin-left:24px;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.nav a:hover{
  border-bottom:1px solid var(--accent);
  color:var(--accent);
}

.card{
  border:var(--border);
  padding:24px;
}

.footer{
  border-top:var(--border);
  padding:40px 0;
  font-size:14px;
}

.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
}

.diagram{
  max-width:980px;
  margin:auto;
}