/* Layout: dark bands on a ruled grid. Lime leads; orange, cyan and pink code the demo
   tasks and feature tiles and appear where one is on show, never as decoration.

   Themes: --ink is the surface and --paper the ink on it, so they swap in light mode.
   The neon accents never change; they fill slabs and blocks, with --black on top. Where an
   accent is text or a thin line on the surface it uses its -text form, which darkens in
   light mode to stay legible. Terminals and agent windows stay dark in both themes. */

/* Fonts are self-hosted (OFL, licenses beside them) so no visitor request goes to Google. */
@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("static/fonts/fira-code-symbols2.woff2") format("woff2");
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("static/fonts/fira-code-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("static/fonts/fira-code-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;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("static/fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("static/fonts/ibm-plex-sans-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;
}
@font-face {
  font-family: "Tektur";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("static/fonts/tektur-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Tektur";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("static/fonts/tektur-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;
}

:root,
.term,
.viz,
.illo,
.code {
  --ink: #0b0b0e;
  --ink-2: #111116;
  --ink-3: #18181e;
  --paper: #f1f1f4;
  --text-2: #b9b9c6;        /* running text: one step down from headings */
  --muted: #868694;         /* meta, labels (5.5:1 on --ink) */
  --rule: #24242d;
  --rule-strong: #393945;

  --lime-text: var(--lime);
  --orange-text: var(--orange);
  --cyan-text: var(--cyan);
  --pink-text: var(--pink);

  color: var(--paper);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ink: #f4f4f7;
  --ink-2: #e9e9ef;
  --ink-3: #dcdce4;
  --paper: #0b0b0e;
  --text-2: #373743;
  --muted: #5b5b69;         /* 5.5:1 on --ink-2 */
  --rule: #d2d2db;
  --rule-strong: #8a8a98;

  --lime-text: #3d7400;     /* each 4.7:1 or better on --ink-2 */
  --orange-text: #b04400;
  --cyan-text: #00717f;
  --pink-text: #b5179b;

  color-scheme: light;
}

:root {
  --black: #0b0b0e;
  --white: #f1f1f4;
  --border: 2px;

  --lime: #c4ff3d;
  --orange: #ff8a1f;
  --cyan: #3df0ff;
  --pink: #ff4fd8;

  /* Type: a technical display face for titles and figures, a sans for running copy, and a
     mono for machine output — the terminal, code and matched text. Tracking tightens slightly
     as size grows; mono is never tracked. */
  --font-display: "Tektur", "Arial Narrow", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "Fira Code", ui-monospace, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;                                   /* axis labels, meta */
  --text-sm: 0.8125rem;                                 /* terminal, code, controls, card copy */
  --text-base: 1rem;                                    /* running text */
  --text-lg: 1.125rem;                                  /* lede */
  --text-h3: 1.375rem;                                  /* card titles */
  --text-fig: clamp(2rem, 1.4rem + 1.8vw, 2.75rem);     /* readouts */
  --text-xl: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);       /* section titles */
  --text-2xl: clamp(2.75rem, 1.2rem + 5.6vw, 6.5rem);   /* page title */

  --wrap: 1240px;
  --gutter: 20px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3,
.readouts dd,
.logo {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 700;
  color: var(--paper);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-size: var(--text-2xl); line-height: 1; letter-spacing: -0.025em; }
h2 { font-size: var(--text-xl); line-height: 1.04; letter-spacing: -0.02em; }
h3 { font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
pre, code { font-family: var(--font-mono); }
button { font-stretch: inherit; }

::selection { background: var(--lime); color: var(--black); }

:focus-visible {
  outline: 2px solid var(--lime-text);
  outline-offset: 3px;
}

.nowrap { white-space: nowrap; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 50;
  background: var(--lime);
  color: var(--black);
  padding: 8px 14px;
  font-weight: 500;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Markdown syntax */
.md { color: var(--lime); }
/* On a light surface the neon needs an edge. The stroke paints under the fill, so only
   its outer half shows. Tiles and the slab carry their own colours and keep none. */
[data-theme="light"] .md {
  -webkit-text-stroke: max(2px, 0.06em) var(--black);
  paint-order: stroke fill;
}
[data-theme="light"] :is(.tile, .slab) .md { -webkit-text-stroke: 0; }

.md-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.md-list li {
  position: relative;
  padding-left: 2ch;
}
.md-list li::before {
  content: "*";
  content: "*" / "";
  position: absolute;
  left: 0;
  color: var(--lime-text);
}

code.inline {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.62em;
  letter-spacing: 0;
  word-spacing: 0;
  vertical-align: 0.14em;
  padding: 0.04em 0.24em;
  color: var(--ink);
  background: var(--paper);
}

/* Buttons: flat slabs, no ornament; the arrow carries the motion */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 48px;
  padding: 0 22px;
  background: var(--lime);
  color: var(--black);
  border: 1px solid var(--lime);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--paper);
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--paper); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--paper); }
.arr { display: inline-block; transition: transform 200ms var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
/* Same footprint and press as .btn, in grey so lime stays the main action */
.btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--muted);
  box-shadow: 4px 4px 0 var(--muted);
}
.btn-ghost:hover { border-color: var(--paper); box-shadow: 2px 2px 0 var(--muted); }
.btn-ghost:active { box-shadow: 0 0 0 var(--muted); }
/* Disabled ghost: no press, dimmer edge */
.btn-soon,
.btn-soon:hover,
.btn-soon:active {
  gap: 8px;
  background: var(--black);
  color: var(--muted);
  border-color: var(--rule-strong);
  box-shadow: 4px 4px 0 var(--rule-strong);
  transform: none;
  cursor: default;
}
[data-theme="light"] .btn-soon { background: var(--white); }
.btn-ink {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
  box-shadow: 4px 4px 0 var(--pink);
}
.btn-ink:hover { box-shadow: 2px 2px 0 var(--pink); }
.btn-ink:active { box-shadow: 0 0 0 var(--pink); }
.btn-ink:focus-visible { outline-color: var(--black); }
.btn-sm { min-height: 44px; padding: 0 16px; box-shadow: 3px 3px 0 var(--paper); }

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: var(--border) solid var(--rule);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.logo-mark { width: 26px; height: 26px; display: block; overflow: visible; }
/* Light mode: a black edge under the neon shapes, like .md's stroke. It pokes past the viewBox. */
.logo-edge { display: none; }
[data-theme="light"] .logo-edge { display: inline; }
.nav nav { margin-left: auto; }
.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-block;
  padding: 10px 12px;
  color: var(--paper);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.nav-links a:hover { color: var(--lime-text); }
