/* 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;
  /* Code tokens (the hero sample). Strings take the brand green; the other
     two are ink at different weights, so the sample is highlighted but
     stays in the page's own palette. */
  --code-string: #2e7d32;
  --code-keyword: #1a1a1a;
  --code-muted: #7a838c;
}

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

/* The page has two measures: 56rem for prose, and 64rem for the hero, the
   header, and the footer. The chrome shares the hero's width so the wordmark
   sits flush with the headline on the first screen; the reading sections
   below are narrower on purpose, which is the usual arrangement rather than
   a misalignment. Anything added to the top or bottom of the page should
   take this width too. */
.nav,
.footer-inner,
.hero,
.wrap-wide {
  max-width: 64rem;
}

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);
}

/* The sign-in link sits beside the header button, in the same voice as the
   nav links, so the button is the only thing on the row that asks for a click. */
.nav-signin {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
}

.nav-signin:hover {
  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 --------------------------------------------------------- */

/* The hero is on the wide measure (see .wrap): it holds copy and a code
   sample side by side, and each half needs room for a sentence or a line of
   JSON without wrapping. The jobs screenshot under it takes the same width,
   since it is the hero's image rather than a figure in the text. */
.hero {
  padding: 4.5rem 1.25rem 3.5rem;
}

.hero h1 {
  font-size: 2.6rem;
  max-width: 16ch;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2.5rem 3rem;
  align-items: center;
}

.hero-copy .lede {
  font-size: 1.1rem;
}

.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

/* --- hero code tabs ---------------------------------------------------- */

/* Tabs without script: the radio inputs hold which language is selected, and
   the sibling selectors below show that panel and highlight its label. The
   inputs are kept in the tree (not display:none) so they stay keyboard
   reachable: arrow keys move between them like any radio group. */
.code-tabs {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--code-bg);
  overflow: hidden;
}

.code-tabs input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}

.tab-bar {
  display: flex;
  gap: 0.25rem;
  padding: 0 0.6rem;
  border-bottom: 1px solid var(--line);
}

.tab-bar label {
  padding: 0.65rem 0.6rem 0.55rem;
  margin-bottom: -1px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.tab-bar label:hover {
  color: var(--ink);
}

.code-tabs .tab-panel {
  display: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.code-tabs .tab-panel code {
  font-size: 0.8rem;
}

#lang-curl:checked ~ .tab-bar label[for="lang-curl"],
#lang-node:checked ~ .tab-bar label[for="lang-node"],
#lang-python:checked ~ .tab-bar label[for="lang-python"],
#lang-php:checked ~ .tab-bar label[for="lang-php"] {
  color: var(--ink);
  border-bottom-color: var(--brand);
}

#lang-curl:focus-visible ~ .tab-bar label[for="lang-curl"],
#lang-node:focus-visible ~ .tab-bar label[for="lang-node"],
#lang-python:focus-visible ~ .tab-bar label[for="lang-python"],
#lang-php:focus-visible ~ .tab-bar label[for="lang-php"] {
  outline: 2px solid var(--active);
  outline-offset: -2px;
}

#lang-curl:checked ~ .tab-panel[data-lang="curl"],
#lang-node:checked ~ .tab-panel[data-lang="node"],
#lang-python:checked ~ .tab-panel[data-lang="python"],
#lang-php:checked ~ .tab-panel[data-lang="php"] {
  display: block;
}

/* The same widget by position rather than by id, for the docs: the n-th radio
   selects the n-th label and the n-th panel. tools/mkdocs writes this markup
   for a :::tabs block and pages/docs.html writes it by hand, so a group needs
   nothing but a unique radio name. Four tabs is the most any group has. */
.code-tabs input:nth-of-type(1):checked ~ .tab-bar label:nth-of-type(1),
.code-tabs input:nth-of-type(2):checked ~ .tab-bar label:nth-of-type(2),
.code-tabs input:nth-of-type(3):checked ~ .tab-bar label:nth-of-type(3),
.code-tabs input:nth-of-type(4):checked ~ .tab-bar label:nth-of-type(4) {
  color: var(--ink);
  border-bottom-color: var(--brand);
}

.code-tabs input:nth-of-type(1):focus-visible ~ .tab-bar label:nth-of-type(1),
.code-tabs input:nth-of-type(2):focus-visible ~ .tab-bar label:nth-of-type(2),
.code-tabs input:nth-of-type(3):focus-visible ~ .tab-bar label:nth-of-type(3),
.code-tabs input:nth-of-type(4):focus-visible ~ .tab-bar label:nth-of-type(4) {
  outline: 2px solid var(--active);
  outline-offset: -2px;
}

