/* ---------------------------------------------------------------------
   buy — shared stylesheet for the landing page and the docs page.
   Sand paper, black ink, white cards, one hairline everywhere. The only
   colour is the Celo mark. Inter carries the prose, IBM Plex Mono the
   labels and prices, and the wordmark is a vector so it never depends on
   a font. Light is the designed theme; dark is the same system inverted.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-wght.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
}

:root {
  --paper: #e7e3d4;
  --card: #ffffff;
  --ink: #000000;
  --on-ink: #ffffff;
  /* Secondary text. 6.8:1 on sand, higher on white: AA for small labels. */
  --muted: #4a4840;
  --prosperity: #fcff52;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --h1: clamp(2.5rem, 1.5rem + 3.4vw, 4rem);
  --h2: clamp(1.75rem, 1.35rem + 1.3vw, 2.25rem);
  --h3: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --wrap: 80rem;

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #15140f;
    --card: #1e1c16;
    --ink: #e7e3d4;
    --on-ink: #15140f;
    --muted: #b3afa1;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #e7e3d4;
  --card: #ffffff;
  --ink: #000000;
  --on-ink: #ffffff;
  --muted: #4a4840;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #15140f;
  --card: #1e1c16;
  --ink: #e7e3d4;
  --on-ink: #15140f;
  --muted: #b3afa1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
[hidden] {
  display: none !important;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--prosperity);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ink);
  border-radius: 2px;
}
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.skip {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: 0.625rem 0.875rem;
  background: var(--ink);
  color: var(--on-ink);
  font: 600 0.875rem / 1 var(--sans);
  text-decoration: none;
}
.skip:focus {
  top: 1rem;
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
}
h1 {
  font-size: var(--h1);
  line-height: 1.04;
  letter-spacing: -0.04em;
}
h2 {
  font-size: var(--h2);
  letter-spacing: -0.028em;
}
h3 {
  font-size: 1rem;
}
p {
  margin: 0;
}
code,
pre {
  font-family: var(--mono);
}
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font: 0.75rem / 1.3 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.node {
  display: inline-block;
  flex: none;
  width: 5px;
  height: 5px;
  background: currentColor;
}
.lede {
  max-width: 34em;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.icon {
  flex: none;
  width: 1em;
  height: 1em;
}
.ink {
  color: var(--ink);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--card);
  color: var(--ink);
  font: 600 0.875rem / 1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn .icon {
  width: 1rem;
  height: 1rem;
}
.btn:hover {
  background: var(--paper);
}
.btn-primary {
  background: var(--ink);
  color: var(--on-ink);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--ink) 82%, var(--paper));
}
.btn-copy {
  height: 2.25rem;
  padding: 0 0.75rem;
  gap: 0.5rem;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 0.75rem;
}
.btn-copy:hover {
  background: color-mix(in srgb, var(--ink) 82%, var(--paper));
}
.btn-copy .icon {
  width: 0.9375rem;
  height: 0.9375rem;
}
.btn-copy[data-copied] {
  background: var(--prosperity);
  border-color: #000;
  color: #000;
}
.btn-wrap {
  height: auto;
  min-height: 2.75rem;
  max-width: 100%;
  padding: 0.75rem 1.25rem;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
}