/* Not linked yet: dimmed, with a tag in place of the href */
.is-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: var(--text-sm);
  cursor: default;
}
.soon {
  padding: 1px 5px;
  border: 1px solid var(--pink-text);
  color: var(--pink-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  text-transform: lowercase;
}

/* Theme toggle: shows the theme it switches to */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--rule-strong);
  flex-shrink: 0;
  cursor: pointer;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.theme-toggle:hover { color: var(--lime-text); border-color: var(--paper); }
.theme-toggle svg {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.icon-moon,
[data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; }

/* Hero */
.hero {
  padding: 72px 0 96px;
  border-bottom: var(--border) solid var(--rule);
}
.hero h1 { margin-bottom: 64px; }
.hl {
  background: var(--lime);
  color: var(--black);
  padding: 0 0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}
.hero-copy { min-width: 0; }
.lede {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--paper);
  max-width: 30ch;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.readouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 56px 0 0;
  border-top: 1px solid var(--rule);
}
.readouts > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--rule);
}
.readouts > div:nth-child(odd) {
  padding-right: 16px;
  border-right: 1px solid var(--rule);
}
.readouts > div:nth-child(even) { padding-left: 24px; }
.readouts dd {
  margin: 0;
  font-size: var(--text-fig);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.readouts dt {
  color: var(--paper);
  font-size: var(--text-xs);
}

/* Terminal: an agent's search, replayed in slow motion over a minimap of the corpus.
   --mode is the colour of the task on show. */
.term {
  --mode: var(--lime);
  margin: 0;
  background: var(--ink-2);
  border: var(--border) solid var(--mode);
  box-shadow: 8px 8px 0 var(--mode);
  min-width: 0;
  align-self: start;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.term-body {
  padding: 24px 24px 20px;
  font-family: var(--font-mono);
  font-variant-ligatures: none;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--paper);
  transition: opacity 300ms var(--ease);
}
.term-body.is-out { opacity: 0; }
.ln {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding-left: 7ch;
  text-indent: -7ch;
}
.ln + .ln { margin-top: 4px; }
.who { color: var(--paper); }
.fn { color: var(--mode); }
.str { color: var(--paper); }
.caret {
  display: inline-block;
  width: 0.62em;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: -0.22em;
  background: var(--mode);
}

.field {
  margin-top: 18px;
  border: 1px solid var(--rule-strong);
  background: var(--ink);
}
.field-cap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--rule);
  color: var(--paper);
  font-size: var(--text-xs);
}
.field canvas {
  display: block;
  width: 100%;
  height: 120px;
}

