/* ------------------------------------------------------------------
   Voussoir Software — the small amount of CSS Pico does not cover.
   Everything below is built on Pico's custom properties, so it follows
   the visitor's light/dark preference without a second set of rules.
   ------------------------------------------------------------------ */

:root {
  --sp-pill-radius: 2rem;
}

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--pico-h1-color);
  text-decoration: none;
}
/* The mark carries its own colours, including the navy field, so it is an <img> rather than
   an inline path tinted with currentColor. It reads the same in light and dark. */
.brand img { width: 1.5rem; height: 1.5rem; display: block; }
/* "Software" stays lighter in weight than "Voussoir" but keeps the same colour, so the two
   words read as one name rather than a name with a label after it. */
.brand span { font-weight: 400; }

header > nav { border-bottom: 1px solid var(--pico-muted-border-color); }

/* Pico keeps nav on one line; let it wrap rather than crush on phones. */
@media (max-width: 576px) {
  header > nav { flex-wrap: wrap; row-gap: .25rem; }
  header > nav ul { flex-wrap: wrap; }
}

/* --- layout ------------------------------------------------------- */

section { scroll-margin-top: 1rem; }

section + section {
  margin-top: calc(var(--pico-block-spacing-vertical) * 2);
  padding-top: calc(var(--pico-block-spacing-vertical) * 2);
  border-top: 1px solid var(--pico-muted-border-color);
}

/* Two columns from tablet up; one column below, same as Pico's .grid. */
.split {
  display: grid;
  gap: var(--pico-block-spacing-horizontal);
  align-items: start;
}
@media (min-width: 992px) {
  .split { grid-template-columns: 1fr 1fr; gap: calc(var(--pico-block-spacing-horizontal) * 2); }
  .split--hero { grid-template-columns: 1.1fr 1fr; align-items: center; }
}

.lede { font-size: 1.125rem; }

/* --- pills -------------------------------------------------------- */

.pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 0; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .7rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--sp-pill-radius);
  font-size: .75rem;
  line-height: 1.6;
  color: var(--pico-muted-color);
  white-space: nowrap;
}
.pill--platform { color: var(--pico-primary); border-color: var(--pico-primary-border, var(--pico-primary)); }

.dot { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.dot--live { color: var(--pico-ins-color); }
.dot--wip { color: var(--pico-primary); }
.dot--planned { color: var(--pico-muted-color); }

/* --- feature lists ------------------------------------------------ */

.features { padding-left: 0; margin-bottom: 0; }
/* Pico sets `ul li{list-style:square}`, so the reset has to land on the li. */
.features li {
  position: relative;
  list-style: none;
  padding-left: 1.6rem;
  margin-bottom: .85rem;
}
.features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--pico-primary);
}

/* --- pricing callout inside an app card --------------------------- */

.price {
  margin: var(--pico-block-spacing-vertical) 0 0;
  padding: var(--pico-spacing);
  background: var(--pico-card-sectioning-background-color);
  border-radius: var(--pico-border-radius);
}
.price > :last-child { margin-bottom: 0; }
.price h4 {
  margin-bottom: .35rem;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}

/* --- the webhook flow card ---------------------------------------- */

.flow ol { padding-left: 0; margin: 0; counter-reset: step; }
.flow li { position: relative; list-style: none; padding-left: 2.2rem; padding-bottom: 1.25rem; }
.flow li:last-child { padding-bottom: 0; }
.flow li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--pico-primary-focus, var(--pico-card-sectioning-background-color));
  border: 1px solid var(--pico-primary);
  color: var(--pico-primary);
  font-size: .75rem;
  font-weight: 600;
}
.flow li:last-child::before { content: "✓"; }
/* The connecting rail between steps. */
.flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: .72rem;
  top: 1.7rem;
  bottom: .3rem;
  width: 1px;
  background: var(--pico-muted-border-color);
}
.flow code { font-size: .75rem; }

/* --- misc --------------------------------------------------------- */

.stats { display: flex; flex-wrap: wrap; gap: 2rem; margin: 0; }
.stats div { margin: 0; }
.stats dt { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pico-muted-color); }
.stats dd { margin: .25rem 0 0; font-weight: 600; color: var(--pico-h1-color); }

.center { text-align: center; }
.center .lede { margin-inline: auto; max-width: 40rem; }

.app + .app { margin-top: var(--pico-block-spacing-vertical); }
.app > header hgroup { margin-bottom: 0; }
.app h3 { margin-bottom: .25rem; }
.app h3 small { font-weight: 400; color: var(--pico-muted-color); }

footer.container small { color: var(--pico-muted-color); }

/* --- app cards ---------------------------------------------------- */

/* Let the description column fill the card so the pricing box lines up
   with the bottom of the feature list instead of leaving a gap. */
@media (min-width: 992px) {
  .split--app { align-items: stretch; }
  .split--app > div { display: flex; flex-direction: column; }
  .split--app .price { margin-top: auto; }
}

/* --- pricing table ------------------------------------------------ */

#pricing caption {
  text-align: left;
  padding-bottom: var(--pico-spacing);
  color: var(--pico-muted-color);
}
#pricing tbody th,
#pricing td:last-child { white-space: nowrap; }

/* Four columns will not compress into a phone. Give the table a floor so the
   cells stay readable and the figure scrolls sideways instead. */
#pricing table { min-width: 36rem; }
/* Pico does not make figures scrollable, so narrow screens need this. */
#pricing figure { margin-bottom: 0; overflow-x: auto; }
#pricing figcaption { padding-top: var(--pico-spacing); }

/* Documentation pages. Long prose wants a narrower measure than a landing page does;
   much past 70 characters a line and the eye loses its place returning to the left. */
.doc { max-width: 46rem; }
.doc h2 { margin-top: 2.5rem; }
.doc h3 { margin-top: 1.75rem; }
.doc table { font-size: .9rem; }
.doc blockquote { border-left: 3px solid var(--pico-primary); }

/* Breadcrumb on a doc page: one step back to the product it belongs to. */
.crumb { margin-bottom: .25rem; font-size: .875rem; }
.doc h1 { margin-top: 0; }

/* Product screenshots. Border and radius so a light screenshot does not bleed into a light
   page background, and max-width so a 1840px capture does not overflow a phone. */
.shot { margin: 0 0 var(--pico-block-spacing-vertical); }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
}
.shot figcaption { margin-top: .5rem; font-size: .875rem; color: var(--pico-muted-color); }