/* PgDog landing v2 — turbopuffer-inspired aesthetic, PgDog palette */

@font-face {
  font-family: "Berkeley Mono";
  src: url("/assets/fonts/BerkeleyMono-Regular.woff2") format("woff2"),
       url("/assets/fonts/BerkeleyMono-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Berkeley Mono";
  src: url("/assets/fonts/BerkeleyMono-Italic.woff2") format("woff2"),
       url("/assets/fonts/BerkeleyMono-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Berkeley Mono";
  src: url("/assets/fonts/BerkeleyMono-Bold.woff2") format("woff2"),
       url("/assets/fonts/BerkeleyMono-Bold.woff") format("woff");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Berkeley Mono";
  src: url("/assets/fonts/BerkeleyMono-BoldItalic.woff2") format("woff2"),
       url("/assets/fonts/BerkeleyMono-BoldItalic.woff") format("woff");
  font-weight: 600 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #0f1a3a;
  --bg-elev: #16224a;
  --bg-elev-2: #1b2957;
  --border: rgba(242, 245, 255, 0.35);
  --border-strong: rgba(242, 245, 255, 0.55);
  --fg: #f2f5ff;
  --fg-muted: #c9d3ef;
  --fg-dim: #97a5cc;
  --accent: #7aa2ff;
  --accent-strong: #a8c0ff;
  --accent-warm: #f7b955;
  --success: #7dd3a8;
  --danger: #ff8a8a;
  --mono: "Berkeley Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Berkeley Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Berkeley Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw: 1180px;
  --density: 1;

  /* component tokens derived from the palette */
  --btn-primary-fg: #0a1130;
  --btn-hover-bg: rgba(255, 255, 255, 0.03);
  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%239faed6' fill='none' stroke-width='1.2'/></svg>");
  --tint-accent: rgba(122, 162, 255, 0.04);
  --tint-accent-strong: rgba(122, 162, 255, 0.35);
  --bg-glow-1: rgba(122, 162, 255, 0.08);
  --bg-glow-2: rgba(247, 185, 85, 0.04);
  --logo-filter: brightness(0) invert(95%);
  --logo-filter-hover: brightness(0) invert(100%);
  --nav-icon-filter: none;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #ffffff;
  --bg-elev: #f5f7fb;
  --bg-elev-2: #eaeff7;
  --border: rgba(15, 26, 58, 0.10);
  --border-strong: rgba(15, 26, 58, 0.22);
  --fg: #0a1230;
  --fg-muted: #2a3456;
  --fg-dim: #4a5680;
  --accent: #3b5fcc;
  --accent-strong: #1e3a99;
  --accent-warm: #b8740e;
  --success: #2c8a5b;
  --danger: #c53030;

  --btn-primary-fg: #ffffff;
  --btn-hover-bg: rgba(15, 26, 58, 0.04);
  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%237c89aa' fill='none' stroke-width='1.2'/></svg>");
  --tint-accent: rgba(59, 95, 204, 0.05);
  --tint-accent-strong: rgba(59, 95, 204, 0.20);
  --bg-glow-1: transparent;
  --bg-glow-2: transparent;
  --logo-filter: brightness(0) invert(20%);
  --logo-filter-hover: brightness(0) invert(0%);
  --nav-icon-filter: invert(1);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-image:
    radial-gradient(ellipse 1400px 700px at 50% -200px, var(--bg-glow-1), transparent 60%),
    radial-gradient(ellipse 900px 500px at 90% 400px, var(--bg-glow-2), transparent 60%);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }

button { font-family: inherit; cursor: pointer; }

::selection { background: var(--tint-accent-strong); }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- announcement ---------- */
.announce {
  max-width: var(--maxw);
  margin: 0 auto;
  font-size: 13px;
  color: var(--fg-muted);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.announce .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-warm);
  box-shadow: 0 0 6px var(--accent-warm);
}
.announce a { color: var(--fg); border-bottom: 1px dotted var(--border-strong); }
.announce .arrow { color: var(--fg-dim); margin-left: 4px; }
@media (max-width: 560px) {
  .announce { font-size: 12px; padding: 6px 16px; gap: 4px 8px; }
}

/* ---------- nav ---------- */
.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(24px * var(--density)) 32px calc(8px * var(--density));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav .brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; color: var(--fg);
  font-family: var(--mono);
  font-size: 26px;
  letter-spacing: -0.02em;
}
.nav .brand img { display: block; width: 44px; height: 44px; }
.nav .brand .brand-name { font-weight: 700; }
.nav svg, .nav .right .btn img { display: block; flex-shrink: 0; }
.nav .links { display: flex; gap: 26px; align-items: center; }
.nav .links a { color: var(--fg-muted); font-size: 16px; }
.nav .btn { font-size: 16px; }
.nav .links a:hover { color: var(--fg); }
.nav .links a.active { color: var(--fg); border-bottom: 1px solid var(--fg); padding-bottom: 2px;}
.nav .right { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.nav .right .btn { flex-shrink: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 2px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--fg);
  transition: all 120ms ease;
  white-space: nowrap;
}
.btn:hover { border-color: var(--fg-muted); background: var(--btn-hover-bg); }
.btn.primary {
  background: var(--accent);
  color: var(--btn-primary-fg);
  border-color: var(--accent);
  font-weight: 600;
}
.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.ghost { border-color: var(--border); }