.stats {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  margin: 0;
  border: 1px solid var(--rule-strong);
  border-top: 0;
}
.stats > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  padding: 10px 12px;
  border-right: 1px solid var(--rule);
  min-width: 0;
}
.stats > div:last-child { border-right: 0; }
.stats dt { color: var(--paper); font-size: var(--text-xs); }
.stats dd {
  margin: 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stats [data-matches] { color: var(--mode); }

.hits {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.hits li {
  display: grid;
  grid-template-columns: 5ch minmax(0, 1fr);
  column-gap: 1.5ch;
  padding: 10px 14px;
  border-left: 2px solid var(--mode);
  background: var(--ink);
}
.n {
  grid-row: span 2;
  color: var(--mode);
  font-variant-numeric: tabular-nums;
}
.path { font-weight: 500; overflow-wrap: anywhere; }
.hits code {
  color: var(--paper);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.term mark {
  background: color-mix(in srgb, var(--mode) 16%, transparent);
  color: var(--mode);
}
.more {
  margin-top: 8px;
  padding-left: 16px;
  color: var(--paper);
}
/* Results arrive once the scan ends; they leave instantly so the next task starts clean. */
.term.is-live .hits li,
.term.is-live .more { opacity: 0; transform: translateY(6px); }
.term.is-live .is-done .hits li,
.term.is-live .is-done .more {
  opacity: 1;
  transform: none;
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}
.term.is-live .is-done .hits li:nth-child(2) { transition-delay: 70ms; }
.term.is-live .is-done .more { transition-delay: 140ms; }

.term-foot {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--rule-strong);
  font-size: var(--text-xs);
  color: var(--muted);
}
.term-foot p { margin-right: auto; padding: 0 24px; }
.term-btn {
  min-height: 44px;
  padding: 0 18px;
  background: transparent;
  color: var(--paper);
  border: 0;
  border-left: 1px solid var(--rule-strong);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: color 200ms var(--ease), background-color 200ms var(--ease);
}
.term-btn:hover { color: var(--mode); background: var(--ink); }
.term-btn:focus-visible { outline-color: var(--mode); outline-offset: -4px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sections */
.section {
  padding: 120px 0;
  border-bottom: var(--border) solid var(--rule);
}
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.intro { max-width: 46ch; }
.section-head .intro { margin: 0; }
.section .md-list { margin-top: 36px; color: var(--paper); }

.section-alt { background: var(--ink-2); }

.slab {
  background: var(--lime);
  color: var(--black);
}
.slab h2 { color: var(--black); }
.slab .md { color: var(--black); opacity: 0.4; }
.slab .intro { margin-top: 20px; color: var(--black); opacity: 0.75; }
.slab ::selection { background: var(--black); color: var(--lime); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.split > * { min-width: 0; }

/* Agent-native: numbered points, each with an illustration */
.points {
  list-style: none;
  margin: 72px 0 0;
  padding: 0;
  border-top: var(--border) solid var(--rule-strong);
}
.point {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding: 40px 0;
  border-bottom: 1px solid var(--rule);
}
.point h3 + p { margin-top: 12px; max-width: 34ch; }

/* Illustrations: each plays once when scrolled into view (main.js arms them). Without
   JS, or with reduced motion, they show their final state. */
.viz {
  margin: 0;
  min-width: 0;
  background: var(--ink);
  border: var(--border) solid var(--rule-strong);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.6;
}
.viz b { font-weight: 500; }
.viz-q { color: var(--paper); font-size: var(--text-sm); overflow-wrap: anywhere; }
.viz-q .p { margin-right: 1ch; color: var(--muted); }
.app-bar,
.pane-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  background: var(--ink-3);
  border-bottom: 1px solid var(--rule-strong);
}
.app-bar span:first-child { color: var(--paper); }

/* 1. A coding agent session: grep on the repo, then the same pattern on the logs. */
.app-body {
  display: grid;
  gap: 10px;
  padding: 20px 18px 24px;
  font-size: var(--text-sm);
  color: var(--paper);
}
.app-body p { padding-left: 2ch; text-indent: -2ch; overflow-wrap: anywhere; }
.app-you { margin-bottom: 6px; color: var(--paper); }
.app-call::before,
.app-say::before { content: "\25CF  "; content: "\25CF  " / ""; color: var(--muted); }
.app-call b { color: var(--paper); }
.app-call.is-gv::before,
.app-call.is-gv b { color: var(--lime); }
.viz .app-out { margin-top: -6px; padding-left: 4ch; color: var(--paper); }
.app-out em { font-style: normal; color: var(--lime); font-variant-numeric: tabular-nums; }
.app-say { margin-top: 6px; color: var(--paper); }
.app-say::before { color: var(--paper); }
.app-input {
  margin: 0 18px 18px;
  padding: 8px 12px;
  border: 1px solid var(--rule-strong);
  color: var(--muted);
  font-size: var(--text-sm);
}
.app-input i { display: inline-block; width: 0.6em; height: 1.1em; vertical-align: -0.2em; background: var(--paper); }
.viz.is-armed .app-body > p { opacity: 0; transform: translateY(4px); }
.viz.is-in .app-body > p {
  opacity: 1;
  transform: none;
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
  transition-delay: calc(var(--i) * 400ms);
}

/* 2 and 3. Side-by-side panes: a vector DB or chatbot next to an agent or system.
   3. A chatbot, where ranked is fine, next to a system that acts on every match. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--border);
  background: var(--rule-strong);
}
.pane { display: flex; flex-direction: column; min-width: 0; background: var(--ink); }
.pane-bar span:first-child { color: var(--c); }
.pane-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px 20px;
}
.bubble { max-width: 88%; padding: 8px 12px; }
.bubble-you {
  align-self: flex-end;
  background: var(--ink-3);
  color: var(--paper);
  border-radius: 12px 12px 2px 12px;
}
.bubble-bot {
  align-self: flex-start;
  width: 88%;
  border: 1px solid var(--rule-strong);
  border-radius: 12px 12px 12px 2px;
  color: var(--paper);
}
.ranks { display: grid; gap: 6px; margin: 8px 0 2px; padding: 0; list-style: none; }
.ranks li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3ch;
  align-items: center;
  gap: 8px;
  color: var(--c);
  font-variant-numeric: tabular-nums;
}
.ranks i { display: block; width: calc(var(--s) * 100%); height: 6px; background: var(--c); transform-origin: left; }
.pane-note { margin-top: auto; }
.sys-q { color: var(--paper); overflow-wrap: anywhere; }
.sys-rows { margin: 0; padding: 0; list-style: none; }
.sys-rows li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--rule-strong);
  color: var(--paper);
}
.sys-rows span::before { content: "\2713  "; content: "\2713  " / ""; color: var(--c); }
.sys-rows b { color: var(--paper); font-variant-numeric: tabular-nums; }
.sys-progress { height: 6px; margin-top: auto; background: var(--ink-3); }
.sys-progress i { display: block; height: 100%; background: var(--c); transform-origin: left; }
.sys-total { display: flex; justify-content: space-between; align-items: baseline; color: var(--paper); }
.sys-total b {
  color: var(--c);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.viz.is-armed .bubble,
.viz.is-armed .sys-rows li { opacity: 0; transform: translateY(4px); }
.viz.is-armed .ranks i,
.viz.is-armed .sys-progress i { transform: scaleX(0); }
.viz.is-in .bubble,
.viz.is-in .sys-rows li {
  opacity: 1;
  transform: none;
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}
.viz.is-in .bubble { transition-delay: calc(var(--i) * 450ms); }
.viz.is-in .sys-rows li { transition-delay: calc(var(--i) * 450ms + 400ms); }
.viz.is-in .ranks i { transform: none; transition: transform 400ms var(--ease) calc(var(--i) * 90ms + 700ms); }
.viz.is-in .sys-progress i { transform: none; transition: transform 1400ms linear 600ms; }

/* 2. Top-k by cosine, mostly off topic, next to an agent's search rounds. */
.sims, .rounds { display: grid; margin: 0; padding: 0; list-style: none; }
.sims li {
  display: grid;
  grid-template-columns: 4ch minmax(0, 1fr);
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--rule-strong);
  color: var(--paper);
}
.sims b { color: var(--c); font-variant-numeric: tabular-nums; }
.sims .is-off span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--c); }
.rounds li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--rule-strong);
}
.rounds i { font-style: normal; color: var(--paper); }
.rounds b { grid-area: 1 / 2; color: var(--paper); font-variant-numeric: tabular-nums; }
.rounds code { grid-column: 1 / -1; color: var(--paper); font: inherit; overflow-wrap: anywhere; }
.rounds + .sys-total { margin-top: auto; }
.viz.is-armed :is(.sims, .rounds) li { opacity: 0; transform: translateY(4px); }
.viz.is-in :is(.sims, .rounds) li {
  opacity: 1;
  transform: none;
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}
.viz.is-in .sims li { transition-delay: calc(var(--i) * 120ms + 200ms); }
.viz.is-in .rounds li { transition-delay: calc(var(--i) * 450ms + 400ms); }

