.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--s5);
  border-bottom: var(--seam-w) solid var(--seam);
}
.wordmark {
  font-family: var(--font-display);
  font-variation-settings: "wght" 800, "wdth" 125;
  letter-spacing: 0.04em;
  color: var(--ember);
  font-size: 18px;
}
.site-nav { display: flex; gap: var(--s5); flex: 1; justify-content: center; }
.site-nav a { color: var(--fog); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; }
.site-nav a:hover { color: var(--chalk); }

main { max-width: 1120px; margin: 0 auto; padding: 0 var(--s5); }

.hero { padding: var(--s8) 0 var(--s7); max-width: 720px; }
.hero .label { margin-bottom: var(--s3); }
.hero h1 { margin-bottom: var(--s4); }
.hero-sub { color: var(--fog); font-size: 18px; max-width: 620px; margin-bottom: var(--s5); }

.section { padding: var(--s7) 0; border-top: var(--seam-w) solid var(--seam-soft); }
.section h2 { margin-bottom: var(--s3); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s5);
}
.feature-card {
  display: block;
  background: var(--steel);
  border: var(--seam-w) solid var(--seam);
  border-radius: var(--r);
  padding: var(--s5);
}
.feature-card h3 { color: var(--chalk); margin-bottom: var(--s2); }
.feature-card p { color: var(--fog); font-size: 14px; line-height: 1.5; }
a.feature-card:hover { border-color: var(--ember); }

.cta-block { text-align: center; }
.cta-block h2 { margin-bottom: var(--s2); }
.cta-block .hero-sub { margin: 0 auto var(--s5); text-align: center; }
.cta-block .btn { margin: 0 auto; }
.cta-block p { margin-top: var(--s4); color: var(--fog); }
.cta-block p a { color: var(--ember); text-decoration: underline; }

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s4);
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s7);
  border-top: var(--seam-w) solid var(--seam);
}
.site-footer nav { display: flex; gap: var(--s4); }
.site-footer nav a { color: var(--fog); font-size: 13px; }
.site-footer nav a:hover { color: var(--chalk); }

@media (max-width: 720px) {
  .site-nav { display: none; }
}