/* ---------- hero ---------- */
.hero {
  padding: calc(64px * var(--density)) 24px calc(36px * var(--density));
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 20px;
  align-items: center;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: lowercase;
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero-kicker .kicker-mark { color: var(--accent-warm); }
.hero h1 {
  font-family: var(--mono);
  font-size: 30px;
  line-height: 1.15;
  font-weight: 500;
  margin: 0 0 22px;
  letter-spacing: -0.02em;
  color: var(--fg);
  white-space: nowrap;
}
.hero h1 em {
  font-family: var(--mono);
  font-style: italic;
  font-weight: 500;
  color: inherit;
  letter-spacing: -0.01em;
}
.hero h1 .accent { color: var(--accent); }
.hero .sub {
  font-size: 17px;
  color: var(--fg-muted);
  margin: 0 0 28px;
  max-width: 560px;
  line-height: 1.55;
}
.hero .cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 36px; }
.hero .cta .btn { font-size: 16px; }
.hero .cta .inline-link {
  color: var(--fg-muted); font-size: 16px; padding: 9px 6px;
  border-bottom: 1px dotted var(--border-strong);
}
.hero .cta .inline-link:hover { color: var(--fg); }
.hero-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  padding-top: 18px;
  max-width: 520px;
}
.hero-meta > div {
  display: flex; flex-direction: column; gap: 3px;
  border-left: 1px solid var(--border);
  padding-left: 14px;
}
.hero-meta > div:first-child { border-left: none; padding-left: 0; }
.hero-meta .num { font-family: var(--mono); color: var(--fg); font-size: 14px; }
.hero-meta .lbl { font-family: var(--mono); color: var(--fg-dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.hero-diagram {
  background: var(--tint-accent);
  border: 1px solid var(--border);
  padding: 0;
  aspect-ratio: 410/220;
}

/* ---------- install strip ---------- */
.install {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px calc(48px * var(--density));
}
.install > input[type=radio] { display: none !important; }
.install .tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: -1px;
}
.install .tab {
  padding: 8px 14px;
  font-size: 14px;
  color: var(--fg-dim);
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--mono);
  user-select: none;
  display: inline-block;
}
.install .tab:hover { color: var(--fg-muted); }

.install .install-panels > [data-install] { display: none; }
.install > input#i-helm:checked ~ .install-panels > [data-install="helm"],
.install > input#i-docker:checked ~ .install-panels > [data-install="docker"] { display: block; }

.install > input#i-helm:checked ~ .tabs > [for="i-helm"],
.install > input#i-docker:checked ~ .tabs > [for="i-docker"] {
  color: var(--fg);
  border-color: var(--border);
  background: var(--bg-elev);
}
.codeblock {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 0 2px 2px 2px;
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg);
  overflow-x: auto;
  position: relative;
}
.codeblock > div { white-space: pre; }
.codeblock .ln {
  color: var(--fg-dim);
  user-select: none;
  display: inline-block;
  width: 2ch;
  text-align: right;
  margin-right: 14px;
  font-variant-numeric: tabular-nums;
}
.codeblock .cm { color: var(--fg-dim); }
.codeblock .kw { color: var(--accent); }
.codeblock .str { color: var(--accent-warm); }
.codeblock .copy {
  position: absolute; top: 10px; right: 10px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--fg-muted); font-size: 10px; padding: 3px 7px;
  font-family: var(--mono);
}
.codeblock .copy:hover { color: var(--fg); }