/* 4. Stored size per GB of data, stacked by what makes it up. The axis runs 0 to 6 GB. */
.viz-chart { --axis: 3.5rem; padding: 24px 24px 20px; }
.viz-chart .viz-q { margin-bottom: 44px; }
.plot {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 24px;
  height: 240px;
  margin-left: var(--axis);
  padding: 0 6%;
  border-bottom: var(--border) solid var(--rule-strong);
  background: linear-gradient(to bottom, var(--rule) 1px, transparent 1px) 0 0 / 100% calc(100% / 3);
}
.plot-axis { position: absolute; top: 0; bottom: 0; right: 100%; width: var(--axis); }
.plot-axis span {
  position: absolute;
  right: 1ch;
  bottom: calc(var(--v) / 6 * 100%);
  transform: translateY(50%);
  white-space: nowrap;
}
.col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-self: center;
  width: min(100%, 140px);
  height: calc(var(--v) / 6 * 100%);
  transform-origin: bottom;
}
.seg {
  flex: var(--v) 1 0;
  min-height: 0;
  padding: 6px 8px;
  background: var(--c);
  color: var(--ink);
  font-style: normal;
  font-weight: 500;
  overflow: hidden;
}
.seg-soft { background: color-mix(in srgb, var(--c) 40%, var(--ink)); color: var(--paper); }
.seg:empty { padding: 0; }
.col-val {
  position: absolute;
  bottom: 100%;
  left: -12px;
  right: -12px;
  margin-bottom: 8px;
  color: var(--c);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.plot-names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 10px 0 0 var(--axis);
  padding: 0 6%;
  color: var(--paper);
  font-size: var(--text-sm);
  text-align: center;
}
.viz.is-armed .col { transform: scaleY(0); }
.viz.is-armed .col-val { opacity: 0; }
.viz.is-in .col { transform: none; transition: transform var(--dur) var(--ease) 200ms; }
.viz.is-in .col-val { opacity: 1; transition: opacity 250ms var(--ease) calc(var(--dur) + 200ms); }

/* Search model tiles */
.tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--border);
  margin-top: 72px;
  background: var(--rule-strong);
  border: var(--border) solid var(--rule-strong);
}
.tile {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  min-width: 0;
}
.illo {
  display: block;
  width: 100%;
  height: auto;
  padding: 28px 24px 20px;
  background: var(--c);
  color: var(--ink);
}
/* SVG text sizes are in drawing units and scale with the illustration. */
.illo-hit,
.illo-label,
.chart-label {
  font-family: var(--font-mono);
}
.illo-hit { font-size: 15px; font-weight: 500; }
.illo-label { font-size: 12px; }
.tile-text { padding: 24px 24px 32px; }
.tile .md { color: var(--ct); }
.tile p {
  margin-top: 8px;
  font-size: var(--text-sm);
  color: var(--paper);
}

/* Cost chart */
.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .chart-label { font-size: 13px; }
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 18px;
  padding-left: 8.8%; /* lines up with the chart's first column */
  color: var(--paper);
  font-size: var(--text-xs);
}
.sq {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  vertical-align: -1px;
}
.sq-on { background: var(--lime-text); }
.sq-off { box-shadow: inset 0 0 0 1.5px var(--pink-text); }

/* Cost calculator: two sliders drive a grepvine bill and a vector DB bill side by side. */
.calc {
  margin-top: 120px;
  padding-top: 56px;
  border-top: 1px solid var(--rule);
}
.calc-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.calc-head p { color: var(--paper); max-width: 46ch; }

