/* Self-hosted variable font: one file covers weights 400-700 (latin subset) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Reset */
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }
h1, h2, h3 { font-size: inherit; }
strong { font-weight: 700; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: inherit; }

/* Base */
body {
  font-family: 'JetBrains Mono', monospace;
  background-color: #FFFFFF;
  color: #000000;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: max(884px, 100dvh);
}
h1, h2, h3 { font-weight: 700; }
section { margin-bottom: 3.5rem; }
::selection { background-color: #000000; color: #FFFFFF; }

/* Logo grids */
.logo-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.logo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo-grid .logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-grid img,
.logo-grid svg {
  height: 32px;
  width: auto;
}
.logo-compensate {
  margin-left: -20px;
  margin-top: -10px;
  margin-bottom: -10px;
  transform: scale(3.7);
  transform-origin: left center;
}
@media (max-width: 768px) {
  .logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
  }
  .logo-row {
    display: contents;
  }
  .logo-grid img,
  .logo-grid svg {
    height: 28px;
  }
}

/* List rows: hanging indent so wrapped lines align after the dash/bullet */
.playbook-row {
  display: flex;
  gap: 0.75rem;
}
.playbook-dash { flex-shrink: 0; }
.legend-row {
  display: flex;
  gap: 0.5rem;
}
.legend-dot { flex-shrink: 0; }

/* 404 page */
.center-screen {
  min-height: max(884px, 100dvh);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Layout utilities */
.max-w-\[800px\] { max-width: 800px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pl-4 { padding-left: 1rem; }
.pt-12 { padding-top: 3rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-24 { margin-top: 6rem; }
.h-24 { height: 6rem; }
.w-24 { width: 6rem; }
.h-\[90px\] { height: 90px; }
.overflow-hidden { overflow: hidden; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-3 { gap: 0.75rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-x-12 { column-gap: 3rem; }
.gap-y-1\.5 { row-gap: 0.375rem; }
.gap-y-6 { row-gap: 1.5rem; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* Typography utilities */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-\[10px\] { font-size: 10px; }
.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }
.font-bold { font-weight: 700; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-\[0\.25em\] { letter-spacing: 0.25em; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-90 { opacity: 0.9; }
.underline-offset-4 { text-underline-offset: 4px; }
.hover\:underline:hover { text-decoration-line: underline; }

/* Borders */
.border-t { border-top-width: 1px; }
.border-black { border-color: #000000; }

/* Responsive */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .md\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .md\:flex-row { flex-direction: row; }
}