.code-tabs input:nth-of-type(1):checked ~ pre.tab-panel:nth-of-type(1),
.code-tabs input:nth-of-type(2):checked ~ pre.tab-panel:nth-of-type(2),
.code-tabs input:nth-of-type(3):checked ~ pre.tab-panel:nth-of-type(3),
.code-tabs input:nth-of-type(4):checked ~ pre.tab-panel:nth-of-type(4) {
  display: block;
}

/* In the docs the widget sits in the prose flow like any other block. */
.reference .code-tabs {
  margin: 0 0 1rem;
}

/* --- works-with strip -------------------------------------------------- */

.works-with {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
}

.works-with strong {
  color: var(--ink);
  font-weight: 600;
}

.works-with a {
  color: inherit;
}

/* --- plan strip -------------------------------------------------------- */

.plan-strip {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.plan-strip li {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}

.plan-strip h3 {
  margin: 0;
  font-size: 0.95rem;
}

.plan-price {
  margin: 0.25rem 0 0.5rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.plan-limits {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
}

.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;
}

.c-s {
  color: var(--code-string);
}

.c-k {
  color: var(--code-keyword);
  font-weight: 600;
}

.c-m {
  color: var(--code-muted);
}

/* A long line scrolls inside its block. The default scrollbar is a heavy
   grey bar that reads as a broken border, so draw it thin, in the line
   color, on a transparent track. The standard properties cover Firefox and
   recent Chromium; the pseudo-elements cover Safari and older Chromium. */
pre {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

pre::-webkit-scrollbar {
  height: 8px;
}

pre::-webkit-scrollbar-track {
  background: transparent;
}

pre::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* The copy button (static/site.js adds it). Parked in the block's top right
   corner, faint until the block is hovered or the button focused, so a page
   of samples does not become a page of buttons. The block keeps room for it
   on the right so the longest line never runs underneath. */
pre {
  position: relative;
}

pre .copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.2rem 0.55rem;
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

pre:hover .copy,
pre .copy:focus-visible,
pre .copy.copied {
  opacity: 1;
}

pre .copy:hover {
  color: var(--ink);
}

pre .copy.copied {
  color: var(--brand);
  border-color: var(--brand);
}

/* Touch screens have no hover, so the button is always there, and a button
   that never fades sat on top of the end of the first line, which on a
   phone is usually a long one. The block grows a strip at the top for the
   button to live in instead, so it covers nothing. */
@media (hover: none) {
  pre .copy {
    opacity: 1;
  }

  pre:has(> .copy) {
    padding-top: 2.6rem;
  }
}

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

/* Four guide cards: two by two, not three and an orphan. */
.grid.guides {
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.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 {
  gap: 1.25rem;
}

.downloads .card {
  position: relative;
  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;
}

.dl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dl-head h2 {
  margin: 0;
  font-size: 1.3rem;
}

.dl-kind {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  white-space: nowrap;
}

/* The requirements sit directly under the name, where a reader checking
   their machine looks first, in the muted voice so the blurb still reads as
   the card's text. */
.downloads .dl-req {
  margin-top: -0.4rem;
  font-size: 0.875rem;
  color: var(--muted);
}

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

/* Above the button rather than under it: the button rides the card's floor,
   and anything below it would lift that one card's button off the line the
   other two sit on. */
.downloads .dl-note {
  font-size: 0.875rem;
  color: var(--muted);
}

/* What lands in the Downloads folder, so the file is recognisable once it is
   there. */
.downloads .dl-file {
  margin-top: -0.35rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

.dl-file code {
  background: none;
  padding: 0;
}

/* The visitor's own platform (site.js sets these). The matched card takes a
   brand border and a label; the others keep their buttons but drop them to
   the ghost style, so the page has one obvious thing to click. */
.downloads .card.is-yours {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 8px 24px rgba(46, 125, 50, 0.12);
}

.downloads.has-match .card:not(.is-yours) .btn {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.downloads.has-match .card:not(.is-yours) .btn:hover {
  background: var(--band);
}

/* Sits on the card's top border rather than inside it, so the matched card's
   heading stays level with its neighbours'. White on the brand green clears
   AA in both themes, the same reasoning as .btn. */
.downloads .card > .dl-yours {
  position: absolute;
  top: 0;
  left: 1.5rem;
  transform: translateY(-50%);
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dl-shell {
  margin-top: 3rem;
}

.dl-shell h2 {
  margin-top: 0;
}

/* The enrollment command in step two is one thing to type, so it should not
   break across lines mid-flag. */
.steps code {
  white-space: nowrap;
}

/* A page that ends on a tinted band would otherwise leave a strip of plain
   background between it and the footer's own tint. */
main:has(> .band:last-child) + .site-footer {
  margin-top: 0;
}

/* --- pricing cards ----------------------------------------------------- */

.plan-cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

/* A column: the button sits on the floor so all four line up however the
   blurbs above them wrap, the same trick as the download cards. */
.plan-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.plan-card h2 {
  margin: 0;
  font-size: 1.1rem;
}

.plan-blurb {
  margin: 0.35rem 0 1.25rem;
  font-size: 0.9rem;
  color: var(--muted);
  min-height: 2.7em;
}

.plan-amount-row {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  margin: 0 0 1.25rem;
}

.plan-amount {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Enterprise has words where the others have a number. Smaller, and padded
   to the number's height, so the four rows of ticks still start level. */
.plan-amount-text {
  font-size: 1.35rem;
  line-height: 2.1rem;
}

.plan-period {
  color: var(--muted);
  font-size: 0.95rem;
}

.plan-features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: 0.925rem;
  color: #3d444b;
}

.plan-features li {
  padding: 0.4rem 0 0.4rem 1.4rem;
  position: relative;
  border-top: 1px solid var(--line);
}

/* A tick in the brand green, drawn rather than an icon file so the list
   stays one HTML element per row. */
.plan-features li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.85em;
  width: 0.5rem;
  height: 0.25rem;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

.plan-features strong {
  color: var(--ink);
}

.plan-card .btn {
  display: block;
  margin-top: auto;
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

.plan-footnote {
  margin: 1rem 0 0;
}

/* Same box as the docs' contents list: tint, hairline, radius. No accent
   edge, so it reads as a note in the page's own voice rather than a warning. */
.always-free {
  margin: 2.5rem 0 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--band);
}

.always-free h2 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.always-free p {
  margin: 0;
  color: #3d444b;
}

.includes-head {
  margin-top: 2.5rem;
}

.includes {
  display: grid;
  gap: 0.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  color: #3d444b;
}

.includes li {
  position: relative;
  padding-left: 1.4rem;
}

.includes li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.65em;
  width: 0.5rem;
  height: 0.25rem;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

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

/* Endpoint tables (tools/mkdocs marks them). The method and the path are
   the two things a reader copies, so neither wraps; the notes column takes
   whatever width is left. The method is a small badge in a color per verb,
   muted enough to sort the rows at a glance without becoming the loudest
   thing on the page. */
.endpoints td:nth-child(1),
.endpoints td:nth-child(2) {
  white-space: nowrap;
}

/* In any reference table the first column names a field or a code, and a
   name broken across lines ("content.document_i" / "d") is a name a reader
   copies wrong. The cell may still wrap between names. */
.reference td:first-child code {
  word-break: normal;
}

.endpoints td:nth-child(3) {
  width: 100%;
}

.method {
  display: inline-block;
  min-width: 3.6em;
  padding: 0.1em 0.45em;
  border-radius: 5px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  color: #fff;
  background: var(--muted);
}

.method-get {
  background: #1f6fb2;
}

.method-post {
  background: var(--brand);
}

.method-patch {
  background: #b26a00;
}

.method-delete {
  background: #b23b3b;
}

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

/* The hero's two columns need about 30rem each to hold a line of the sample;
   below that the sample drops under the copy. */
@media (max-width: 60rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero h1 {
    max-width: 20ch;
  }
}

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

  .works-with {
    flex-direction: column;
    gap: 0.4rem;
  }

  .hero {
    padding-top: 3rem;
  }

  .toc ul,
  .docs-moved 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-signin {
    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;
    /* The brand green is too dark to read on the dark code block, so the
       strings lighten; the button keeps the real brand color. */
    --code-string: #7bc67f;
    --code-keyword: #e8eaed;
    --code-muted: #8b949e;
  }

  .lede,
  .steps p,
  .grid p,
  .faq dd,
  .plan-features,
  .always-free p,
  .includes {
    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;
}

/* The cards sit inside .reference, whose h3 rule draws a section divider with
   room above it. Inside a card that read as an empty band and a stray line
   over every title, so the cards undo it. */
.reference .docs-pages h3 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.docs-pages + p {
  margin-top: 1.5rem;
}

/* Every anchor the single-page reference had, so a saved link still resolves.
   Folded, because the cards above it are the index a new reader uses; the
   browser unfolds it on its own when a fragment names an id inside. Two
   columns because it is a lookup table, not something to read down. */
.docs-moved {
  margin-top: 1rem;
}

.docs-moved summary {
  cursor: pointer;
  color: var(--muted);
}

.docs-moved ul {
  columns: 2;
  gap: 2rem;
  padding-left: 1.25rem;
  margin-top: 0.75rem;
}

/* --- docs page layout ------------------------------------------------ */

/* Every docs page (the hub, the guides, the reference pages) is a sidebar and
   the text on a wide screen. The sidebar lists the hub, every reference page
   with the current page's sections under it, and the guides, and sticks
   while the text scrolls. The wrap widens to the chrome's measure (64rem,
   the header and footer width) and no further, so the sidebar's left edge
   lines up with the wordmark above it; the text column is what gives, and
   at about 48rem it is still a comfortable line.

   Narrower than that, the sidebar is gone and the same list sits folded in
   the "Docs menu" above the heading (docs-nav.html renders it twice). The
   list styles below apply to both. */
.docs-side {
  display: none;
}

.docs-nav {
  font-size: 0.9rem;
}

.docs-nav ul {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.docs-nav li {
  margin: 0;
}

.docs-nav a {
  display: block;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
}

.docs-nav a:hover {
  background: var(--band);
}

.docs-nav li.current > a {
  font-weight: 600;
  color: var(--brand);
}

/* The current page's sections, indented under it and set smaller. */
.docs-nav li ul {
  margin: 0.15rem 0 0.5rem 0.6rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--line);
}

.docs-nav li ul a {
  padding: 0.2rem 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.docs-nav li ul a:hover {
  color: var(--ink);
}

.docs-side-head {
  margin: 0 0 0.35rem;
  padding: 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.docs-side-head a {
  display: inline;
  padding: 0;
  color: inherit;
}

/* The phone menu: a bordered box that is one line until it is opened. The
   last list's bottom margin would leave a gap inside the open box. */
.docs-menu {
  margin-top: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.docs-menu summary {
  cursor: pointer;
  padding: 0.6rem 1rem;
  font-weight: 600;
}

.docs-menu .docs-nav {
  padding: 0 0.4rem 0.4rem;
}

.docs-menu .docs-nav > ul:last-child {
  margin-bottom: 0;
}

.docs-main h1 {
  margin-top: 2rem;
}

/* The hub and the guides were written as full-page sections: a .page-head,
   plain .wrap sections, and full-bleed .band sections with a .wrap inside.
   In the text column a .wrap must not re-centre or re-pad, and a band cannot
   bleed past the sidebar, so it becomes a tinted block of its own. */
.docs-main .wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}

.docs-main .page-head {
  padding: 0 0 0.5rem;
}

.docs-main .band {
  margin: 2.5rem 0;
  padding: 1.75rem 1.75rem 1.25rem;
  border-radius: var(--radius);
}

.docs-main section.wrap:has(+ .band) {
  padding-bottom: 0;
}

/* On a phone the gutter is all the margin there is, and a block inset inside
   it squeezes the code samples; the band goes back to running edge to edge,
   as it did before these pages had a sidebar. */
@media (max-width: 40rem) {
  .docs-main .band {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 2rem 1.25rem 1.5rem;
    border-radius: 0;
  }
}

.docs-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.docs-pager a {
  text-decoration: none;
  font-weight: 600;
  max-width: 48%;
}

.docs-pager a:hover {
  text-decoration: underline;
}

.docs-pager .docs-next {
  margin-left: auto;
  text-align: right;
}

@media (min-width: 64rem) {
  .docs-layout {
    max-width: 64rem;
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }

  .docs-side {
    display: block;
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding-top: 0.5rem;
  }

  .docs-menu {
    display: none;
  }

  .docs-main {
    min-width: 0;
    max-width: 56rem;
  }

  .docs-main h1 {
    margin-top: 0.5rem;
  }

  /* The sidebar lists the same sections, so the fragment's own contents box
     is noise here. */
  .docs-layout .reference-body > .toc {
    display: none;
  }

  .docs-layout .reference-body > h2:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}