/* Header */
.site-head {
  position: relative;
  border-bottom: 1px solid var(--ink);
}
.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5.5rem;
}
.brand {
  display: inline-flex;
  color: inherit;
}
.wordmark {
  display: block;
  width: auto;
  height: 2.625rem;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.menu-links {
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-links a {
  font: 500 0.875rem / 1 var(--sans);
  text-decoration: none;
}
.menu-links a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}
.menu-links a:hover,
.foot-links a:hover,
.receipt-foot a:hover,
.doc-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.menu-btn,
.theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.menu-btn {
  display: none;
}
.theme svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.theme .theme-moon {
  display: none;
}
:root[data-theme="dark"] .theme .theme-sun {
  display: none;
}
:root[data-theme="dark"] .theme .theme-moon {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .theme-sun {
    display: none;
  }
  :root:not([data-theme="light"]) .theme .theme-moon {
    display: block;
  }
}
@media (max-width: 46rem) {
  .head-inner {
    flex-wrap: wrap;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .site-nav {
    gap: 0.75rem;
  }
  .site-nav:not([data-menu-ready]) {
    flex-wrap: wrap;
  }
  .site-nav:not([data-menu-ready]) .menu-links {
    flex-basis: 100%;
    order: 10;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    padding-top: 0.75rem;
  }
  .site-nav[data-menu-ready] .menu-btn {
    display: inline-flex;
  }
  .site-nav[data-menu-ready] .menu-links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
  }
  .site-nav[data-menu-ready][data-open] .menu-links {
    display: flex;
  }
  .site-nav[data-menu-ready] .menu-links a {
    display: block;
    padding: 1rem var(--gutter);
    border-top: 1px solid var(--ink);
  }
  .menu-btn svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
  }
  .menu-btn .menu-x,
  .site-nav[data-open] .menu-btn .menu-bars {
    display: none;
  }
  .site-nav[data-open] .menu-btn .menu-x {
    display: block;
  }
}

/* Hero */
.hero {
  padding: clamp(3rem, 7vw, 6rem) 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
  gap: clamp(2rem, 6vw, 7rem);
  /* Top edges meet: the box starts on the kicker's line instead of floating
     44px above the h1, centred against nothing (#248). */
  align-items: start;
}
.hero-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.hero h1 {
  max-width: 10.5em;
}
.celo-mark {
  width: 1rem;
  height: 1rem;
  flex: none;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.25rem;
}
.receipt {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--ink);
  background: var(--card);
}
.receipt-title {
  font-size: var(--h2);
  letter-spacing: -0.028em;
}
.receipt-kicker {
  margin-top: -0.5rem;
  font: 0.6875rem / 1 var(--mono);
  text-transform: uppercase;
}
.receipt-rule {
  height: 1px;
  background: var(--ink);
}
.receipt-items {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.receipt-items li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
}
.receipt-items .ink {
  flex: none;
  width: auto;
  height: 18px;
}
.receipt-items .item {
  flex: 1;
}
.leader {
  width: 5rem;
  height: 1px;
  background: var(--ink);
}
.receipt-perf {
  border-top: 1px dashed var(--ink);
}
.receipt-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font: 0.75rem / 1.3 var(--mono);
}
.receipt-foot a {
  text-decoration: none;
}
@media (max-width: 64rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .receipt {
    max-width: 32rem;
  }
}

/* Built with: a slow marquee of the providers and protocols underneath. */
.built {
  padding: 1.25rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
}
.built-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.built .label {
  flex: none;
}
/* Tools: the brands behind the catalogue. Matched to Built with by TRACK
   WIDTH, not by brand count: these items are wider (a disc plus a longer note),
   so 8529px against 2419px at 45s works out at 159s. Counting brands instead
   left this marquee running 31% faster than the row above. */
.tools-wall .marquee-track {
  animation-duration: 159s;
}
.marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 4rem,
    #000 calc(100% - 4rem),
    transparent
  );
  mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}
.marquee-track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  /* 45s keeps the speed #242 set at 40s for six tags, now that there are ten
     (2419px of track at 1440, was 2174px). */
  animation: marquee 45s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.is-paused .marquee-track {
  animation-play-state: paused;
}
/* WCAG 2.2.2: anything that moves for more than five seconds needs a control
   to stop it. Hover only serves a mouse, and the lists hold nothing focusable. */
.marquee-toggle {
  flex: none;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--card);
  color: inherit;
  font: 0.6875rem / 1 var(--mono);
  cursor: pointer;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
.marquee-list {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  height: 2.75rem;
  padding: 0 1rem 0 0.75rem;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--card);
  font: 500 0.875rem / 1 var(--sans);
  white-space: nowrap;
}
.tag small {
  font: 0.6875rem / 1 var(--mono);
  color: var(--muted);
}
.tag .mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}
.tag .mark svg {
  width: 100%;
  height: 100%;
}
.tag .mark-type {
  font: 700 0.6875rem / 1 var(--mono);
  border: 1px solid var(--ink);
  border-radius: 2px;
}
/* Tools marks sit in a dark disc with the cards' border, whatever the theme:
   an SVG mark inside it (single-colour ones in white), a favicon filling it,
   or the initial in white when a brand publishes neither. */
