/* 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;
}

/* --- screenshots ------------------------------------------------------ */

/* Dashboard screenshots on the landing page. The captures are light-theme
   2x PNGs; the border keeps their white background from bleeding into the
   page in dark mode, where the shadow alone would vanish. */
.shot {
  margin: 2.75rem 0 0;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px -12px rgba(26, 29, 34, 0.18);
}

.shot figcaption {
  margin-top: 0.7rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* --- 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;
  }

  /* On narrow screens the wordmark, links, and Sign in button do not fit on
     one line, and flex-wrap's default break dumps the button alone onto a
     second line at the left edge. Make the wrap deliberate instead: wordmark
     and button share the first row (button pinned right), and the links move
     to their own full-width row below. min-height no longer covers two rows,
     so the nav gets real vertical padding here (longhand, to leave the
     horizontal padding from .wrap alone). */
  .nav {
    gap: 0.75rem 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .nav-links {
    order: 3;
    flex-basis: 100%;
    margin-right: 0;
  }

  .nav .btn {
    margin-left: auto;
  }
}

/* --- 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;
  }
}

/* The reference is published as several pages rather than one, so each page's
   sections are its <h2>s. The rule that separated the sections of the single
   long document moves down with them. Scoped to the generated body so the
   headings the templates write around it are unaffected. */
.reference-body h2 {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.reference-body > .toc + h2 {
  margin-top: 1.5rem;
}

/* The hub's cards list each reference page and the sections on it, which is
   both the reader's index and the only place every reference URL is linked. */
.docs-pages {
  margin-top: 2rem;
}

.docs-pages h3 a {
  text-decoration: none;
}

/* Every anchor the single-page reference had, so a saved link still resolves.
   Two columns because it is a lookup table, not something to read down. */
.docs-moved {
  columns: 2;
  gap: 2rem;
  padding-left: 1.25rem;
}

.docs-back {
  margin-top: 3rem;
}