*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body { display: flex; flex-direction: column; }
header.marketing-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--gutter);
  border-bottom: 2px solid var(--rule);
}
.wordmark-serif {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.wordmark-serif .dot { color: var(--stamp); }
nav.marketing-nav { display: flex; gap: var(--space-5); }
nav.marketing-nav a {
  font: 600 var(--t-ui)/1 var(--sans);
  color: var(--ink-soft);
  text-decoration: none;
}
nav.marketing-nav a:hover { color: var(--ink); }
main.marketing {
  flex: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-8) var(--gutter);
}
main.marketing h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-5);
}
main.marketing p { font-size: 18px; color: var(--ink-soft); margin-bottom: var(--space-4); max-width: 60ch; }
footer.marketing-foot {
  border-top: 1px dotted var(--hairline-2);
  padding: var(--space-5) var(--gutter);
  font: 500 var(--t-meta)/1 var(--mono);
  color: var(--ink-mute);
}
.cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--stamp); color: var(--paper);
  padding: 12px 20px;
  font: 600 var(--t-ui)/1 var(--sans);
  text-decoration: none;
  margin-top: var(--space-4);
}
.cta:hover { background: var(--stamp-deep); }