/* Open Context Engine — opencontextengine.com
   Direction: "the instrument, not the brochure" — an editor at night.
   One canvas hue, elevation by lightness only, one cyan accent (~10%),
   monospace structure labels, evidence-dense. */

:root {
  /* surfaces — one blue-black hue, lightness steps only */
  --void: #0a0d12;      /* page canvas */
  --panel: #10151c;     /* raised card (+5%) */
  --lift: #161c25;      /* titlebars, hovers (+9%) */
  --overlay: #1b222d;   /* highest (menus) */
  /* edges — findable, never loud */
  --edge: rgba(219, 230, 242, 0.08);
  --edge-hi: rgba(219, 230, 242, 0.16);
  /* ink — four tiers */
  --ink: #e8edf4;
  --ink-2: #a8b3c0;
  --ink-3: #6e7a88;
  --ink-4: #48525e;
  /* the one accent: a terminal prompt */
  --prompt: #45c4e9;
  --prompt-dim: rgba(69, 196, 233, 0.12);
  /* semantic — only where meaning exists */
  --ok: #3fb950;
  --warn: #e3b341;
  --del: #f47067;
  --add-bg: rgba(63, 185, 80, 0.12);
  --del-bg: rgba(244, 112, 103, 0.12);

  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* type scale — 1.25 from 15.5px body */
  --t-meta: 12px;
  --t-small: 13.5px;
  --t-body: 15.5px;
  --t-h4: 18px;
  --t-h3: 22px;
  --t-h2: 28px;
  --t-h1: 40px;
  --t-display: clamp(38px, 5.2vw, 56px);

  /* spacing on an 8px grid */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px;

  --r-s: 6px; --r-m: 10px; --r-l: 14px;
  --measure: 62ch;
  --site-w: 1104px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--prompt-dim); color: var(--ink); }

h1, h2, h3, h4 { color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-display); font-weight: 600; letter-spacing: -0.022em; line-height: 1.12; }
h2 { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.016em; line-height: 1.2; }
h3 { font-size: var(--t-h4); font-weight: 600; letter-spacing: -0.008em; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--prompt); }
a:focus-visible, button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--void), 0 0 0 4px var(--prompt);
  border-radius: var(--r-s);
}
code, pre, .mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--site-w); margin: 0 auto; padding: 0 var(--s3); }

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(10, 13, 18, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--edge);
}
.nav-inner { display: flex; align-items: center; gap: var(--s4); height: 60px; }
.wordmark { font-family: var(--mono); font-size: 17px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.wordmark .caret { color: var(--prompt); animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.nav-links { display: flex; gap: var(--s3); margin-left: auto; }
.nav-links a { font-size: var(--t-small); color: var(--ink-2); font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav .install-chip { margin-left: var(--s2); }

/* the install command — appears in nav and hero, one component */
.install-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
  background: var(--panel); border: 1px solid var(--edge-hi);
  border-radius: var(--r-s); padding: 7px 12px;
  cursor: pointer; transition: border-color 140ms var(--ease), color 140ms var(--ease);
}
.install-chip:hover { border-color: var(--prompt); color: var(--ink); }
.install-chip:active { transform: scale(0.97); }
.install-chip .ic-copy { color: var(--ink-4); font-size: 11px; }
.install-chip.copied .ic-copy { color: var(--ok); }

/* ── chunk labels: every section is a retrieved chunk ────────────────── */
.chunk {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-3);
  margin-bottom: var(--s2);
}
.chunk::before { content: "//"; color: var(--ink-4); }
.chunk .score {
  color: var(--prompt); background: var(--prompt-dim);
  padding: 1px 7px; border-radius: 4px; font-size: 11px;
}

/* ── hero ────────────────────────────────────────────────────────────── */
/* padding-block only — .wrap owns the horizontal gutters */
.hero { padding-block: var(--s12) var(--s8); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: var(--s8); align-items: start; }
.hero h1 .dim { color: var(--ink-3); }
.hero .sub { margin-top: var(--s3); font-size: var(--t-h4); line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.hero-ctas { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-small); font-weight: 500;
  border-radius: var(--r-s); padding: 10px 18px;
  border: 1px solid transparent; cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), transform 100ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--prompt); color: #06222c; border-color: var(--prompt); }
