@font-face {
  font-family: "Jersey 10";
  src: url("/fonts/jersey-10/Jersey10-Regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Geist Pixel Square";
  src: url("/fonts/geist-pixel/GeistPixel-Square.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "Geist Pixel Grid";
  src: url("/fonts/geist-pixel/GeistPixel-Grid.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "Geist Pixel Circle";
  src: url("/fonts/geist-pixel/GeistPixel-Circle.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "Geist Pixel Triangle";
  src: url("/fonts/geist-pixel/GeistPixel-Triangle.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "Geist Pixel Line";
  src: url("/fonts/geist-pixel/GeistPixel-Line.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

:root {
  --font-logo: "Jersey 10", Impact, sans-serif;
  --pixel-square: "Geist Pixel Square", "Geist Mono", monospace;
  --pixel-grid: "Geist Pixel Grid", "Geist Mono", monospace;
  --pixel-circle: "Geist Pixel Circle", "Geist Mono", monospace;
  --pixel-triangle: "Geist Pixel Triangle", "Geist Mono", monospace;
  --pixel-line: "Geist Pixel Line", "Geist Mono", monospace;
  --brand-blue: #b9ceff;
  --brand-grid: rgba(0, 0, 0, 0.055);
}

.logo {
  font-family: var(--font-logo) !important;
  font-synthesis: none;
  font-weight: 400 !important;
}

html { background: #fff; }
body { position: relative; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(var(--brand-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--brand-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 42rem);
}

h1, h2, h3, h4, h5, h6 {
  font-synthesis: none !important;
  font-weight: 500 !important;
  text-wrap: balance;
}
h1 { font-family: var(--pixel-square) !important; }
h2 { font-family: var(--pixel-grid) !important; }
h3 { font-family: var(--pixel-circle) !important; }
h4 { font-family: var(--pixel-triangle) !important; }
h5, h6 { font-family: var(--pixel-line) !important; }
article:nth-of-type(5n + 2) h2, li:nth-child(5n + 2) h3 { font-family: var(--pixel-circle) !important; }
article:nth-of-type(5n + 3) h2, li:nth-child(5n + 3) h3 { font-family: var(--pixel-triangle) !important; }
article:nth-of-type(5n + 4) h2, li:nth-child(5n + 4) h3 { font-family: var(--pixel-line) !important; }
article:nth-of-type(5n + 5) h2, li:nth-child(5n + 5) h3 { font-family: var(--pixel-square) !important; }
.content h2:nth-of-type(5n + 2) { font-family: var(--pixel-circle) !important; }
.content h2:nth-of-type(5n + 3) { font-family: var(--pixel-triangle) !important; }
.content h2:nth-of-type(5n + 4) { font-family: var(--pixel-line) !important; }
.content h2:nth-of-type(5n + 5) { font-family: var(--pixel-square) !important; }

section, article, .pricing-card, .contact-form { position: relative; }
.feature-grid article, .workflow-list li, .pricing-card, .post-card {
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.feature-grid article:hover, .workflow-list li:hover, .pricing-card:hover, .post-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,0,0,.28);
}

@media (max-width: 720px) {
  body::before { background-size: 24px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-grid article, .workflow-list li, .pricing-card, .post-card { transition: none; }
}

/* Keep the shared header brandmark compact and static, including pages served
   from an older generated HTML asset during a rolling static deployment. */
.logo-icon {
  width: 1em !important;
  height: 1em !important;
  animation: none !important;
  transform: none !important;
}