/* Marketing site styles (WEB.md §3). One stylesheet, served under a
   content-hashed filename so it can be cached forever. Design tokens match
   web/dashboard/src/index.css so the site and the app read as one product.
   External CSS only — no inline styles, so the marketing CSP needs no
   'unsafe-inline'. */

* {
  box-sizing: border-box;
}

:root {
  --ink: #1a1a1a;
  --muted: #66707a;
  --line: #e3e6e8;
  --bg: #fff;
  --band: #f7f8f9;
  --active: #175cd3;
  --code-bg: #f4f5f6;
  --radius: 10px;
  /* The green of the mark in static/favicon.svg (and tools/mkicon's draw),
     so the calls to action carry the same color as the icon. Dark enough
     that white button labels clear WCAG AA on it in both themes, which is
     why dark mode leaves these two alone. */
  --brand: #2e7d32;
  --brand-hover: #26682a;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

a {
  color: var(--active);
}

h1,
h2,
h3 {
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 2.25rem;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.5rem;
  margin: 2.5rem 0 1rem;
}

h3 {
  font-size: 1.1rem;
  margin: 1.75rem 0 0.5rem;
}

p {
  margin: 0 0 1rem;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.875rem;
}

.lede {
  font-size: 1.15rem;
  color: #3d444b;
  max-width: 40rem;
}

.center {
  text-align: center;
}

.center .lede,
.center .cta-row {
  margin-left: auto;
  margin-right: auto;
}

/* --- header / footer -------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4rem;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
}

/* The SVG rounds its own corners, so this only needs to stop the inline-image
   baseline gap. Its width and height attributes reserve the space. */
.wordmark img {
  display: block;
}

.nav-links {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-right: auto;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
}

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 4rem;
  padding: 2rem 0;
  background: var(--band);
}

.footer-inner {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.footer-inner p {
  margin: 0;
}

.footer-links {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: var(--ink);
}

/* --- buttons ---------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--brand);
  white-space: nowrap;
}

.btn:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn-ghost:hover {
  background: var(--band);
}

.btn-small {
  padding: 0.4rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.cta-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 1.5rem 0 0.75rem;
}

/* --- sections --------------------------------------------------------- */

.hero {
  padding: 5rem 1.25rem 3.5rem;
}

.hero h1 {
  font-size: 2.75rem;
  max-width: 20ch;
}

.page-head {
  padding: 3.5rem 1.25rem 1rem;
}

/* A full-bleed tinted band. The tint is the section; the content inside it
   is a normal .wrap, so it lines up with every other section on the page. */
.band {
  background: var(--band);
  padding: 2.5rem 0 3rem;
}

/* A plain section has no vertical padding of its own, so one that runs into
   a band ends the moment its last line does, and the tint starts against the
   text. The band pads its own side; this is the other half. Sections that
   end the page need nothing here: .site-footer brings its own margin. */
section.wrap:has(+ .band) {
  padding-bottom: 3rem;
}

.band h2:first-child {
  margin-top: 0;
}

.closer {
  padding: 3.5rem 1.25rem 1rem;
}

/* --- code ------------------------------------------------------------- */

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--code-bg);
  padding: 0.1em 0.35em;
  border-radius: 5px;
  font-size: 0.875em;
  word-break: break-word;
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  overflow-x: auto;
  margin: 0 0 1rem;
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  word-break: normal;
}

/* --- lists / grids ---------------------------------------------------- */

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.steps > li {
  counter-increment: step;
}

.steps h3 {
  margin: 0 0 0.35rem;
}

.steps h3::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 0.8rem;
  vertical-align: 1px;
}

.steps p {
  margin: 0;
  color: #3d444b;
}

.grid {
  display: grid;
  gap: 1.75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.grid h3 {
  margin-top: 0;
}

.grid p {
  color: #3d444b;
  margin-bottom: 0;
}

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}

/* Download cards hold different amounts of copy, so each one is a column that
   spaces itself and the grid stretches them all to the tallest. The button
   floats to the floor of that column, which puts all three on one line no
   matter how the prose above them wraps. */
.downloads .card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* The gap is the only spacing in here. .grid p zeroes bottom margins, which
   would otherwise jam these paragraphs together. */
.downloads .card > * {
  margin: 0;
}

/* Full width of the card, so the side padding a standalone button needs would
   only push the label toward overflowing a narrow column. */
.downloads .card .btn {
  display: block;
  margin-top: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  white-space: normal;
}

/* --- tables ----------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  margin: 0 0 1rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.925rem;
}

th,
td {
  text-align: left;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.plans tbody th {
  font-weight: 600;
  white-space: nowrap;
}

.plans td {
  white-space: nowrap;
}

/* --- faq -------------------------------------------------------------- */

.faq dt {
  font-weight: 600;
  margin-top: 1.5rem;
}

.faq dd {
  margin: 0.4rem 0 0;
  color: #3d444b;
}

/* --- docs reference --------------------------------------------------- */

.reference {
  padding-top: 1rem;
}

.reference h2 {
  font-size: 1.5rem;
  padding-top: 1rem;
}

.reference h3 {
  font-size: 1.25rem;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.reference h4 {
  font-size: 1rem;
  margin: 1.75rem 0 0.5rem;
}

.reference ul,
.reference ol {
  padding-left: 1.25rem;
}

.reference li {
  margin-bottom: 0.4rem;
}

.toc {
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2rem;
}

.toc li {
  margin-bottom: 0.35rem;
  break-inside: avoid;
}

.toc a {
  text-decoration: none;
  font-size: 0.925rem;
}

.toc a:hover {
  text-decoration: underline;
}

/* --- legal ------------------------------------------------------------ */

.legal {
  max-width: 44rem;
}

.legal h2 {
  font-size: 1.2rem;
  margin-top: 2.25rem;
}

.legal ul {
  padding-left: 1.25rem;
}

.legal li {
  margin-bottom: 0.5rem;
}

/* --- responsive ------------------------------------------------------- */

@media (max-width: 40rem) {
  h1,
  .hero h1 {
    font-size: 1.9rem;
  }

  .hero {
    padding-top: 3rem;
  }

  .toc ul {
    columns: 1;
  }

  .nav {
    gap: 1rem;
  }
}

/* --- dark mode -------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eaed;
    --muted: #9aa4ae;
    --line: #2c3238;
    --bg: #16191c;
    --band: #1c2024;
    --active: #7cb3ff;
    --code-bg: #23282d;
  }

  .lede,
  .steps p,
  .grid p,
  .faq dd {
    color: #c3c9cf;
  }

  /* .btn and .btn-ghost need no override here: the brand green carries across
     both themes, and the ghost variant is already drawn from --ink/--line. */

  .steps h3::before {
    background: #e8eaed;
    color: #16191c;
  }
}