.tools-wall .tag .mark {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: #0d0c09;
  color: #ffffff;
  overflow: hidden;
}
.tools-wall .tag .mark svg {
  width: 60%;
  height: 60%;
}
.tools-wall .tag .mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tools-wall .tag .mark-type {
  border-radius: 50%;
}
/* Reduced motion: no marquee. Each list is shown once, wrapped, and still.
   The Tools wall keeps all 20 brands and their notes on purpose: cutting the
   list would hide brands from exactly the readers who asked for less motion.
   To keep it short instead, both rows put the label above the list rather
   than beside it (on a phone the label column took 70px of a 371px row), and
   the Tools tags are denser than the marquee's: 1.75rem tall, a 1.25rem disc,
   type at the catalogue chips' 0.8125rem, notes at 0.625rem.
   Measured at 412x915: Tools 1150px -> 426px (one brand a row -> two), Built
   with 366px -> 280px, page 6374px -> 5563px. At 1440px: Tools 310px ->
   195px; Built with's ten tags grow 142px -> 168px with the label on its own
   line, and the page is still shorter, 3474px -> 3384px.
   The two marquees with motion are untouched: nothing here applies to them. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee-track {
    width: auto;
    animation: none;
    flex-wrap: wrap;
  }
  .marquee-track .marquee-list + .marquee-list {
    display: none;
  }
  .marquee-list {
    flex-wrap: wrap;
  }
  /* Nothing moves, so there is nothing to pause. */
  .marquee-toggle {
    display: none;
  }
  .built-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
  }
  .tools-wall .marquee-list {
    gap: 0.3125rem 0.375rem;
  }
  .tools-wall .tag {
    height: 1.75rem;
    gap: 0.3125rem;
    padding: 0 0.5rem 0 0.25rem;
    font-size: 0.8125rem;
  }
  .tools-wall .tag small {
    font-size: 0.625rem;
  }
  .tools-wall .tag .mark {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Bands */
.band {
  padding: 3.5rem 0;
}
/* A section's label sits above its heading, everywhere. */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

/* Catalogue */
#catalogue {
  padding: 3.5rem 0;
}
.cat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.cat-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.25rem;
}
.cat-title .note {
  font-size: 0.8125rem;
  color: var(--muted);
}
.search {
  position: relative;
  width: min(100%, 20rem);
}
.search input {
  width: 100%;
  height: 2.75rem;
  padding: 0 0.875rem 0 2.5rem;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--card);
  color: var(--ink);
  font: 0.875rem var(--sans);
}
.search input::placeholder {
  color: var(--muted);
  opacity: 1;
}
.search .icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  pointer-events: none;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0;
}
.chip {
  height: 2.125rem;
  padding: 0 1rem;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--card);
  color: var(--ink);
  font: 500 0.8125rem / 1 var(--sans);
  cursor: pointer;
}
.chip:hover {
  background: var(--paper);
}
.chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--on-ink);
}
/* The table scrolls inside its own frame, no taller than the viewport, so
   the page can be scrolled past it. */