.calc-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 56px;
  margin-top: 48px;
}
.slider {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 16px;
}
.slider label { color: var(--paper); font-size: var(--text-sm); }
.slider output {
  font-family: var(--font-display);
  font-size: var(--text-fig);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.slider-rate {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;
}
.slider input,
.slider-ends { grid-column: 1 / -1; }
.slider-ends {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: var(--text-xs);
}

.slider input {
  --fill: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 8px 0 0;
  background: transparent;
  cursor: pointer;
}
.slider input:focus-visible { outline: none; }
.slider input::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(var(--lime-text), var(--lime-text)) 0 0 / var(--fill) 100% no-repeat, var(--rule-strong);
}
.slider input::-moz-range-track { height: 4px; background: var(--rule-strong); }
.slider input::-moz-range-progress { height: 4px; background: var(--lime-text); }
.slider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  background: var(--lime);
  border: 2px solid var(--black);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--paper);
  transition: box-shadow 150ms var(--ease);
}
.slider input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--lime);
  border: 2px solid var(--black);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--paper);
}
.slider input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--lime-text); }
.slider input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--lime-text); }

.bills {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.bill {
  display: flex;
  flex-direction: column;
  border: var(--border) solid var(--ct);
  background: var(--ink);
  min-width: 0;
}
.bill h4 {
  margin: 0;
  padding: 12px 20px;
  background: var(--c);
  color: var(--black);
  font-size: var(--text-sm);
  font-weight: 500;
}
.bill-lines {
  margin: 0;
  padding: 12px 20px 0;
  font-size: var(--text-sm);
}
.bill-lines > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--rule-strong);
}
.bill-lines > div[hidden] { display: none; }
.bill-lines dt { color: var(--paper); min-width: 0; }
.bill-lines dt span {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}
.bill-lines dd {
  margin: 0;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bill-total {
  margin-top: auto;
  padding: 24px 20px 20px;
}
.bill-total p:first-child {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  color: var(--paper);
  font-size: var(--text-sm);
}
.bill-total strong {
  font-family: var(--font-display);
  font-size: var(--text-fig);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ct);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bill h4 { display: flex; justify-content: space-between; gap: 16px; }
.bill h4 span { font-variant-numeric: tabular-nums; }
.bill-bar {
  height: 10px;
  margin-top: 16px;
  background: var(--ink-3);
}
.bill-bar i {
  display: block;
  height: 100%;
  width: 0;
  min-width: 2px;
  background: var(--ct);
  transition: width 200ms var(--ease);
}

/* Storage amplification: raw text vs what each side indexes, to scale (4.6x fills the track). */
.amp {
  padding: 20px 20px 0;
  font-size: var(--text-xs);
  color: var(--paper);
}
.amp-row {
  display: grid;
  grid-template-columns: 9ch minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.amp-row + .amp-row { margin-top: 6px; }
.amp-track { display: flex; height: 12px; }
.amp-track i { display: block; height: 100%; }
.amp-raw { width: 21.7%; background: var(--paper); }
.amp-text { width: 25%; background: color-mix(in srgb, var(--ct) 45%, var(--ink)); }
.amp-idx { width: 5.4%; background: color-mix(in srgb, var(--ct) 45%, var(--ink)); }
.amp-vec { width: 75%; background: var(--ct); }
.amp-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 10px;
  padding-left: calc(9ch + 12px);
}
.amp-key i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
}
.amp-same { background: var(--ct); }
.amp-key span:last-child { margin-left: auto; color: var(--ct); }

.calc-notes {
  margin-top: 32px;
  border-top: 1px solid var(--rule);
}
.calc-notes summary {
  display: flex;
  align-items: center;
  gap: 1.5ch;
  min-height: 44px;
  color: var(--paper);
  font-size: var(--text-sm);
  cursor: pointer;
  list-style: none;
  transition: color 200ms var(--ease);
}
.calc-notes summary::-webkit-details-marker { display: none; }
.calc-notes summary::before {
  content: "+";
  content: "+" / "";
  color: var(--lime-text);
}
.calc-notes[open] summary::before {
  content: "-";
  content: "-" / "";
}
.calc-notes summary:hover { color: var(--paper); }
.section .calc-notes .md-list {
  max-width: 96ch;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.6;
}

/* FAQ: open answers, two columns on wide screens */
.faq {
  list-style: none;
  margin: 72px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 80px;
  border-top: var(--border) solid var(--rule-strong);
}
.faq li { padding: 40px 0; border-bottom: 1px solid var(--rule); }
.faq h3 + p { margin-top: 12px; max-width: 52ch; }

/* Team: a short band, not a full section */
.section.team { padding: 72px 0; }
.team-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.team h2 { font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.5rem); }
.team h2 a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.team h2 a:hover { color: var(--lime-text); }
.team .intro { max-width: none; margin-top: 16px; font-size: var(--text-lg); }
.team-link { margin-top: 24px; font-size: var(--text-sm); }
.team-link a { display: inline-block; padding: 10px 0; color: var(--paper); text-underline-offset: 0.25em; }
.team-link a:hover { color: var(--lime-text); }
.team-mark { display: block; justify-self: start; color: var(--paper); transition: color 200ms var(--ease); }
.team-mark:hover { color: var(--lime-text); }
.team-mark .lakefs-logo { display: block; width: 240px; height: auto; }

/* Scale fan-out */
.fanout {
  margin: 72px 0 0;
  overflow-x: auto;
}
.fanout svg { display: block; width: 100%; min-width: 560px; height: auto; }
.fanout .chart-label { font-size: 9px; }
/* Plays once like the .viz figures: the agent branches out, then each search runs the field
   at one speed, so short ones land first. After that, queries stream in for as long as
   it is on screen (main.js sets .is-live). */
