/* The front page and the text pages (about, privacy, terms): the design tokens, a 720 px column (frankfurter.dev
   style), hairlines, numbers in mono. */

body { font-size: var(--fs-16); line-height: var(--lh-prose); }
.btn { display: inline-flex; align-items: center; text-decoration: none !important; color: var(--text); font-size: var(--fs-14); }
.btn.primary { color: var(--bg); }

main { max-width: calc(var(--prose) + 2 * var(--s6)); margin: 0 auto; padding: 0 var(--s6); }
section { padding: var(--s12) 0 0; }
h1 { font-size: var(--fs-40); line-height: 1.1; font-weight: 600; letter-spacing: -.01em; margin: var(--s12) 0 var(--s4); }
h2 { font-size: var(--fs-20); font-weight: 600; margin: 0 0 var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--line-strong); }
.lead { font-size: var(--fs-20); line-height: 1.5; color: var(--text-2); margin: 0 0 var(--s6); }
.cta { display: flex; gap: var(--s3); flex-wrap: wrap; }
.cta .btn { height: 40px; padding: 0 var(--s4); }
p { margin: 0 0 var(--s4); color: var(--text-2); }
code { font-family: var(--mono); font-size: .9em; background: var(--bg-2); padding: 1px 5px; color: var(--text); }
pre { font: var(--fs-13)/1.6 var(--mono); background: var(--bg-2); border: 1px solid var(--line); padding: var(--s4); overflow-x: auto;
  margin: 0 0 var(--s4); color: var(--text); }
pre .c { color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--s12); border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line); }
.stats div { padding: var(--s4) 0; }
.stats div + div { padding-left: var(--s4); border-left: 1px solid var(--line); }
.stats b { display: block; font-size: var(--fs-28); font-weight: 500; line-height: 1.2; color: var(--text); }
.stats span { font-family: var(--sans); font-size: var(--fs-12); color: var(--muted); }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-right: 6px; vertical-align: 1px; }

/* latency histogram: bars of updates per delay bin, the last bin is everything slower */
.lat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2); margin: var(--s6) 0 0; }
.lat-y { display: flex; flex-direction: column; justify-content: space-between; height: 160px; font-size: var(--fs-12);
  color: var(--muted); text-align: right; }
.lat-bars { display: flex; align-items: flex-end; gap: 1px; height: 160px; border-bottom: 1px solid var(--line-strong);
  background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 50%; }
.lat-bars i { flex: 1; height: 100%; background: var(--blue); transform-origin: bottom; transform: scaleY(0);
  transition: transform .6s ease; }
.lat-bars i.over { background: var(--muted); margin-left: var(--s1); }
.lat-x { position: relative; height: 18px; font-size: var(--fs-12); color: var(--muted); }
.lat-x span { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; }
.lat-x span:first-child { transform: none; }
.lat-x span:last-child { transform: translateX(-100%); }
.lat-sum { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--s4); border-top: 1px solid var(--line); }
.lat-sum div { padding: var(--s3) 0; }
.lat-sum div + div { padding-left: var(--s4); border-left: 1px solid var(--line); }
.lat-sum b { display: block; font-size: var(--fs-20); font-weight: 500; color: var(--text); }
.lat-sum span { font-family: var(--sans); font-size: var(--fs-12); color: var(--muted); }

.features { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s8); margin: 0; }
.features div { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.features dt { font-weight: 600; font-size: var(--fs-14); }
.features dd { margin: 2px 0 0; color: var(--text-2); font-size: var(--fs-14); line-height: 1.5; }

.plans { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.plans th { text-align: left; font-weight: 600; padding: var(--s2) var(--s2); border-bottom: 1px solid var(--line-strong); }
.plans td { padding: var(--s2); border-bottom: 1px solid var(--line); color: var(--text-2); }
.plans td:first-child { color: var(--text); }
.plans-wrap { overflow-x: auto; margin: 0 0 var(--s2); }
.plans .price td { font-size: var(--fs-20); font-weight: 500; color: var(--text); }
.plans .price td:first-child { font-size: var(--fs-12); font-weight: 400; color: var(--muted); vertical-align: middle; }
.plans .hl { background: color-mix(in srgb, var(--blue) 8%, transparent); }
.plans th.hl { color: var(--blue); }
.small { font-size: var(--fs-12); margin-top: var(--s3); }


@media (max-width: 640px) {
  main { padding: 0 var(--s4); }
  h1 { font-size: var(--fs-28); margin-top: var(--s8); }
  .lead { font-size: var(--fs-16); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats div:nth-child(3) { padding-left: 0; border-left: 0; }
  .stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .features { grid-template-columns: 1fr; }
  .lat-y, .lat-bars { height: 120px; }
  .lat-bars { gap: 0; }
  .lat-sum { grid-template-columns: 1fr 1fr; }
  .lat-sum div:nth-child(3) { padding-left: 0; border-left: 0; }
  .lat-sum div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .plans th, .plans td { padding: var(--s2) var(--s1); }
}

.plans .choose td { border-bottom: 0; padding-top: var(--s4); }
.plans .choose .btn { height: 32px; padding: 0 var(--s3); white-space: nowrap; }
@media (max-width: 640px) { .plans .choose .btn { padding: 0 var(--s2); font-size: var(--fs-12); } .plans .choose .btn.new { font-size: 0; }
  .plans .choose .btn.new::after { content: "Create"; font-size: var(--fs-12); } }

/* text pages: about, privacy, terms */
.doc h1 { font-size: var(--fs-40); }
.doc h2 { margin-top: var(--s8); }
.doc p, .doc li { color: var(--text-2); }
.doc ul { padding-left: var(--s6); margin: 0 0 var(--s4); }
.doc li { margin-bottom: var(--s2); }
.doc .updated { color: var(--muted); font-size: var(--fs-14); }
.doc .t { width: 100%; border-collapse: collapse; font-size: var(--fs-14); margin: 0 0 var(--s4); }
.doc .t th, .doc .t td { text-align: left; vertical-align: top; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--line); }
.doc .t th { color: var(--text); font-weight: 600; white-space: nowrap; }