.svc-table {
  max-height: min(70vh, 44rem);
  overflow: auto;
  border: 1px solid var(--ink);
}
.svc-row {
  display: grid;
  /* The action column is fixed, not auto: auto sizes it per row, so a row with
     a link and a row without one put Category and Price in different places. */
  grid-template-columns: minmax(0, 1.15fr) 9rem minmax(0, 1fr) 10rem;
  gap: 1.5rem;
  align-items: center;
  min-height: 5rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--ink);
}
.svc:last-of-type > .svc-row {
  border-bottom: 0;
}
.svc[open]:last-of-type > .svc-row {
  border-bottom: 1px solid var(--ink);
}
.svc-headrow {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 2.625rem;
  padding-top: 0;
  padding-bottom: 0;
  background: var(--paper);
  font: 0.6875rem / 1 var(--mono);
}
.svc-headrow .svc-action {
  font: inherit;
}
.sort {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.sort::after {
  content: "↕";
}
.sort[data-order="asc"]::after {
  content: "↑";
}
.sort[data-order="desc"]::after {
  content: "↓";
}
details.svc > summary {
  list-style: none;
  cursor: pointer;
}
details.svc > summary::-webkit-details-marker {
  display: none;
}
details.svc > summary:hover {
  background: var(--card);
}
/* The table clips whatever a row draws outside itself, so the ring goes inside. */
details.svc > summary:focus-visible {
  outline-offset: -3px;
}
.svc-service {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.cat-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--ink);
  background: var(--card);
  font: 0.875rem / 1 var(--mono);
}
.svc-name {
  font-weight: 600;
}
.svc-cat {
  font-size: 0.875rem;
}
.svc-price {
  font: 0.8125rem / 1.4 var(--mono);
}
.svc-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: end;
  font: 600 0.875rem / 1 var(--sans);
  white-space: nowrap;
}
a.svc-action {
  color: inherit;
  text-decoration: none;
}
a.svc-action:hover,
a.svc-action:focus-visible {
  text-decoration: underline;
}
.svc-action .icon {
  width: 1rem;
  height: 1rem;
  transition: transform 0.15s ease;
}
details.svc[open] > summary .svc-action .icon {
  transform: rotate(135deg);
}
.svc-body {
  padding: 1rem 1.5rem 1.5rem;
  border-bottom: 1px solid var(--ink);
  background: var(--card);
}
.svc:last-of-type > .svc-body {
  border-bottom: 0;
}
.svc-body .svc-blurb {
  max-width: 62ch;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
.cat-list {
  max-height: 22rem;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}
.cat-list li {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto;
  gap: 1rem;
  padding: 0.375rem 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  font-size: 0.8125rem;
}
.cat-list code {
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}
.cat-list .cat-price {
  font: 0.75rem / 1.4 var(--mono);
  text-align: right;
}
.cat-list em {
  margin-left: 0.4rem;
  padding: 0 0.3rem;
  border: 1px solid var(--ink);
  font: 0.6875rem / 1.5 var(--mono);
}
.svc-example {
  margin-top: 1.25rem;
}
.svc-example-label,
.field-label {
  display: block;
  font: 600 0.75rem / 1.3 var(--sans);
}
.svc-example-label {
  margin-bottom: 0.5rem;
}
.cmdbox {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4rem;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--card);
}
.cmdbox.multi {
  align-items: flex-start;
}
.cmdline {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  font: 0.875rem / 1.6 var(--mono);
  white-space: pre;
}
.svc-status {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.svc-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 1.5rem;
  font-size: 0.875rem;
}
.svc-note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
@media (max-width: 60rem) {
  .svc-row {
    /* Fixed here as well, at the width of the longer action, "View on Agent402". */
    grid-template-columns: minmax(0, 1fr) 9.5rem;
    gap: 0.5rem 1rem;
    padding: 1rem;
  }
  .svc-headrow {
    display: none;
  }
  .svc-service {
    grid-column: 1 / -1;
  }
  .svc-cat {
    grid-column: 1;
    font: 0.75rem / 1.4 var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .svc-price {
    grid-column: 1;
  }
  .svc-action {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: center;
  }
  a.svc-action {
    /* Enlarge the mobile hit area without moving the text or grid tracks. */
    padding-block: 0.875rem;
    margin-block: -0.875rem;
  }
  .cat-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.125rem;
  }
  .cat-list .cat-price {
    text-align: left;
  }
  .svc-body {
    padding: 1rem;
  }
}

/* How it works */
.how {
  padding: 3.5rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
/* The Tools wall above already ends in this line; both together drew it 2px. */
.tools-wall + .how {
  border-top: 0;
}
.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 2.625rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 6rem;
  padding: 1.25rem;
  border: 1px solid var(--ink);
  background: var(--card);
}
.step + .step::before {
  content: "";
  position: absolute;
  left: -2.625rem;
  top: calc(50% - 0.5rem);
  width: 1.75rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16' fill='none'%3E%3Cpath d='M5.8324 8H22.1676M14 12.6672L22.1676 8L14 3.3328' stroke='black' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16' fill='none'%3E%3Cpath d='M5.8324 8H22.1676M14 12.6672L22.1676 8L14 3.3328' stroke='black' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.step-marker {
  font-size: 0.6875rem;
  letter-spacing: 0;
}
.step-marker .node {
  width: 6px;
  height: 6px;
}
.step-title {
  font-weight: 600;
}
.step-body {
  max-width: 34em;
  font-size: 0.9375rem;
  color: var(--muted);
}
.flow-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.flow-4 .step + .step::before {
  display: none;
}
.how-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  font-size: 0.875rem;
}
@media (max-width: 60rem) {
  .flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  .step + .step::before {
    display: none;
  }
}