.fan-trunk, .fan-branch, .fan-beam { stroke-dasharray: 1; }
.fan-agent, .fan-node, .fan-hit { transform-box: fill-box; transform-origin: center; }
.fan-pkt { opacity: 0; stroke-dasharray: 8px calc(var(--gap) - 8px); }
.fanout.is-armed :is(.fan-trunk, .fan-branch, .fan-beam) { stroke-dashoffset: 1; }
.fanout.is-armed :is(.fan-agent, .fan-node, .fan-hit) { transform: scale(0); }
.fanout.is-in :is(.fan-trunk, .fan-branch, .fan-beam) { stroke-dashoffset: 0; }
.fanout.is-in :is(.fan-agent, .fan-node, .fan-hit) { transform: none; }
.fanout.is-in .fan-agent { transition: transform 200ms var(--ease); }
.fanout.is-in .fan-trunk { transition: stroke-dashoffset 200ms linear 150ms; }
.fanout.is-in .fan-branch { transition: stroke-dashoffset 400ms var(--ease) 350ms; }
.fanout.is-in .fan-node { transition: transform 150ms var(--ease) calc(700ms + var(--i) * 40ms); }
.fanout.is-in .fan-beam { transition: stroke-dashoffset var(--d) linear calc(950ms + var(--i) * 60ms); }
.fanout.is-in .fan-hit {
  transition: transform 250ms cubic-bezier(0.3, 1.6, 0.5, 1) calc(950ms + var(--i) * 60ms + var(--d));
}
.fanout.is-armed.is-in .fan-pkt {
  opacity: 1;
  transition: opacity 400ms var(--ease) 2000ms;
  animation: fan-pkt var(--t) linear calc(var(--i) * -170ms) infinite;
}
.fanout.is-armed.is-in:not(.is-live) .fan-pkt { animation-play-state: paused; }
@keyframes fan-pkt { to { stroke-dashoffset: calc(-1 * var(--gap)); } }

/* Final CTA */
.final .btn { margin-top: 40px; }
.code {
  background: var(--ink);
  color: var(--paper);
}
.code pre {
  margin: 0;
  padding: 28px 28px;
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: 1.75;
}
.code .k { color: var(--pink); }
.code .s { color: var(--lime); }
.code ::selection { background: var(--lime); color: var(--ink); }

/* Footer */
.footer { padding: 36px 0; }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links :is(a, button) {
  display: inline-block;
  padding: 10px 8px;
  background: none;
  border: 0;
  color: var(--paper);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms var(--ease);
}
.footer-links :is(a, button):hover { color: var(--lime-text); }
.footer-links button[hidden] { display: none; }
.footer-links .is-soon { padding: 10px 8px; }
.footer-team {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  color: var(--paper);
  font-size: var(--text-xs);
}
.footer-team a { display: block; padding: 10px 0; color: var(--paper); transition: color 200ms var(--ease); }
.footer-team a:hover { color: var(--lime-text); }
.footer-team .lakefs-logo { display: block; width: 77px; height: 18px; }
.copy { color: var(--muted); font-size: var(--text-xs); }

/* Cookie consent: a card pinned to the corner, not a wall over the page. main.js builds it
   on first visit and from any [data-cookie-settings] control. Categories read as a markdown
   task list; the real checkboxes sit invisibly over each row. */
.consent {
  position: fixed;
  z-index: 40;
  left: var(--gutter);
  bottom: var(--gutter);
  width: min(460px, calc(100vw - 2 * var(--gutter) - 8px));
  max-height: calc(100dvh - 2 * var(--gutter) - 8px);
  overflow-y: auto;
  padding: 24px;
  background: var(--ink-2);
  border: var(--border) solid var(--paper);
  box-shadow: 8px 8px 0 var(--lime);
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: 1.6;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
@starting-style {
  .consent { opacity: 0; transform: translateY(12px); }
}
.consent h2 {
  font-size: var(--text-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
/* Keep the marker inside the card where wide screens hang it in the margin */
.consent h2 > .md { position: static; padding-right: 0; }
.consent h2 + p { margin-top: 10px; }
.consent p a {
  color: var(--paper);
  text-decoration-color: var(--lime-text);
  text-underline-offset: 0.2em;
  transition: color 200ms var(--ease);
}
.consent p a:hover { color: var(--lime-text); }

.consent-prefs {
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--rule-strong);
}
.pref {
  position: relative;
  display: grid;
  grid-template-columns: 4ch minmax(0, 1fr);
  column-gap: 8px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--rule-strong);
  cursor: pointer;
}
.pref input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.pref input:disabled { cursor: default; }
.pref-box {
  grid-row: span 2;
  font-family: var(--font-mono);
  color: var(--muted);
  transition: color 200ms var(--ease);
}
.pref-box::before { content: "[ ]"; content: "[ ]" / ""; }
.pref input:checked + .pref-box::before { content: "[x]"; content: "[x]" / ""; }
.pref input:checked:enabled + .pref-box { color: var(--lime-text); }
.pref b { color: var(--paper); font-weight: 500; transition: color 200ms var(--ease); }
.pref:has(input:enabled):hover :is(b, .pref-box) { color: var(--lime-text); }
.pref:has(input:focus-visible) { outline: 2px solid var(--lime-text); outline-offset: 2px; }
.pref b + span { grid-column: 2; color: var(--muted); font-size: var(--text-xs); }

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
.consent-actions .btn { min-height: 44px; padding: 0 16px; }
.consent-actions .btn[hidden] { display: none; }
.consent-link {
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--paper);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--lime-text);
  text-underline-offset: 0.25em;
  cursor: pointer;
  transition: color 200ms var(--ease);
}
.consent-link:hover { color: var(--lime-text); }
.consent-link[hidden] { display: none; }

@media (max-width: 419px) {
  .consent { padding: 20px 16px; }
  .consent-actions .btn { flex: 1 1 auto; }
}