/* ---------- stats line ---------- */
.stats {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(10px * var(--density)) 24px;
  color: var(--fg-muted);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.stats::before,
.stats::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--border);
}
.stats .num { color: var(--fg); font-weight: 500; }

/* ---------- logo wall ---------- */
.logos {
  padding: calc(36px * var(--density)) 24px;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px 40px;
  color: var(--fg-muted);
}
.logos .logo-cell {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logos .logo-img {
  max-width: 140px;
  max-height: 28px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: var(--logo-filter);
  transition: filter 120ms ease;
}
.logos .logo-img:hover { filter: var(--logo-filter-hover); }
@media (max-width: 900px) {
  .logos { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (max-width: 560px) {
  .logos { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- section ---------- */
.section {
  padding: calc(48px * var(--density)) 24px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.section-eyebrow {
  font-size: 15px;
  color: var(--fg-dim);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

/* ---------- calculator + perf two-column ---------- */
.twocol {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 18px;
  padding: calc(24px * var(--density)) 24px calc(48px * var(--density));
  max-width: var(--maxw);
  margin: 0 auto;
}
.panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 18px 20px;
}
.panel .panel-title {
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
}

/* calculator */
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin-bottom: 18px;
}
.field label {
  display: block;
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: none;
  margin-bottom: 6px;
  border-bottom: 1px dotted var(--border);
  padding-bottom: 4px;
}
.field select, .field input[type=text] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  border-radius: 2px;
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.slider-row {
  display: grid;
  grid-template-columns: 110px 100px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px dotted var(--border);
}
.slider-row:first-of-type { border-top: 1px solid var(--border); margin-top: 4px; }
.slider-row .key {
  font-size: 12px; color: var(--fg-muted);
  border-bottom: 1px dotted var(--border);
  padding-bottom: 2px; width: fit-content;
}
.slider-row .val {
  font-size: 12px; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.slider-row .val .unit { color: var(--fg-dim); display: block; font-size: 10.5px; }
.slider-wrap { position: relative; }

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 18px;
  background: transparent;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--border-strong);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  background: var(--fg);
  border: 1px solid var(--bg);
  border-radius: 1px;
  margin-top: -6px;
  cursor: grab;
}
input[type=range]::-moz-range-track { height: 2px; background: var(--border-strong); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; background: var(--fg); border: 1px solid var(--bg); border-radius: 1px; cursor: grab; }

.calc-result {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--tint-accent);
}
.calc-result .label { font-size: 12px; color: var(--fg-muted); }
.calc-result .sub { font-size: 11px; color: var(--fg-dim); display: block; }
.calc-result .num {
  font-size: 20px; font-variant-numeric: tabular-nums;
  color: var(--fg); font-weight: 500;
}
.calc-result .num .unit { color: var(--fg-muted); font-size: 12px; }

/* perf panel */
.perf-tabs { display: flex; gap: 0; margin-bottom: 14px; }
.perf-tab {
  padding: 6px 12px; font-size: 12px;
  border: 1px solid var(--border);
  background: transparent; color: var(--fg-dim);
  font-family: var(--mono); cursor: pointer;
  border-right: none;
}
.perf-tab:last-of-type { border-right: 1px solid var(--border); }
.perf-tab.active { background: var(--bg-elev-2); color: var(--fg); }

.perf-workload {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--fg-muted);
  padding: 8px 0; border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: 40px 1fr 60px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  font-size: 11px;
  color: var(--fg-muted);
}
.bar-row .bar-key { color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.bar-row .bar-track { height: 16px; position: relative; }
.bar-row .bar-fill {
  height: 16px;
  background-image: repeating-linear-gradient(
    90deg,
    currentColor 0 4px,
    transparent 4px 6px
  );
  color: var(--accent);
  position: absolute; left: 0; top: 0;
}
.bar-row.cold .bar-fill { color: var(--fg-muted); }
.bar-row .bar-val { text-align: right; color: var(--fg); font-variant-numeric: tabular-nums; }
.bar-row .bar-val .alt { color: var(--fg-dim); }

.perf-legend {
  display: flex; gap: 18px;
  font-size: 11px; color: var(--fg-muted);
  padding-top: 10px; border-top: 1px solid var(--border);
  margin-top: 8px;
}
.perf-legend .swatch {
  display: inline-block; width: 10px; height: 10px;
  background-image: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px);
  margin-right: 6px;
  vertical-align: middle;
}
.perf-footer {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--fg-muted);
  display: flex; justify-content: space-between;
}
.perf-footer a { color: var(--fg); }

/* ---------- features ---------- */
.features-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 32px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--border);
}
.features-head h2 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 34px;
  letter-spacing: -0.035em;
  margin: 0;
  line-height: 1.1;
}
.features-head h2 em,
.features-head h2 em * {
  font-family: var(--mono);
  font-style: italic;
  font-weight: 500;
  color: var(--fg) !important;
}
.features-head .meta { font-size: 11px; color: var(--fg-dim); }

