:root {
  color-scheme: light dark;

  --bg: #fbfbfa;
  --bg-raised: #ffffff;
  --bg-sunken: #f2f1ee;
  --ink: #16150f;
  --ink-muted: #5c5a50;
  --ink-faint: #8a877c;
  --line: #e2e0d9;
  --accent: #1b4d3e;
  --accent-ink: #ffffff;
  --accent-soft: #e8f0ec;
  --radius: 10px;
  --maxw: 1080px;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101210;
    --bg-raised: #181a18;
    --bg-sunken: #0b0c0b;
    --ink: #eceae2;
    --ink-muted: #a3a197;
    --ink-faint: #76746b;
    --line: #272a27;
    --accent: #7fd1b0;
    --accent-ink: #0d1512;
    --accent-soft: #16241e;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0; }

/* ---------- header ---------- */
header {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  z-index: 10;
}
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; font-size: 18px; }
.brand svg { width: 22px; height: 22px; flex: none; }
nav { display: flex; gap: 22px; font-size: 15px; }
nav a { color: var(--ink-muted); text-decoration: none; }
nav a:hover { color: var(--ink); }
@media (max-width: 720px) { nav { display: none; } }

/* ---------- hero ---------- */
.hero { padding: 96px 0 72px; border-bottom: 1px solid var(--line); }
.eyebrow {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 100px;
  padding: 5px 12px;
  margin-bottom: 24px;
  font-weight: 600;
}
.hero h1 { font-size: clamp(38px, 6vw, 62px); max-width: 15ch; margin-bottom: 20px; }
.lede { font-size: clamp(18px, 2.2vw, 21px); color: var(--ink-muted); max-width: 56ch; margin: 0 0 32px; }
.sequence { font-family: var(--mono); font-size: 14px; color: var(--ink-faint); margin-bottom: 36px; }
.sequence b { color: var(--ink); font-weight: 500; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { opacity: 0.9; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--bg-raised); }
.btn-ghost:hover { border-color: var(--ink-faint); }

/* ---------- sections ---------- */
section { padding: 72px 0; border-bottom: 1px solid var(--line); }
.section-head { max-width: 62ch; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 12px; }
.section-head p { color: var(--ink-muted); margin: 0; }

/* ---------- product grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
/* Cards carry their own border rather than sitting on a grid-gap background: ten cards
   never fill the last row evenly, and an empty cell should read as page, not as a panel. */
.card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card h3 { font-size: 17px; margin-bottom: 6px; }
.card h3 span { color: var(--ink-faint); font-weight: 400; }
.card p { margin: 0; font-size: 15px; color: var(--ink-muted); }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 720px) { .split { grid-template-columns: 1fr; } }
.split > div { background: var(--bg-raised); padding: 26px; }
.split h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; }
.split ul { margin: 0; padding-left: 18px; color: var(--ink-muted); font-size: 15px; }
.split li { margin-bottom: 8px; }
.tag { font-family: var(--mono); font-size: 12px; padding: 3px 8px; border-radius: 100px; border: 1px solid var(--line); color: var(--ink-faint); }

/* ---------- steps ---------- */
ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
ol.steps li { counter-increment: s; background: var(--bg-raised); padding: 20px 24px; display: flex; gap: 18px; align-items: baseline; }
ol.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: 13px; color: var(--accent); flex: none; }
ol.steps b { font-weight: 600; }
ol.steps span { color: var(--ink-muted); }

/* ---------- quote ---------- */
.quote { background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; font-size: clamp(19px, 2.4vw, 23px); line-height: 1.45; letter-spacing: -0.01em; max-width: 46ch; }

/* ---------- footer ---------- */
footer { padding: 48px 0; color: var(--ink-faint); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
footer a { color: var(--ink-muted); text-decoration: none; }
footer a:hover { color: var(--ink); }
.note { font-size: 13px; color: var(--ink-faint); margin-top: 28px; max-width: 70ch; }

/* ---------------------------------------------------------------- guides and glossary
   Generated pages (scripts/build-site.mjs). One measure, one rhythm: these are read, not
   scanned, so the column is narrower than the marketing grid and the vertical spacing is
   set by the elements rather than by where they happen to sit. */

.prose { padding: 40px 0 72px; }
.prose .wrap { max-width: 720px; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--ink-faint);
}
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs .sep { color: var(--ink-faint); }

.prose h1 {
  margin: 0 0 16px;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.prose .lede {
  margin: 0 0 40px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-muted);
}
.prose h2 {
  margin: 44px 0 14px;
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.prose h3 { margin: 32px 0 10px; font-size: 19px; }
.prose p { margin: 0 0 18px; line-height: 1.68; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; line-height: 1.68; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--accent); text-underline-offset: 2px; }

.prose code {
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--bg-sunken);
  font-family: var(--mono);
  font-size: 0.88em;
}

.prose blockquote {
  margin: 28px 0;
  padding: 18px 22px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-soft);
  font-size: 17px;
  line-height: 1.6;
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* Tables carry the comparisons these pages exist for, so they scroll rather than squash. */
.prose table {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: collapse;
  font-size: 15.5px;
}
.prose thead th {
  padding: 10px 12px;
  border-bottom: 2px solid var(--line);
  text-align: left;
  vertical-align: bottom;
}
.prose tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
}
.prose tbody tr:last-child td { border-bottom: none; }

.index-list { margin: 0 0 32px; padding: 0; list-style: none; }
.index-list li { margin: 0 0 12px; }
.index-list a {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: inherit;
  text-decoration: none;
}
.index-list a:hover { border-color: var(--accent); }
.index-list b { display: block; margin-bottom: 4px; font-size: 17px; color: var(--accent); }
.index-list span { color: var(--ink-muted); font-size: 15.5px; line-height: 1.5; }

.related {
  margin: 48px 0 28px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-sunken);
}
.related h2 { margin: 0 0 12px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); }
.related ul { margin: 0; padding: 0; list-style: none; }
.related li { margin-bottom: 10px; }
.related li:last-child { margin-bottom: 0; }
.related a { display: block; font-weight: 600; text-decoration: none; }
.related a:hover { text-decoration: underline; }
.related span { display: block; color: var(--ink-muted); font-size: 15px; line-height: 1.45; }

@media (max-width: 640px) {
  .prose h1 { font-size: 30px; }
  .prose .lede { font-size: 18px; }
  .prose h2 { font-size: 22px; }
  /* A comparison table is the point of several of these pages — let it scroll intact. */
  .prose table { display: block; overflow-x: auto; white-space: nowrap; }
  .prose tbody td, .prose thead th { white-space: normal; min-width: 150px; }
}

/* ---------------------------------------------------------------- pricing
   The tiers sit in their own grid rather than the marketing card grid: a price needs to be
   the loudest thing in its box, and the boxes have to line up so two of them can be compared
   at a glance. */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 0 0 32px;
}
.tier {
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.tier h3 { margin: 0 0 6px; font-size: 17px; }
.tier-lede { margin: 0 0 16px; color: var(--ink-muted); font-size: 14.5px; line-height: 1.45; }
.tier .price {
  margin: 0 0 2px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.tier .per { display: block; margin-bottom: 2px; color: var(--ink-faint); font-size: 13px; }
.tier ul { margin: 16px 0 0; padding-left: 18px; font-size: 14.5px; line-height: 1.5; }
.tier li { margin-bottom: 7px; }

/* Wider than the reading column: four tiers side by side need the room. */
.prose .wrap:has(.tiers) { max-width: 940px; }