/* Legal pages: one reading column beside a sticky contents list. Data tables collapse to
   labelled stacks on small screens. */
.legal { padding: 72px 0 120px; border-bottom: var(--border) solid var(--rule); }
.legal-head {
  padding-bottom: 40px;
  border-bottom: var(--border) solid var(--rule-strong);
}
.legal-head h1 { font-size: var(--text-xl); line-height: 1.04; letter-spacing: -0.02em; }
.legal-meta {
  margin-top: 20px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  margin-top: 48px;
}

.toc {
  align-self: start;
  padding: 20px 22px;
  border: 1px solid var(--rule-strong);
  background: var(--ink-2);
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  font-size: var(--text-sm);
}
.toc li { position: relative; padding-left: 2ch; }
.toc li::before {
  content: "*";
  content: "*" / "";
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--lime-text);
}
.toc a {
  display: block;
  padding: 6px 0;
  color: var(--text-2);
  line-height: 1.4;
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.toc a:hover { color: var(--lime-text); }

.prose { max-width: 74ch; color: var(--text-2); }
.prose section + section {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid var(--rule);
}
.prose h2 {
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 24px;
}
.prose h3 { font-size: var(--text-base); letter-spacing: 0; margin: 36px 0 12px; }
.prose h2 + h3 { margin-top: 0; }
.prose h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.25;
  color: var(--paper);
  margin: 0 0 20px;
}
.prose p + p,
.prose p + .md-list,
.prose .md-list + p,
.prose p + ol,
.prose ol + p,
.prose p + .legal-table,
.prose .legal-table + h3,
.prose p + address { margin-top: 16px; }
.prose .md-list { margin-top: 0; color: inherit; gap: 8px; }
.prose .link-btn {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.prose :is(a, .link-btn) {
  color: var(--paper);
  text-decoration-color: var(--lime-text);
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
  transition: color 200ms var(--ease);
}
.prose :is(a, .link-btn):hover { color: var(--lime-text); }
.prose strong { color: var(--paper); font-weight: 500; }
.prose code {
  font-size: 0.875em;
  color: var(--lime-text);
  white-space: nowrap;
}
/* Clauses lettered (a), (b) and numbered (i), (ii), as in the source agreements. */
.prose ol.alpha,
.prose ol.roman {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  counter-reset: clause;
}
.prose ol.alpha > li,
.prose ol.roman > li {
  position: relative;
  padding-left: 4ch;
  counter-increment: clause;
}
.prose ol.alpha > li::before,
.prose ol.roman > li::before {
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.7rem;
  color: var(--lime-text);
}
.prose ol.alpha > li::before { content: "(" counter(clause, lower-alpha) ")"; }
.prose ol.roman > li::before { content: "(" counter(clause, lower-roman) ")"; }
.prose ol.roman { margin-top: 10px; }
.prose .caps {
  text-transform: uppercase;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
}

.data-block {
  margin: 32px 0;
  padding: 24px 20px;
  border: var(--border) solid var(--rule-strong);
  background: var(--ink-2);
}
.data-block dl { margin: 0; }
.data-block dt {
  color: var(--paper);
  font-weight: 500;
}
.data-block dt + dd { margin: 8px 0 0; }
.data-block dd + dt { margin-top: 20px; }
.data-block dd p + p { margin-top: 12px; }
.data-block .legal-table { margin-top: 28px; }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.legal-table thead th {
  padding: 0 16px 12px 0;
  border-bottom: var(--border) solid var(--rule-strong);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  text-align: left;
}
.legal-table tbody th,
.legal-table td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.legal-table tbody th { color: var(--paper); font-weight: 500; }
.legal-table td p + .md-list { margin-top: 8px; }
.legal-table .md-list { gap: 4px; }

@media (max-width: 719px) {
  .legal { padding: 48px 0 80px; }
  .legal-table thead { display: none; }
  .legal-table tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .legal-table tbody th,
  .legal-table td { display: block; padding: 0; border: 0; }
  .legal-table td { margin-top: 12px; }
  .legal-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }
  .data-block { padding: 20px 16px; }
}

@media (min-width: 1024px) {
  .legal { padding: 96px 0 152px; }
  .legal-grid { grid-template-columns: 260px minmax(0, 1fr); gap: 80px; margin-top: 64px; }
  .toc { position: sticky; top: 96px; max-height: calc(100vh - 128px); overflow-y: auto; }
}

/* Depth: the hero is three planes. Behind it, a field of documents in columns, like the
   shards in the terminal's minimap: they line up at rest and come apart as the hero scrolls
   away, each column falling behind at its own rate. The terminal runs ahead of the page and
   leaves its hard shadow behind, and the copy rides at 1x. Further down, figures drift a
   little against the text beside them. Driven by scroll timelines on the compositor; static
   where those are missing or motion is reduced. */