.features .feature-panels {
  display: flex !important;
  flex-direction: column;
  gap: 64px;
}
.features .feature-panels > .feature-body {
  display: grid !important;
  grid-template-columns: 1fr 1.15fr;
  grid-template-areas: "kicker kicker" "text code";
  column-gap: 36px;
  row-gap: 14px;
  align-items: start;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.features .feature-panels > .feature-body:first-child { padding-top: 0; border-top: 0; }
.features .feature-panels > .feature-body > .feature-kicker { grid-area: kicker; }
.features .feature-panels > .feature-body > .feature-text { grid-area: text; }
.features .feature-panels > .feature-body > .codeblock { grid-area: code; margin-top: 0; }
.features .feature-panels > .feature-body:nth-child(even) {
  grid-template-areas: "kicker kicker" "code text";
}
.feature-kicker {
  font-family: var(--mono);
  font-size: 20px;
  color: var(--fg-dim);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.feature-body h3 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 28px;
  margin: 0 0 14px;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.feature-body .feature-desc { color: var(--fg-muted); font-size: 15px; margin-bottom: 18px; }
.feature-list {
  list-style: none; padding: 0; margin: 0;
  font-size: 15px;
}
.feature-list li {
  padding: 9px 0;
  border-top: 1px dotted var(--border);
  color: var(--fg-muted);
  display: grid; grid-template-columns: 16px 1fr; gap: 10px;
}
.feature-list li:first-child { border-top: none; padding-top: 0; }
.feature-list li .mark { color: var(--accent); }
.feature-list li strong { color: var(--fg); font-weight: 500; }

/* ---------- testimonials ---------- */
.testis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  padding: calc(24px * var(--density)) 24px calc(56px * var(--density));
  max-width: var(--maxw);
  margin: 0 auto;
}
.testi {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 18px 20px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.testi .who { margin-top: auto; }
.testi { grid-column: span 2; }
.testi:nth-child(n+4) { grid-column: span 3; }
.testi .quote {
  font-style: italic;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.6;
}
.testi .quote::before { content: "\"  "; color: var(--fg-dim); }
.testi .quote::after { content: "  \""; color: var(--fg-dim); }
.testi .who {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px;
  padding-top: 12px;
  border-top: 1px dotted var(--border);
}
.testi .who .name { color: var(--fg); }
.testi .who .title { color: var(--fg-dim); display: block; font-size: 10.5px; }
.testi .who .co { color: var(--fg-muted); font-weight: 500; }

/* ---------- footer ---------- */
.site-footer-v2 {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 24px 28px;
}
.site-footer-v2.with-divider { border-top: 1px solid var(--border); }
.footer-grid {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 28px;
}
.footer-grid h4 {
  font-size: 16px; color: var(--fg-dim);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 14px; font-weight: 500;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { padding: 6px 0; font-size: 16px; }
.footer-grid li a { color: var(--fg-muted); }
.footer-grid li a:hover { color: var(--fg); }
.footer-grid .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--fg); margin-bottom: 14px; font-size: 26px; letter-spacing: -0.02em; }
.footer-grid .brand img { display: block; width: 44px; height: 44px; }
.footer-grid p { font-size: 16px; color: var(--fg-muted); margin: 0 0 14px; max-width: 320px; }
.footer-bottom {
  max-width: var(--maxw); margin: 28px auto 0;
  padding-top: 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between;
  font-size: 16px; color: var(--fg-dim);
}
.footer-grid p[style*="font-size:11px"] { font-size: 16px !important; }

/* ---------- blog ---------- */
.blog-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(32px * var(--density)) 24px calc(64px * var(--density));
}