/* Live transcript: three real exchanges, opened on demand. */
.exchange {
  margin-top: 2rem;
  border: 1px solid var(--ink);
  background: var(--card);
}
.exchange > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  list-style: none;
  font: 600 0.875rem / 1.3 var(--sans);
  cursor: pointer;
}
.exchange > summary::-webkit-details-marker {
  display: none;
}
.exchange > summary .label {
  font-weight: 400;
}
.exchange[open] > summary {
  border-bottom: 1px solid var(--ink);
}
.transcript {
  line-height: 1.7;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.transcript-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.625rem 1.25rem;
  border-bottom: 1px solid var(--ink);
  font-size: 0.75rem;
}
.transcript-bar b {
  font-weight: 400;
}
.transcript-body {
  margin: 0;
  padding: 1.25rem 1.5rem 1.25rem;
  overflow: auto;
  white-space: pre;
}
#tape {
  height: calc(18 * 1.7em + 2.5rem);
}
.ln {
  display: block;
  min-height: 1.7em;
}
.cmd {
  color: var(--ink);
  font-weight: 700;
}
.c-note {
  color: var(--muted);
}
.c-req,
.c-key {
  color: var(--ink);
}
.c-402,
.c-200 {
  color: var(--ink);
  font-weight: 700;
}
.caret {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  vertical-align: -0.15em;
  background: currentColor;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink {
  to {
    opacity: 0;
  }
}
.self-card {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.self-card[data-state="idle"] {
  visibility: hidden;
}
.self-card .self-label {
  color: var(--muted);
}
.self-card[data-state="required"] .self-state::after {
  content: "attestation required";
}
.self-card[data-state="verified"] .self-state {
  padding: 0 0.3rem;
  background: var(--prosperity);
  color: #000;
}
.self-card[data-state="verified"] .self-state::after {
  content: "verified";
}
@media (max-width: 75rem), (prefers-reduced-motion: reduce) {
  .self-card {
    flex-basis: 100%;
    margin-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #tape {
    height: auto;
  }
  .caret {
    animation: none;
  }
}

/* Get started */
.start {
  padding: 3.5rem 0;
}
.start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 3.5rem;
  align-items: start;
}
.start-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  min-width: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}
.field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.field-note {
  font-size: 0.8125rem;
  color: var(--muted);
}
.field-note a {
  color: var(--ink);
}
.field-terminal {
  width: 100%;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--card);
}
.field-terminal .transcript-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.more {
  font: 600 0.875rem / 1.3 var(--sans);
}