.btn-primary:hover { background: #63d2f2; color: #06222c; }
.btn-ghost { color: var(--ink); border-color: var(--edge-hi); background: transparent; }
.btn-ghost:hover { border-color: var(--prompt); color: var(--ink); background: var(--panel); }

.hero-stats { display: flex; gap: var(--s4); margin-top: var(--s6); flex-wrap: wrap; }
.stat { font-family: var(--mono); }
.stat .k { display: block; font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }
.stat .v { display: block; font-size: 22px; font-weight: 500; color: var(--ink); margin-top: 2px; }
.stat .v em { font-style: normal; font-size: 13px; color: var(--ink-3); }

/* ── terminal window — the signature ─────────────────────────────────── */
.term {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 24px 48px -24px rgba(0, 0, 0, 0.5);
}
.term-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--lift); border-bottom: 1px solid var(--edge);
  padding: 9px 14px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
}
.term-bar .hint { color: var(--ink-4); }
.term-body { padding: var(--s2) var(--s3); font-family: var(--mono); font-size: 13px; line-height: 1.85; overflow-x: auto; }
.term-body pre { margin: 0; }
.t-p { color: var(--prompt); }
.t-in { color: var(--ink); }
.t-dim { color: var(--ink-3); }
.t-faint { color: var(--ink-4); }
.t-ok { color: var(--ok); }
.t-warn { color: var(--warn); }
.t-caret { color: var(--prompt); animation: blink 1.2s steps(1) infinite; }

/* ── sections ────────────────────────────────────────────────────────── */
.section { padding: var(--s12) 0; border-top: 1px solid var(--edge); }
.section .lede { margin-top: var(--s2); max-width: var(--measure); color: var(--ink-2); font-size: var(--t-h4); line-height: 1.55; }

/* features as ranked retrieval results */
.results { margin-top: var(--s6); display: grid; gap: 0; border-top: 1px solid var(--edge); }
.result {
  display: grid; grid-template-columns: 56px minmax(0, 300px) minmax(0, 1fr) 72px;
  gap: var(--s3); padding: var(--s3) var(--s1);
  border-bottom: 1px solid var(--edge); align-items: baseline;
  transition: background 140ms var(--ease);
}
.result:hover { background: var(--panel); }
.result .rank { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-4); }
.result h3 { font-size: 16px; }
.result p { font-size: var(--t-small); color: var(--ink-2); line-height: 1.6; }
.result .score { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-3); text-align: right; }

/* two-up panels */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s3); margin-top: var(--s6); }
.card {
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-m);
  padding: var(--s3);
}
.card h3 { margin-bottom: var(--s1); }
.card p { font-size: var(--t-small); }
.card .mono-block {
  margin-top: var(--s2); background: var(--void); border: 1px solid var(--edge);
  border-radius: var(--r-s); padding: var(--s2);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.8; color: var(--ink-2);
  overflow-x: auto;
}
.card .mono-block pre { margin: 0; }

/* offline matrix */
.matrix { margin-top: var(--s2); width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.matrix th, .matrix td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--edge); }
.matrix th { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-3); letter-spacing: 0.04em; }
.matrix td { color: var(--ink-2); }
.matrix td:first-child { color: var(--ink); font-weight: 500; }
.matrix .yes { color: var(--ok); font-family: var(--mono); }

/* hash-chain divider — the audit log, as a rule */
.hashchain { display: flex; align-items: center; gap: 12px; margin: var(--s8) 0; }
.hashchain span { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.hashchain i { flex: 1; border-top: 1px solid var(--edge); }

/* ── pricing spec sheets ─────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s3); margin-top: var(--s6); }
.plan {
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-l);
  padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3);
}
.plan.featured { border-color: rgba(69, 196, 233, 0.4); }
.plan .tier { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; }
.plan.featured .tier { color: var(--prompt); }
.plan .price { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); font-size: 34px; font-weight: 500; line-height: 1; display: flex; align-items: baseline; gap: 10px; }
.plan .price em { font-style: normal; font-size: 13px; color: var(--ink-3); font-weight: 400; font-family: var(--sans); }
.plan .spec { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: var(--t-small); }
.plan .spec li { display: flex; gap: 10px; align-items: baseline; color: var(--ink-2); }
.plan .spec li::before { content: "→"; font-family: var(--mono); color: var(--ink-4); font-size: 12px; }
.plan .spec li.hl { color: var(--ink); }
.plan .spec li.hl::before { content: "→"; color: var(--prompt); }
.plan .btn { justify-content: center; margin-top: auto; }
.plan .fineprint { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }

/* ── footer ──────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--edge); padding: var(--s6) 0 var(--s8); }
.foot { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; align-items: baseline; }
.foot .cols { display: flex; gap: var(--s6); flex-wrap: wrap; }
.foot a { font-size: var(--t-small); color: var(--ink-3); display: block; margin-top: 6px; }
.foot a:hover { color: var(--ink); }
.foot .col-h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-4); }
.foot .legal { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); }

/* reveal on scroll — progressive enhancement: content is fully visible unless
   JS opts in via html.js-reveal (so no-JS, crawlers, and find-in-page always
   see the page). transform/opacity only; honors reduced motion. */
.js-reveal .reveal { opacity: 0; transform: translateY(10px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); }
.js-reveal .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .wordmark .caret, .t-caret { animation: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 880px) {
  .hero { padding-block: var(--s8) var(--s6); }
  .hero-grid { grid-template-columns: 1fr; }
  .result { grid-template-columns: 40px 1fr; row-gap: 6px; }
  .result p { grid-column: 2; }
  .result .score { display: none; }
  .nav-links a.optional { display: none; }
  .section { padding: var(--s8) 0; }
}