.blog-index h1 {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
  color: var(--fg);
}
.blog-index ul { list-style: none; padding: 0; margin: 0; }
.blog-index li {
  border-top: 1px solid var(--border);
  padding: 14px 0;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  align-items: baseline;
}
.blog-index li:last-child { border-bottom: 1px solid var(--border); }
.blog-index .date {
  font-size: 13px;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.blog-index a {
  color: var(--fg);
  font-size: 17px;
  line-height: 1.4;
  justify-self: start;
  border-bottom: 1px dotted transparent;
}
.blog-index a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.post {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(32px * var(--density)) 24px calc(64px * var(--density));
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg);
}
.post header {
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.post h1 {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--fg);
  margin: 0 0 14px;
}
.post .post-meta {
  font-size: 13px;
  color: var(--fg-dim);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.post .post-meta .author { color: var(--fg-muted); }

.post h2, .post h3, .post h4 {
  font-family: var(--mono);
  color: var(--fg);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 36px 0 14px;
}
.post h2 { font-size: 24px; }
.post h3 { font-size: 20px; }
.post h4 { font-size: 18px; }

.post p { margin: 0 0 18px; }
.post a { color: var(--accent); border-bottom: 1px dotted var(--border-strong); }
.post a:hover { color: var(--accent-strong); border-bottom-color: var(--accent-strong); }

.post strong { color: var(--fg); font-weight: 600; }
.post em { font-style: italic; color: var(--fg); }

.post ul, .post ol { padding-left: 22px; margin: 0 0 18px; }
.post li { margin: 6px 0; }

.post blockquote {
  border-left: 2px solid var(--accent);
  padding: 2px 18px;
  margin: 18px 0;
  color: var(--fg);
  background: var(--tint-accent);
}

.post code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 2px;
  color: var(--fg);
}
.post pre {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 16px 18px;
  overflow-x: auto;
  margin: 18px 0;
}
.post pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg);
}

/* Rouge syntax highlighting — v2 palette */
.post div.highlighter-rouge {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 2px;
  margin: 18px 0;
}
.post div.highlighter-rouge .highlight {
  background: transparent;
  border: 0;
  margin: 0;
}
.post div.highlighter-rouge pre {
  margin: 0;
  border: 0;
  background: transparent;
  padding: 16px 18px;
  overflow-x: auto;
}
.post .highlight code,
.post div.highlighter-rouge code {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--fg);
}
.post .highlight .c,
.post .highlight .ch,
.post .highlight .cm,
.post .highlight .cp,
.post .highlight .cpf,
.post .highlight .c1,
.post .highlight .cs,
.post .highlight .sd { color: var(--fg-dim); font-style: italic; }
.post .highlight .k,
.post .highlight .kc,
.post .highlight .kd,
.post .highlight .kn,
.post .highlight .kp,
.post .highlight .kr,
.post .highlight .kt,
.post .highlight .nt,
.post .highlight .nn,
.post .highlight .ow { color: var(--accent); }
.post .highlight .s,
.post .highlight .sa,
.post .highlight .sb,
.post .highlight .sc,
.post .highlight .dl,
.post .highlight .s2,
.post .highlight .sh,
.post .highlight .si,
.post .highlight .sx,
.post .highlight .sr,
.post .highlight .s1,
.post .highlight .ss,
.post .highlight .ld { color: var(--accent-warm); }
.post .highlight .m,
.post .highlight .mb,
.post .highlight .mf,
.post .highlight .mh,
.post .highlight .mi,
.post .highlight .mo,
.post .highlight .il,
.post .highlight .se { color: var(--accent-strong); }
.post .highlight .n,
.post .highlight .nb,
.post .highlight .ni,
.post .highlight .nl,
.post .highlight .py,
.post .highlight .nv,
.post .highlight .vc,
.post .highlight .vg,
.post .highlight .vi,
.post .highlight .vm,
.post .highlight .bp,
.post .highlight .w,
.post .highlight .p { color: var(--fg); }
.post .highlight .na,
.post .highlight .nc,
.post .highlight .nd,
.post .highlight .ne,
.post .highlight .nf,
.post .highlight .nx,
.post .highlight .no,
.post .highlight .fm { color: var(--success); }
.post .highlight .o { color: var(--fg-muted); }
.post .highlight .err { color: var(--danger); }
.post .highlight .gd { color: var(--danger); }
.post .highlight .gi { color: var(--success); }
.post .highlight .gu { color: var(--fg-dim); }
.post .highlight .ge { font-style: italic; }
.post .highlight .gs { font-weight: 600; }

.post img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border: 1px solid var(--border);
  border-radius: 2px;
}