/* The faucet card: the one thing a new wallet needs first. */
.faucet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--ink);
  background: var(--card);
  color: inherit;
  text-decoration: none;
}
.faucet-body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.faucet strong {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.faucet-note {
  font-size: 0.875rem;
  color: var(--muted);
}
.faucet-go {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}
.faucet:hover {
  background: var(--paper);
}
.faucet:hover strong {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The stage on the right of Get started: a paid, identity-gated request with
   the Self card floating over its corner. A static asset, nothing moves. */
.stage {
  position: sticky;
  top: 2rem;
  width: 100%;
}
.stage-terminal {
  border: 1px solid var(--ink);
  background: var(--card);
}
.stage-terminal .transcript-body {
  padding-bottom: 7rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.stage-card {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 14rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--ink);
  background: var(--card);
  box-shadow: 0.5rem 0.5rem 0 color-mix(in srgb, var(--ink) 12%, transparent);
}
.stage-card .self-doc {
  width: 3.5rem;
  height: 3.5rem;
}
.self-verified {
  text-align: center;
  font: 0.75rem / 1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.self-verified::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  background: var(--prosperity);
  border: 1px solid var(--ink);
  vertical-align: 0.05em;
}
.stage-card .self-claims {
  justify-content: flex-start;
  flex-direction: column;
  gap: 0.25rem;
}
.stage-card .self-claims li {
  padding: 0;
  border: 0;
  font-size: 0.8125rem;
}
.stage-card .self-foot {
  flex-direction: column;
  gap: 0.125rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ink);
}
@media (max-width: 36rem) {
  .stage-card {
    position: static;
    width: 100%;
    margin-top: 0.75rem;
    box-shadow: none;
  }
  .stage-terminal .transcript-body {
    min-height: 0;
    padding-bottom: 1.25rem;
  }
}
.self-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.self-head svg {
  width: 1.5rem;
  height: 1.5rem;
}
.self-head b {
  font-size: 1.125rem;
}
.self-head .label {
  margin-left: auto;
}
.self-doc {
  width: 7rem;
  height: 7rem;
  margin: 0 auto;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1.5;
}
.self-doc .self-tick {
  stroke: #000;
}
.self-doc .self-tick-bg {
  fill: var(--prosperity);
  stroke: var(--ink);
}
.self-claims {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.self-claims li {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--ink);
  border-radius: 4px;
  font: 0.75rem / 1.4 var(--mono);
}
.self-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--ink);
  font: 0.6875rem / 1.4 var(--mono);
  color: var(--muted);
}
.self-note {
  font-size: 0.8125rem;
  color: var(--muted);
}
@media (max-width: 60rem) {
  .start-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .self-graphic {
    position: static;
    margin-left: 0;
  }
}

/* Docs page */
.doc-hero {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 2.5rem;
  border-bottom: 1px solid var(--ink);
}
.doc-hero h1 {
  max-width: 14em;
}
.doc-hero .lede {
  margin-top: 1rem;
}
.doc-layout {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 3.5rem;
  padding: 3rem var(--gutter) 4rem;
}
.doc-nav {
  position: sticky;
  top: 2rem;
  align-self: start;
}
.doc-nav ol {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.doc-nav li + li {
  margin-top: 0.5rem;
}
.doc-nav a {
  font: 500 0.875rem / 1.3 var(--sans);
  text-decoration: none;
}
.doc-body {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  min-width: 0;
}
.doc-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  scroll-margin-top: 2rem;
}
.doc-section h2 {
  font-size: var(--h3);
  letter-spacing: -0.025em;
}
.doc-section h3 {
  margin-top: 0.5rem;
  font-size: 1rem;
}
.doc-section p,
.doc-section li {
  max-width: 68ch;
  font-size: 0.9375rem;
}
.doc-section ul {
  margin: 0;
  padding-left: 1.25rem;
}
.doc-section li + li {
  margin-top: 0.375rem;
}
.doc-section code {
  font-size: 0.85em;
}
.doc-section .cmdbox {
  width: 100%;
}
.doc-section .field-terminal {
  width: 100%;
}
.doc-table {
  width: 100%;
  border: 1px solid var(--ink);
  border-collapse: collapse;
  font-size: 0.875rem;
}
.doc-table th,
.doc-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--ink);
  text-align: left;
  vertical-align: top;
}
.doc-table th {
  font: 0.6875rem / 1.4 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--card);
}
.doc-table tr:last-child td {
  border-bottom: 0;
}
.doc-table code {
  white-space: nowrap;
}
@media (max-width: 60rem) {
  .doc-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .doc-nav {
    position: static;
  }
  .doc-nav ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
  }
  .doc-nav li + li {
    margin-top: 0;
  }
}

/* Footer */
.site-foot {
  padding: 1.5rem 0 1.75rem;
  border-top: 1px solid var(--ink);
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.foot-row .wordmark {
  height: 2rem;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 500 0.875rem / 1 var(--sans);
}
.foot-links a {
  text-decoration: none;
}
.foot-note {
  margin-top: 1.125rem;
  font-size: 0.8125rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Narrow screens: a long route in a table header must wrap rather than
   push the table past the viewport. */
@media (max-width: 60rem) {
  .doc-table code {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}