.hero {
  position: relative;
  overflow: clip;
}
.hero > .wrap { position: relative; z-index: 1; }
.hero-field {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 12px;
  padding: 0 12px;
  pointer-events: none;
  --rows: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='36'%3E%3Cpath d='M0 4h14v3H0zM18 4h6v3h-6zM28 4h22v3H28zM54 4h9v3h-9zM70 4h30v3H70zM104 4h12v3h-12zM0 16h24v3H0zM28 16h10v3H28zM42 16h5v3h-5zM60 16h18v3H60zM82 16h7v3h-7zM94 16h20v3H94zM0 28h8v3H0zM12 28h17v3H12zM36 28h26v3H36zM66 28h4v3h-4zM74 28h12v3H74zM100 28h16v3h-16z'/%3E%3C/svg%3E");
  -webkit-mask: radial-gradient(140% 110% at 100% 0, #000 25%, transparent 85%);
  mask: radial-gradient(140% 110% at 100% 0, #000 25%, transparent 85%);
}
/* Columns reach 480px above the hero (a whole number of rows) so a falling column never
   shows its top. Each starts the row pattern at a different point. */
.hero-field i {
  position: relative;
  margin-top: -480px;
}
.hero-field i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--muted) 30%, transparent);
  -webkit-mask: var(--rows) calc(var(--i) * -29px) 0 / 120px 36px;
  mask: var(--rows) calc(var(--i) * -29px) 0 / 120px 36px;
}
/* A match: one short dash on a row, in an accent. --hit sits on a row (12n + 4). The script
   moves matches around; these three are where they rest without it. */
.hero-field i[data-hit]::after {
  content: "";
  position: absolute;
  left: var(--x);
  top: calc(480px + var(--hit));
  width: 18px;
  height: 3px;
  background: var(--c);
}
@media (max-width: 719px) {
  .hero-field { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .hero-field i:nth-child(n + 9) { display: none; }
}
.hero .term { position: relative; }

:root { --drift: 56px; --lift: -80px; }
/* Stacked on phones the terminal sits 56px under the readouts, so it rises less. */
@media (max-width: 719px) {
  :root { --drift: 28px; --lift: -48px; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero-field i,
    .hero .term,
    .hero .term::before {
      animation: linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    .hero-field i { animation-name: hero-shard; }
    /* The moving terminal is its own stacking context, so its shadow and fill are both
       pseudo-elements below the content: the shadow first, the fill over it. */
    .hero .term {
      animation-name: hero-front;
      background: none;
      box-shadow: none;
    }
    .hero .term::before,
    .hero .term::after {
      content: "";
      position: absolute;
      z-index: -1;
    }
    .hero .term::before {
      inset: calc(-1 * var(--border));
      background: var(--mode);
      animation-name: hero-shadow;
      transition: background-color 200ms var(--ease);
    }
    .hero .term::after {
      inset: 0;
      background: var(--ink-2);
    }

    .point .viz,
    .fanout,
    .team-mark,
    .final .code {
      animation: drift linear both;
      animation-timeline: view();
    }
  }
}
@keyframes hero-shard { to { translate: 0 var(--dy); } }
@keyframes hero-front { to { translate: 0 var(--lift); } }
@keyframes hero-shadow { from { translate: 8px 8px; } to { translate: 20px 20px; } }
@keyframes drift {
  from { translate: 0 var(--drift); }
  to { translate: 0 calc(-1 * var(--drift)); }
}

/* Responsive */
@media (max-width: 719px) {
  .nav nav { display: none; }
  .nav-inner { justify-content: space-between; gap: 12px; }
  .theme-toggle { margin-left: auto; }
  .hero { padding: 48px 0 72px; }
  .hero h1 { margin-bottom: 40px; }
  .hero-grid { padding-top: 32px; }
  .cta-row .btn { flex: 1 1 100%; }
  .term-body { padding: 18px 16px; font-size: var(--text-xs); }
  .stats > div { padding: 8px 10px; }
  .term-foot p { padding: 0 16px; }
  .hits li { grid-template-columns: minmax(0, 1fr); }
  .n { grid-row: auto; }
  .section { padding: 80px 0; }
  .tiles, .fanout, .points { margin-top: 48px; }
  .viz-chart { padding: 18px 16px; }
  .app-body { padding: 16px 14px 20px; font-size: var(--text-xs); }
  .app-input { margin: 0 14px 14px; }
  .viz-chart { --axis: 3rem; }
  .plot, .plot-names { padding: 0; gap: 16px; }
  .plot { height: 200px; }
  .calc { margin-top: 80px; }
  .slider { grid-template-columns: minmax(0, 1fr); }
  .slider output { margin-top: 6px; text-align: left; }
  .footer-team, .copy { margin-left: 0; width: 100%; }
}

/* Logo, toggle and trial button share one row down to 360px. */
@media (max-width: 419px) {
  .nav-inner { gap: 6px; }
  .nav .btn-sm { padding: 0 10px; font-size: var(--text-xs); }
}

@media (min-width: 640px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-inputs, .bills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  :root { --gutter: 40px; }
  .hero { padding: 96px 0 128px; }
  .hero-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 80px; }
  /* Both columns share one height: the readouts sit on the terminal's bottom edge. */
  .hero-copy { display: flex; flex-direction: column; }
  .readouts { margin-top: auto; }
  .cta-row { margin-bottom: 56px; }
  .term { align-self: stretch; display: flex; flex-direction: column; }
  .term-body { flex: 1; }
  .section { padding: 152px 0; }
  .section-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 80px;
    align-items: end;
  }
  .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 96px; }
  .team-inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: 80px; }
  .team-mark { justify-self: end; }
  .team-mark .lakefs-logo { width: 300px; }
  .point { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 80px; padding: 56px 0; align-items: center; }
  /* Even points flip, text on the right; the DOM keeps text first for small screens. */
  .point:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .point:nth-child(even) > div { grid-column: 2; grid-row: 1; }
  .calc { margin-top: 152px; }
  .calc-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 80px; align-items: end; }
  .final .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1140px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Hang the markdown markers in the margin so heading text sits on the grid edge */
@media (min-width: 1360px) {
  h1, h2 { position: relative; }
  h1 > .md,
  h2 > .md {
    position: absolute;
    right: 100%;
    top: 0;
    padding-right: 0.32em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}