/* Blog diagrams are authored as dark ink on transparent/white for light
   surfaces; in dark mode, invert them so they blend into the page.
   hue-rotate keeps accent colors approximately stable, brightness lifts
   the mid-gray ink (#757575) to near-white.
   Convention: every .png in a post is inverted by default — export
   diagrams as PNG. Opt-outs: tag PNG screenshots/photos with .no-invert;
   tag non-PNG diagrams (e.g. light-authored SVGs) with .dark-invert.
   JPG photos and dark-authored SVGs need no markup.
   The inverse convention covers light-on-dark diagrams: tag them with
   .light-invert so they are inverted in light mode (dark-authored SVGs,
   PNG screenshots captured in dark mode, etc.). */
html:not([data-theme="light"]) .post img[src$=".png"]:not(.no-invert),
html:not([data-theme="light"]) .post img.dark-invert {
  filter: invert(1) hue-rotate(180deg) brightness(1.6);
  border-color: transparent;
}

/* Light-authored-as-dark diagrams: invert in light mode so they blend
   into the page. invert(1) turns dark background + light text into the
   light background + dark text the page wants. No brightness lift
   (tuned for the dark-mode direction, washes text out here) and no
   hue-rotate (color-fringes anti-aliased text edges -> jagged glyphs;
   black/white text has no hue to preserve anyway). */
html[data-theme="light"] .post img.light-invert {
  filter: invert(1);
  border-color: transparent;
}

.post table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  font-size: 14px;
}
.post th, .post td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.post th { color: var(--fg); font-weight: 500; }

.post hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 36px 0;
}

/* ---------- post wrapper + TOC sidebar ---------- */
.post-wrap {
  display: flex;
  max-width: 1100px;
  margin: 0 auto;
  gap: 0;
}
.post-wrap .post {
  flex: 1 1 760px;
  min-width: 0;
}
.post-toc {
  flex: 0 0 240px;
  padding-top: calc(32px * var(--density));
  padding-bottom: 100px;
}
.toc-nav {
  position: sticky;
  top: 60px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.toc-nav::-webkit-scrollbar {
  display: none;
}
.toc-nav h4 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  margin: 0 0 12px;
}
.toc-nav .toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.toc-nav .toc-list .toc-list {
  padding-left: 12px;
}
.toc-nav .toc-link {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-muted);
  text-decoration: none;
  padding: 4px 0 4px 12px;
  border-left: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.toc-nav .toc-link:hover {
  color: var(--fg);
}
.toc-nav .is-active-link {
  color: var(--accent);
  border-left-color: var(--accent);
}

@media (max-width: 1100px) {
  .post-toc { display: none; }
  .post-wrap { max-width: 760px; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .twocol { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(4, 1fr); }
  .features .feature-panels { gap: 40px; }
  .features .feature-panels > .feature-body,
  .features .feature-panels > .feature-body:nth-child(even) {
    grid-template-columns: 1fr;
    grid-template-areas: "kicker" "text" "code";
    row-gap: 16px;
    padding-top: 24px;
  }
  .feature-kicker { font-size: 16px; margin-bottom: 0; }
  .feature-body h3 { font-size: 22px; }
  .features-head { padding-bottom: 20px; margin-bottom: 28px; }
  .testis { grid-template-columns: 1fr; }
  .testi, .testi:nth-child(n+4) { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav .links { display: none; }
  .hero h1 {
    font-size: 28px;
    white-space: normal;
    word-break: break-word;
  }
  .hero-meta { grid-template-columns: repeat(2, 1fr); }

  .hero-diagram { width: 100%; max-width: 100%; }

  /* stats: stack each stat on its own line, drop the side rules */
  .stats {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 20px;
    gap: 4px;
  }
  .stats::before, .stats::after { display: none; }
  .stats .stats-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .stats .stat-sep { display: none; }

  /* feature tabs wrap vertically instead of scrolling */
  .feature-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 0;
  }
  .feature-tab {
    flex: 1 1 auto;
    padding: 10px 12px;
    font-size: 14px;
  }

  /* codeblocks respect viewport; allow horizontal scroll within */
  .codeblock { max-width: 100%; }
  .codeblock > div { min-width: 0; }
  .codeblock .copy { display: none; }

  .feature-tab .sep { margin: 0 6px; }
}

@media (max-width: 560px) {
  .hero { padding: 16px 18px 24px; }
  .hero h1 { font-size: 24px; }
  .hero .cta { gap: 10px; flex-wrap: nowrap; align-items: center; }
  .hero .cta .btn { padding: 8px 14px; font-size: 13px; }
  .hero .cta .btn:not(.primary) { display: none; }
  .hero .cta .inline-link { font-size: 13px; padding: 8px 4px; white-space: nowrap; }
  .install, .twocol, .section, .testis { padding-left: 18px; padding-right: 18px; }
  .logos { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 24px 18px; }
  .site-footer-v2 { padding: 28px 18px 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer-bottom { flex-direction: column; gap: 6px; align-items: flex-start; }
  .nav { padding: 8px 18px; gap: 10px; }
  .nav .brand { font-size: 20px; }
  .nav .brand img { width: 32px; height: 32px; }
  .nav .right .btn.primary { display: none; }
}

/* ---------- theme toggle ---------- */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--fg-muted);
  border-radius: 2px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  padding: 0 12px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--fg-muted); background: var(--btn-hover-bg); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }

/* ---------- light-mode adjustments for raster/SVG assets ---------- */
[data-theme="light"] .nav .right .btn img { filter: var(--nav-icon-filter); }

/* hero-diagram & feat-diagram inline SVGs were authored for dark
   backgrounds; remap hard-coded colors so they stay readable on the
   light surface. */
[data-theme="light"] .hero-diagram svg [fill="#e6ecff"],
[data-theme="light"] .feat-diagram svg [fill="#e6ecff"] { fill: var(--fg); }
[data-theme="light"] .hero-diagram svg [stroke="#e6ecff"],
[data-theme="light"] .feat-diagram svg [stroke="#e6ecff"] { stroke: var(--fg); }
[data-theme="light"] .hero-diagram svg [fill="#9faed6"],
[data-theme="light"] .feat-diagram svg [fill="#9faed6"] { fill: var(--fg-dim); }
[data-theme="light"] .hero-diagram svg [fill="#7aa2ff"],
[data-theme="light"] .feat-diagram svg [fill="#7aa2ff"] { fill: var(--accent); }
[data-theme="light"] .hero-diagram svg [stroke="#7aa2ff"],
[data-theme="light"] .feat-diagram svg [stroke="#7aa2ff"] { stroke: var(--accent); }

/* ---------- per-feature switcher (code <-> diagram) ---------- */
.feat-switch {
  grid-area: code;
  margin-top: 0;
  min-width: 0;
}
.feat-switch > input[type=radio] { display: none !important; }
.feat-switch .tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: -1px;
}
.feat-switch .tab {
  padding: 8px 14px;
  font-size: 14px;
  color: var(--fg-dim);
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--mono);
  user-select: none;
  display: inline-block;
}
.feat-switch .tab:hover { color: var(--fg-muted); }
.feat-switch .feat-switch-panels > [data-view] { display: none; }

.feat-switch:has(input[value="config"]:checked) .feat-switch-panels > [data-view="config"],
.feat-switch:has(input[value="diagram"]:checked) .feat-switch-panels > [data-view="diagram"] {
  display: block;
}
.feat-switch:has(input[value="config"]:checked) .tabs > [data-tab="config"],
.feat-switch:has(input[value="diagram"]:checked) .tabs > [data-tab="diagram"] {
  color: var(--fg);
  border-color: var(--border);
  background: var(--bg-elev);
}

.feat-diagram {
  background: var(--tint-accent);
  border: 1px solid var(--border);
  border-radius: 0 2px 2px 2px;
  padding: 0;
  aspect-ratio: 410/200;
}
.feat-diagram svg { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) {
  .feat-diagram { width: 100%; max-width: 100%; }
}

/* ---------- enterprise / roadmap ---------- */
.hero.hero-centered {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
  padding-bottom: 0;
}
.hero.hero-centered .hero-copy { max-width: 680px; }
.hero.hero-centered h1 { white-space: normal; }
.hero.hero-centered .cta { justify-content: center; }

.feature-kicker.feature-kicker-with-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.feature-kicker .roadmap-badge {
  font-size: 11px;
  padding: 3px 10px;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
}
.feature-kicker .roadmap-badge.in-dev { color: var(--accent-warm); }
.feature-kicker .roadmap-badge.available { color: var(--success); }

.feature-list li .mark.mark-pending { color: var(--accent-warm); }

.feat-diagram.feat-diagram-wide { aspect-ratio: 440/290; }