:root{
  --bg:#ffffff;
  --fg:#111111;
  --muted:#555;
  --accent:#111;
  --max:1100px;
  --font: "Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);}
body{font-family:var(--font); line-height:1.45;}
a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.2)}
a:hover{border-bottom-color:rgba(0,0,0,.6)}
.container{max-width:var(--max); margin:0 auto; padding:32px 20px;}

.topbar{
  position:sticky; top:0; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.08);
  z-index:10;
}
.nav{
  max-width:var(--max); margin:0 auto; padding:14px 20px;
  display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between;
}
.brand{font-weight:700; letter-spacing:.04em;}
.navlinks{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.navlinks a{border-bottom:none; padding:6px 8px; border-radius:10px}
.navlinks a:hover{background:rgba(0,0,0,.05)}
.navlinks a.active{background:rgba(0,0,0,.08)}

.hero{padding:54px 0 22px;}
.kicker{
  display:inline-block;
  font-weight:800;
  letter-spacing:.02em;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  padding:6px 12px;
  margin:0 0 18px 0;
}
.logo{
  font-weight:800;
  letter-spacing:.02em;
  text-transform:lowercase;
  font-size:clamp(42px,7.4vw,78px);
  line-height:1.0;
  margin:0 0 18px 0;
}
.logo .amp{display:inline-block; transform:translateY(-.06em); font-weight:800}
.subtitle{font-weight:700;font-size:clamp(16px,2.2vw,20px); margin:0 0 10px 0;}
.subline{font-weight:700;font-size:clamp(14px,1.9vw,18px); margin:0 0 18px 0;}
.type{
  font-weight:700;
  letter-spacing:.01em;
  display:inline-block;
  border-right:2px solid var(--fg);
  padding-right:4px;
  white-space:nowrap;
  overflow:hidden;
  vertical-align:bottom;
}

.snakebar{
  height:16px;
  margin:10px 0 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  overflow:hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='16' viewBox='0 0 80 16'%3E%3Cpath d='M0 8 C10 2 20 14 30 8 S50 2 60 8 S70 14 80 8' fill='none' stroke='%23111111' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:0 50%;
  animation:snake-move 2.8s linear infinite;
}
@keyframes snake-move{
  from{background-position:0 50%}
  to{background-position:160px 50%}
}

.punch{margin-top:22px; display:grid; gap:10px; max-width:80ch;}
.punch p{margin:0; font-weight:700; font-size:clamp(15px,2.0vw,19px);}

.section{padding:44px 0; border-top:1px solid rgba(0,0,0,.08);}
.section--center{padding-top:72px;}
.h{font-size:22px; margin:0 0 14px 0; font-weight:800;}
.lead{max-width:84ch; color:var(--muted)}
ul.clean{padding-left:18px; margin:10px 0}
ul.clean li{margin:8px 0}

.grid{display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}
.card{border:1px solid rgba(0,0,0,.10); border-radius:16px; padding:16px;}
.card h3{margin:0 0 8px 0; font-size:16px; font-weight:800;}
.card p{margin:0; color:var(--muted)}
.badge{display:inline-block; font-size:12px; padding:3px 8px; border:1px solid rgba(0,0,0,.12); border-radius:999px; margin-right:6px; margin-top:6px;}

.footer{border-top:1px solid rgba(0,0,0,.08); padding:26px 0; color:var(--muted); font-size:14px;}
.footer a{color:inherit}

.note{background:rgba(0,0,0,.03); border:1px dashed rgba(0,0,0,.18); border-radius:16px; padding:14px 16px; color:var(--muted); margin-top:18px;}