/* 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 grid — 4 columns, every logo flush to the left of its column.
   Each logo carries its own height and offset: the SVG files contain
   different amounts of internal padding, so a single shared height
   renders them at visibly different optical sizes. The heights below
   equalise the main letter band; the translate() values pull each
   logo's first ink to the column edge and sit every wordmark on one
   shared baseline. Measured per file, not guessed. */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: start;
  align-items: center;
  row-gap: 2.5rem;
  column-gap: 1.5rem;
}
.logo-grid .logo-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 48px;
}
.logo-grid img,
.logo-grid svg {
  width: auto;
  height: var(--h);
  transform: translate(var(--x), var(--y));
}
.logo-elevenlabs  { --h: 37px;   --x: -1.2px; --y: 0.6px; }
.logo-factory     { --h: 45px;   --x: -8.1px; --y: 0.8px; }
.logo-fireworksai { --h: 37px;   --x: -1.3px; --y: -0.4px; }
.logo-harvey      { --h: 34.5px; --x: 15.5px; --y: 0px; }
.logo-ineffable   { --h: 45.5px; --x: -1.3px; --y: 0.9px; }
.logo-listen      { --h: 35px;   --x: -1.4px; --y: 0.8px; }
.logo-lovable     { --h: 21px;   --x: 0px;    --y: -0.5px; }
.logo-n8n         { --h: 34.5px; --x: 14.9px; --y: 1.5px; }
.logo-nexos       { --h: 39px;   --x: -0.8px; --y: -0.9px; }
.logo-profound    { --h: 37px;   --x: -1.1px; --y: 0.6px; }
.logo-rogo        { --h: 25.5px; --x: -2.4px; --y: 2px; }
.logo-serval      { --h: 32.5px; --x: 14.7px; --y: 2.4px; }
.logo-synthesia   { --h: 35.5px; --x: -1.4px; --y: 0.7px; }
.logo-compensate {
  margin-left: -20px;
  margin-top: -10px;
  margin-bottom: -10px;
  transform: scale(3.7);
  transform-origin: left center;
}
/* Narrower screens: fewer columns. The x offsets stay valid because they
   are relative to each logo's own cell, but the extra padding that keeps
   Fireworks clear of Harvey is only needed in the 4-column layout. */
@media (max-width: 860px) {
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .logo-harvey, .logo-n8n, .logo-serval { --x: -0.5px; }
}
@media (max-width: 640px) {
  .logo-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .logo-grid .logo-box { height: 44px; }
  .logo-grid img, .logo-grid svg { height: calc(var(--h) * 0.85); }
}
@media (max-width: 340px) {
  .logo-grid { grid-template-columns: 1fr; }
}

/* 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; }
}