/*
 * StackTether public sites: stacktether.com (marketing) and
 * support.stacktether.com (docs; the build copies this file to support/).
 * Plain CSS, no JavaScript, no external loads.
 *
 * Colours, type and spacing are copied from the portal's design tokens
 * (app/(portal)/styles/tokens.css, DESIGN.md "The Labeled Rack"); keep
 * them in step if the portal tokens change.
 */

@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-Bold-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Light theme (default) ---- */
:root {
  color-scheme: light dark;

  --ground: #f2f4f7;
  --surface: #ffffff;
  --surface-sunken: #e9edf1;
  --hairline: #d6dbe1;
  --hairline-strong: #848d98;
  --ink: #15191e;
  --ink-muted: #525b66;
  --link: #1d5bd6;
  --cord-admin: #1d5bd6;
  --cord-active: #17803d;
  --cord-pending: #a35400;
  --cord-danger: #c0261a;
  --cord-neutral: #7a838e;
  --tint-active: #e6f4ea;
  --tint-pending: #fdf1e2;
  --tint-info: #e8effc;
  --button-primary-bg: #15191e;
  --button-primary-bg-hover: #2c333b;
  --button-primary-ink: #ffffff;
  --focus: #1d5bd6;
  --selection: #cfe0ff;

  /* Label tape: white tape, black letters, in both themes. */
  --tape-bg: #f6f6f1;
  --tape-ink: #0b0c0d;
  --tape-edge: #c9c9c0;

  /* The rack: black in both themes. */
  --rail-bg: #0f1114;
  --rail-ink: #eef0f3;
  --rail-ink-muted: #a7afba;
  --rail-hairline: #2a2f36;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-tape: "Barlow Condensed", "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed",
    "Liberation Sans Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 2px;
  --radius-md: 4px;
  --content-max: 72rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Dark theme: follows the computer's setting ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0d0f12;
    --surface: #161a1f;
    --surface-sunken: #1d2228;
    --hairline: #2c323a;
    --hairline-strong: #6b7581;
    --ink: #e8ebef;
    --ink-muted: #a3acb7;
    --link: #8ab4ff;
    --cord-admin: #6aa1ff;
    --cord-active: #4cc27a;
    --cord-pending: #f0a23c;
    --cord-danger: #ff7b6e;
    --cord-neutral: #8a939e;
    --tint-active: #12301d;
    --tint-pending: #3a2810;
    --tint-info: #16263f;
    --button-primary-bg: #e8ebef;
    --button-primary-bg-hover: #c9cfd6;
    --button-primary-ink: #0d0f12;
    --focus: #8ab4ff;
    --selection: #2b4a80;
  }
}

/* ---- Base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  overflow-wrap: break-word;
}

::selection {
  background: var(--selection);
}

a {
  color: var(--link);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible,
summary:focus-visible,
main:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

main:focus:not(:focus-visible) {
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  line-height: 1.25;
  text-wrap: balance;
}

h1 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-2xl);
  font-weight: 750;
  letter-spacing: -0.01em;
}

h2 {
  margin: var(--space-7) 0 var(--space-4);
  font-size: var(--text-xl);
  font-weight: 700;
}

h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: 650;
}

p,
ul,
ol,
dl,
table {
  margin: 0 0 var(--space-4);
}

ul,
ol {
  padding-left: 1.4em;
}

li + li {
  margin-top: var(--space-1);
}

code {
  padding: 0.05em 0.3em;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

pre {
  overflow-x: auto;
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.5;
}

pre code {
  padding: 0;
  border: 0;
  background: none;
}

hr {
  margin: var(--space-7) 0;
  border: 0;
  border-top: 1px solid var(--hairline);
}

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

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.skip {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--button-primary-bg);
  color: var(--button-primary-ink);
  font-weight: 600;
}

.skip:focus {
  top: var(--space-2);
}

/* ---- Buttons ---- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 120ms;
}

.button:hover {
  background: var(--surface-sunken);
  text-decoration: none;
}

.button-primary {
  border-color: var(--button-primary-bg);
  background: var(--button-primary-bg);
  color: var(--button-primary-ink);
}

.button-primary:hover {
  border-color: var(--button-primary-bg-hover);
  background: var(--button-primary-bg-hover);
}

.button-ghost {
  background: transparent;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

/* ---- Header ---- */
.site-head {
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}

.head-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  min-height: 64px;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  line-height: 0;
  text-decoration: none;
}

.brand img {
  display: block;
  width: clamp(120px, 36vw, 168px);
  min-width: 120px; /* brand rule: full logo never below 120px */
  height: auto;
}

.brand-label {
  color: var(--ink);
  font-family: var(--font-tape);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.site-head {
  position: relative;
}

.site-nav {
  flex: 1 1 auto;
}

.site-nav ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

/* Header buttons (Contact, Sign in) sit level with the text links. */
.site-nav .button,
.head-row > .signin {
  flex: none;
  min-height: 40px;
  padding: 0 var(--space-4);
  white-space: nowrap;
}

.site-nav li:has(> .button) {
  margin-left: var(--space-2);
}

.site-nav a.button[aria-current="page"] {
  border-color: var(--cord-admin);
}

.site-nav li + li {
  margin-top: 0;
}

.site-nav a:not(.button) {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-2);
  border-bottom: 2px solid transparent;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.site-nav a:not(.button):hover {
  border-bottom-color: var(--hairline-strong);
}

.site-nav a[aria-current="page"] {
  border-bottom-color: var(--cord-admin);
}

/* Phone menu: a plain <details>, no script. Shown only on narrow screens (see the 860px block). */
.nav-menu {
  display: none;
  margin-left: auto;
}

.nav-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.nav-menu > summary::-webkit-details-marker {
  display: none;
}

/* A small chevron drawn with borders; it turns when the menu is open. */
.nav-menu > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 150ms var(--ease-out);
}

.nav-menu[open] > summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.nav-menu > summary:hover {
  background: var(--surface-sunken);
}

.menu-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  padding: var(--space-2) var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: 0 10px 18px -6px rgb(0 0 0 / 0.18);
}

.menu-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-nav li + li {
  margin-top: 0;
}

.menu-nav a:not(.button) {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.menu-nav a[aria-current="page"]:not(.button) {
  text-decoration: underline;
  text-decoration-color: var(--cord-admin);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.menu-nav .button {
  width: 100%;
  margin-top: var(--space-4);
}

/* ---- Page body ---- */
.page {
  flex: 1;
  padding: var(--space-6) 0 var(--space-8);
}

/* Readable line length for running text; cards, grids and tables keep their own widths. */
.page :where(p, dt, dd, h1, h2, h3),
.page :where(ul, ol):not(.grid, .step-list, .toc ul, .section-cards ul) {
  max-width: 70ch;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 var(--space-5);
  padding: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  list-style: none;
}

.crumbs li + li {
  margin-top: 0;
}

.crumbs li + li::before {
  content: "/";
  padding: 0 var(--space-2);
  color: var(--hairline-strong);
}

.crumbs a {
  color: var(--ink-muted);
}

.lead {
  max-width: 68ch;
  color: var(--ink-muted);
  font-size: var(--text-md);
}

.answer {
  max-width: 72ch;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--cord-admin);
  background: var(--surface);
  font-size: var(--text-md);
}

.prose,
.measure {
  max-width: 48rem;
}

/* ---- Home hero ---- */
.hero {
  padding: var(--space-6) 0 var(--space-2);
}

.hero .tagline {
  margin: 0 0 var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-md);
  font-weight: 600;
}

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

/* Wide screens: the words on the left, the traced request beside them. */
@media (min-width: 1024px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 25rem);
    gap: var(--space-7);
    align-items: center;
  }
  .hero .actions {
    margin-bottom: 0;
  }
}

/*
 * The hero trace: one AI request drawn with the portal's own pieces (tape
 * tags, tether cords, status chips) on a rack-black panel, in both themes.
 * The cords use the dark-theme values (The Rail Cords Rule). It is a real
 * list and paragraphs, so it reads the same without the drawing.
 */
.trace {
  --cord-admin: #6aa1ff;
  --cord-active: #4cc27a;
  --cord-neutral: #8a939e;
  --surface: transparent;
  --hairline: var(--rail-hairline);
  --ink: var(--rail-ink);
  --cord: var(--cord-admin);
  margin: var(--space-6) 0 0;
  padding: var(--space-5);
  border: 1px solid var(--rail-hairline);
  border-radius: var(--radius-md);
  background: var(--rail-bg);
  color: var(--rail-ink);
  box-shadow: 0 1px 2px rgb(15 17 20 / 0.06), 0 6px 16px rgb(15 17 20 / 0.06);
}

.page .trace p {
  max-width: none;
}

@media (min-width: 1024px) {
  .trace {
    margin: 0;
  }
}

@media (max-width: 1023px) {
  .trace {
    max-width: 34rem;
  }
}

.trace-head,
.trace-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  color: var(--rail-ink-muted);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trace-example {
  padding: 0 var(--space-2);
  border: 1px dashed var(--rail-ink-muted);
  border-radius: var(--radius-sm);
}

.trace-chain {
  margin: 0;
  padding: 0;
  list-style: none;
}

.trace-chain li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

/* The cord between two tags: a plug at each end, drawn top to bottom once on load. */
.trace-chain li + li {
  margin-top: 1.75rem;
}

.trace-chain li + li::before {
  content: "";
  position: absolute;
  top: -1.75rem;
  left: 1.25rem;
  width: 8px;
  height: 1.75rem;
  margin-left: -4px;
  background:
    linear-gradient(var(--cord), var(--cord)) center top / 8px 6px no-repeat,
    linear-gradient(var(--cord), var(--cord)) center bottom / 8px 6px no-repeat,
    linear-gradient(var(--cord), var(--cord)) center / 2px 100% no-repeat;
  transform-origin: center top;
  animation: trace-draw 380ms var(--ease-out) both;
}

.trace-chain li:nth-child(2)::before {
  animation-delay: 250ms;
}

.trace-chain li:nth-child(3)::before {
  animation-delay: 550ms;
}

.trace-chain li:nth-child(4)::before {
  animation-delay: 850ms;
}

.trace-note {
  color: var(--rail-ink-muted);
  font-size: var(--text-sm);
}

.trace-log {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rail-hairline);
}

.trace-log-head {
  margin-bottom: var(--space-3);
}

.trace-log-head time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* The audit entry prints out left to right, like label tape, once the cords are in. */
.audit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--space-2);
  margin: 0 0 var(--space-3);
  animation: trace-print 600ms var(--ease-out) 1250ms both;
}

.audit-row .tether {
  flex: 0 1 1.25rem;
  min-width: 0.75rem;
  background: var(--cord);
  animation: none;
}

/* Small phones: shorter cords so the whole entry stays on one line. */
@media (max-width: 480px) {
  .audit-row .tether {
    flex: 0 0 0.625rem;
    min-width: 0.625rem;
  }
}

.audit-row code {
  padding: 3px 6px;
  border-color: var(--rail-hairline);
  background: #1b1f24;
  color: var(--rail-ink);
  font-size: var(--text-xs);
}

.trace-foot {
  margin: 0;
  color: var(--rail-ink-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

@keyframes trace-draw {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes trace-print {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Section headings on marketing pages are printed on label tape (the portal's tape title). */
.tape-head {
  width: fit-content;
  max-width: 100%;
  padding: 4px var(--space-4);
  border: 1px solid var(--tape-edge);
  border-radius: var(--radius-sm);
  background: var(--tape-bg);
  color: var(--tape-ink);
  font-family: var(--font-tape);
  font-stretch: condensed;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.12);
}

/* ---- Label tape and the tether line (the portal's signature) ---- */
.tag-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) 0;
  margin: 0 0 var(--space-5);
}

.tape {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 2px var(--space-3);
  border: 1px solid var(--tape-edge);
  border-radius: var(--radius-sm);
  background: var(--tape-bg);
  color: var(--tape-ink);
  font-family: var(--font-tape);
  font-stretch: condensed;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.12);
}

.tether {
  position: relative;
  flex: 0 1 3rem;
  min-width: 1.5rem;
  height: 2px;
  margin: 0 7px;
  background: var(--cord-neutral);
  transform-origin: left center;
  animation: tether-draw 700ms var(--ease-out) 150ms both;
}

.tether.is-admin {
  background: var(--cord-admin);
}

.tether.is-active {
  background: var(--cord-active);
}

.tether.is-pending {
  background: var(--cord-pending);
}

.tether::before,
.tether::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: inherit;
}

.tether::before {
  left: -7px;
}

.tether::after {
  right: -7px;
}

@keyframes tether-draw {
  from {
    transform: scaleX(0.08);
  }
  to {
    transform: scaleX(1);
  }
}

/* ---- Status chips: live / coming soon / planned ---- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 1px var(--space-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip::before {
  content: "";
  width: 4px;
  height: 14px;
  background: var(--cord-neutral);
}

.chip-live::before {
  background: var(--cord-active);
}

.chip-soon::before {
  background: var(--cord-pending);
}

.chip-tested::before {
  background: var(--cord-admin);
}

/* ---- Sections, cards and grids ---- */
/* Sections: generous space between them, tight space inside (heading to its text). */
.band {
  margin: var(--space-8) 0;
}

.band > h2:first-child {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

/*
 * The security rack (home): the one dark band in the page body, so the
 * security proof is the peak of the scroll. Tokens switch to the dark
 * values locally (rack black in both themes, The Rail Cords Rule).
 */
.band.rack {
  --surface: #161a1f;
  --hairline: var(--rail-hairline);
  --ink: var(--rail-ink);
  --ink-muted: var(--rail-ink-muted);
  --link: #8ab4ff;
  --focus: #8ab4ff;
  --cord-active: #4cc27a;
  padding: var(--space-7) var(--space-6);
  border: 1px solid var(--rail-hairline);
  border-radius: var(--radius-md);
  background: var(--rail-bg);
  color: var(--rail-ink);
}

.band.rack > p {
  color: var(--rail-ink-muted);
}

@media (min-width: 1024px) {
  .band.rack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
    grid-template-rows: auto 1fr;
    gap: 0 var(--space-7);
  }
  .band.rack > h2 {
    grid-column: 1;
  }
  .band.rack > p {
    grid-column: 1;
    grid-row: 2;
  }
  .band.rack > .controls {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
  }
}

.band > .grid,
.band > .step-list {
  margin-top: var(--space-5);
}

/* A "see more" line under a grid or step list belongs to it: closer than the gap above the grid. */
.band > :is(.grid, .step-list):has(+ p) {
  margin-bottom: var(--space-4);
}

/*
 * Paired bands (home: "Which systems" then "Which AI apps", the two halves of
 * one connection) sit closer to each other than to their neighbours, so the
 * page groups into chapters instead of an even beat.
 */
.band.is-paired {
  margin-bottom: var(--space-7);
}

.band.is-paired + .band {
  margin-top: var(--space-7);
}

/*
 * Card grids: one column on phones, two on tablets, three (or four when there
 * are exactly four cards) on wide screens, so a row never ends with one
 * stranded card or an empty cell: a lone last card spans the row, and when
 * two are left over (5, 8, ... cards) the grid switches to six tracks so the
 * last two share the row half and half.
 */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .grid:has(> :nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid:has(> :nth-child(3)) > :last-child:nth-child(odd) {
    grid-column: auto;
  }
  /* A lone card left after full rows of three spans the row (not with exactly four: they sit four up). */
  .grid:has(> :nth-child(3)):not(:has(> :nth-child(4):last-child)) > :last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }
  /* Two left over: six tracks, rows of three cards (two tracks each), the last two cards three tracks each. */
  .grid:has(> :nth-child(5)):has(> :last-child:nth-child(3n + 2)) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grid:has(> :nth-child(5)):has(> :last-child:nth-child(3n + 2)) > * {
    grid-column: span 2;
  }
  .grid:has(> :nth-child(5)):has(> :last-child:nth-child(3n + 2)) > :nth-last-child(-n + 2) {
    grid-column: span 3;
  }
}

.grid > li + li {
  margin-top: 0;
}

/* Cards are plain panels (hairline, no colour). State lives in the card head. */
.card {
  --card-cord: var(--cord-neutral);
  padding: var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.card.is-live {
  --card-cord: var(--cord-active);
}

.card.is-soon {
  --card-cord: var(--cord-pending);
}

.card:has(.chip-tested) {
  --card-cord: var(--cord-admin);
}

.card h2,
.card h3 {
  margin-top: 0;
  font-size: var(--text-md);
}

.card p:last-child,
.card ul:last-child {
  margin-bottom: 0;
}

/*
 * Card head: the name on label tape, tethered to its status chip by a cord
 * in the state's colour (green live, amber soon, blue tested, grey other).
 * The chip carries the words (The Words First Rule).
 */
.card-head {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-3);
}

.card-head h2,
.card-head h3 {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding: 3px var(--space-3);
  border: 1px solid var(--tape-edge);
  border-radius: var(--radius-sm);
  background: var(--tape-bg);
  color: var(--tape-ink);
  font-family: var(--font-tape);
  font-stretch: condensed;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.12);
}

.card-head:has(> .chip)::after {
  content: "";
  order: 1;
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  height: 8px;
  background:
    linear-gradient(var(--card-cord), var(--card-cord)) left center / 6px 8px no-repeat,
    linear-gradient(var(--card-cord), var(--card-cord)) right center / 6px 8px no-repeat,
    linear-gradient(var(--card-cord), var(--card-cord)) center / 100% 2px no-repeat;
}

.card-head > .chip {
  order: 2;
}

.card-links {
  padding-left: 1.1em;
}

/* Numbered "how it works" steps with a cord between them. */
.step-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step-list > li {
  position: relative;
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  counter-increment: step;
}

.step-list > li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 28px;
  margin-bottom: var(--space-3);
  border: 1px solid var(--tape-edge);
  border-radius: var(--radius-sm);
  background: var(--tape-bg);
  color: var(--tape-ink);
  font-family: var(--font-tape);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.step-list h3 {
  margin-top: 0;
}

.step-list p:last-child {
  margin-bottom: 0;
}

/* Plain ticked list for short facts. */
.checks {
  padding: 0;
  list-style: none;
}

.checks li {
  position: relative;
  padding-left: 1.6em;
}

.checks li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0.2em;
  width: 0.7em;
  height: 2px;
  background: var(--cord-active);
}

/*
 * Controls: a security list as rack rows. Each row is patched in by a short
 * green lead (a plug and cord), the same mark as the tether line.
 */
.page .controls {
  max-width: 52rem;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.controls li {
  min-height: 48px;
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-3) 3.25rem;
  border-top: 1px solid var(--hairline);
}

.controls li:first-child {
  border-top: 0;
}

.controls li::before {
  top: calc(var(--space-3) + 0.8em - 4px);
  left: var(--space-4);
  width: 1.5rem;
  height: 8px;
  background:
    linear-gradient(var(--cord-active), var(--cord-active)) left center / 8px 8px no-repeat,
    linear-gradient(var(--cord-active), var(--cord-active)) center / 100% 2px no-repeat;
}

/* Callouts */
.note {
  max-width: 72ch;
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--cord-admin);
  border-radius: var(--radius-md);
  background: var(--tint-info);
}

.warning {
  max-width: 72ch;
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--cord-pending);
  border-radius: var(--radius-md);
  background: var(--tint-pending);
}

.warning p:last-child {
  margin-bottom: 0;
}

.note.is-warning {
  border-left-color: var(--cord-pending);
  background: var(--tint-pending);
}

.note p:last-child {
  margin-bottom: 0;
}

/* Call to action band */
.cta {
  --focus: #8ab4ff;
  /* The close of a page: more room above it than between ordinary bands. */
  margin: calc(var(--space-8) + var(--space-5)) 0 0;
  padding: var(--space-6);
  /* The rack's own edge, so the panel still reads on the near-black dark ground. */
  border: 1px solid var(--rail-hairline);
  border-radius: var(--radius-md);
  background: var(--rail-bg);
  color: var(--rail-ink);
}

.cta h2 {
  margin-top: 0;
}

.cta p {
  max-width: 64ch;
  color: var(--rail-ink-muted);
}

.cta a:not(.button) {
  color: #8ab4ff;
}

.cta .button {
  border-color: var(--rail-ink);
  background: var(--rail-ink);
  color: var(--rail-bg);
}

.cta .button:hover {
  background: #c9cfd6;
}

.cta .button.button-ghost {
  border-color: var(--rail-ink-muted);
  background: transparent;
  color: var(--rail-ink);
}

.cta .button.button-ghost:hover {
  background: #1b1f24;
}

/* ---- Tables ---- */
.table-wrap {
  overflow-x: auto;
  scrollbar-color: var(--hairline-strong) transparent;
  margin: 0 0 var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
}

table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

caption {
  padding: var(--space-3) var(--space-4);
  color: var(--ink-muted);
  text-align: left;
}

th,
td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}

thead th {
  border-top: 0;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- FAQ and definitions ---- */
.faq,
.terms {
  max-width: 52rem;
}

.faq dt,
.terms dt {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  font-weight: 650;
}

.faq dd,
.terms dd {
  margin: var(--space-2) 0 0;
  color: var(--ink);
}

.faq dd p:last-child,
.terms dd p:last-child {
  margin-bottom: 0;
}

.toc {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.toc h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.toc ul {
  columns: 2 16rem;
  margin: 0;
}

/* ---- Contact form (plain HTML form; the security check is the only script) ---- */
.topic-guide {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  max-width: 52rem;
}

.topic-guide dt {
  font-weight: 650;
}

.topic-guide dd {
  margin: 0;
  color: var(--ink-muted);
}

.contact-form {
  max-width: 36rem;
  margin: var(--space-6) 0 0;
  padding: var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}

.field label,
.contact-form label {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
}

.optional {
  color: var(--ink-muted);
  font-weight: 400;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
}

.contact-form input,
.contact-form textarea {
  caret-color: var(--focus);
}

.contact-form textarea {
  min-height: 10rem;
  resize: vertical;
}

.contact-form select {
  appearance: auto;
}

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible,
.contact-form button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Only after the person has typed: an empty required field is not an error yet. */
.contact-form input:user-invalid,
.contact-form select:user-invalid,
.contact-form textarea:user-invalid {
  border-color: var(--cord-danger);
}

.hint,
.field-error {
  font-size: var(--text-sm);
  line-height: 1.45;
}

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

.field-error {
  color: var(--cord-danger);
  font-weight: 600;
}

.field.check {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
}

.field.check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--button-primary-bg);
}

.field.check label {
  font-weight: 400;
}

.contact-form button[type="submit"] {
  border-color: var(--button-primary-bg);
  background: var(--button-primary-bg);
  color: var(--button-primary-ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.contact-form button[type="submit"]:hover {
  border-color: var(--button-primary-bg-hover);
  background: var(--button-primary-bg-hover);
}

.cf-turnstile {
  min-height: 65px;
  margin: 0 0 var(--space-5);
}

.hp[hidden] {
  display: none;
}

@media (max-width: 480px) {
  .contact-form {
    padding: var(--space-4);
  }
  .topic-guide {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .topic-guide dd {
    margin-bottom: var(--space-3);
  }
  .contact-form button[type="submit"] {
    width: 100%;
  }
}

/* ---- Footer ---- */
.site-foot {
  border-top: 1px solid var(--rail-hairline);
  background: var(--rail-bg);
  color: var(--rail-ink);
  font-size: var(--text-sm);
}

.site-foot a {
  color: var(--rail-ink);
  text-decoration: none;
}

.site-foot a:hover {
  text-decoration: underline;
}

.site-foot a:focus-visible {
  outline-color: #8ab4ff;
}

.site-foot .muted {
  color: var(--rail-ink-muted);
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(min(14rem, 100%), 2fr) repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--space-5);
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
}

.foot-logo {
  display: inline-block;
  margin: 0 0 var(--space-4);
  line-height: 0;
}

.foot-logo img {
  display: block;
  width: 150px;
  min-width: 120px; /* brand rule: full logo never below 120px */
  height: auto;
}

.foot-tagline {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 700;
}

.foot-head {
  margin: 0 0 var(--space-3);
  color: var(--rail-ink-muted);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-foot li + li {
  margin-top: var(--space-2);
}

/* Small phones: the brand block across the top, link lists two by two. */
@media (max-width: 480px) {
  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}

.foot-base {
  padding-top: var(--space-4);
  padding-bottom: var(--space-5);
  border-top: 1px solid var(--rail-hairline);
  color: var(--rail-ink-muted);
}

.foot-base p {
  margin: 0;
}

/* ---- Support (docs) layout ---- */
/* The article is first in the page; on wide screens the topic list is placed on the left. */
.docs-grid {
  display: grid;
  flex: 1;
  grid-template-columns: 16rem minmax(0, 1fr);
  grid-template-areas: "side main";
  gap: var(--space-6);
  align-items: start;
}

.docs-main {
  grid-area: main;
}

.side-jump {
  display: none;
}

.docs-side {
  grid-area: side;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: var(--space-6) 0;
  font-size: var(--text-sm);
}

.side-toggle > summary {
  display: none;
}

.side-section + .side-section {
  margin-top: var(--space-5);
}

.side-head {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.side-head a {
  color: var(--ink-muted);
  text-decoration: none;
}

.docs-side ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-side li + li {
  margin-top: 0;
}

.docs-side li a {
  display: block;
  padding: var(--space-1) var(--space-3);
  border-left: 2px solid var(--hairline);
  color: var(--ink);
  text-decoration: none;
}

.docs-side li a:hover {
  border-left-color: var(--hairline-strong);
}

.docs-side li a[aria-current="page"] {
  border-left-color: var(--cord-admin);
  font-weight: 650;
}

.docs-main {
  min-width: 0;
}

.prose h2 {
  margin-top: var(--space-6);
}

.help-box {
  max-width: 48rem;
  margin-top: var(--space-7);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--text-sm);
}

.help-box p {
  margin: 0;
}

.section-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-4);
  max-width: none;
}

/* Support home: each section's name is on label tape, like the portal's tags. */
.section-cards .card > h2 {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--space-3);
  padding: 3px var(--space-3);
  border: 1px solid var(--tape-edge);
  border-radius: var(--radius-sm);
  background: var(--tape-bg);
  color: var(--tape-ink);
  font-family: var(--font-tape);
  font-stretch: condensed;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.12);
}

.docs .prose:has(.section-cards) {
  max-width: none;
}

/* ---- Motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  .tether,
  .trace-chain li + li::before,
  .audit-row {
    animation: none;
  }
  .button {
    transition: none;
  }
}

/* ---- Header: phone menu instead of the link row (860px and narrower) ---- */
@media (max-width: 860px) {
  .head-row {
    gap: var(--space-3);
  }
  .site-nav {
    display: none;
  }
  .nav-menu {
    display: block;
  }
}

/* ---- Tablets and phones (900px and narrower) ---- */
@media (max-width: 900px) {
  .docs-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "side";
    gap: 0;
  }
  .docs-main {
    padding-bottom: var(--space-6);
  }
  .side-jump {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
  }
  .docs-side {
    position: static;
    max-height: none;
    padding: var(--space-5) 0 var(--space-7);
    border-top: 1px solid var(--hairline);
  }
  /* The support home already lists every topic as cards. */
  .docs:has(.section-cards) .docs-side,
  .docs:has(.section-cards) .side-jump {
    display: none;
  }
  .side-toggle > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-weight: 600;
    cursor: pointer;
  }
  .side-toggle[open] > summary {
    margin-bottom: var(--space-4);
  }
}

/* ---- Phones (768px and narrower) ---- */
@media (max-width: 768px) {
  .wrap {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  h2 {
    margin-top: var(--space-6);
  }
  .band {
    margin: var(--space-7) 0;
  }
  .band.is-paired {
    margin-bottom: var(--space-6);
  }
  .band.is-paired + .band {
    margin-top: var(--space-6);
  }
  .cta {
    margin-top: var(--space-8);
  }
  .cta,
  .band.rack {
    padding: var(--space-5);
  }
  .trace {
    padding: var(--space-4);
  }
}

/* ---- Print ---- */
@media print {
  .site-head,
  .site-foot,
  .docs-side,
  .side-jump,
  .skip,
  .help-box {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* === contact + beta forms (clarify pass) === */
/* The topic-driven /contact form, the error page's "what to add" list, the beta "what happens next"
   list, AI app checkboxes, the Turnstile placeholder, the no-JS alert and
   the reassurance beside Send. Tokens only, so dark mode follows. */
/* One form on /contact whose help and fields follow the chosen topic, with
   CSS only (no script needed): each topic-specific part carries
   `topic-part t-<topic>` and is shown when that option is :checked. Fields
   that a topic needs are enforced by site/api/contact.mjs (TOPICS), never by
   `required`, because a hidden required field would block sending.
   Fallback: a browser without :has (or without @supports selector()) skips
   this whole block and simply shows every part. */
@supports selector(:has(*)) {
  .topic-form .topic-part {
    display: none;
  }

  /* `revert` gives each part its normal display: block for the wrappers
     and notes, inline for the "(optional)" marker in a label. */
  .topic-form:has(#contact-topic option[value="sales"]:checked) .t-sales,
  .topic-form:has(#contact-topic option[value="support"]:checked) .t-support,
  .topic-form:has(#contact-topic option[value="beta"]:checked) .t-beta,
  .topic-form:has(#contact-topic option[value="vendor"]:checked) .t-vendor,
  .topic-form:has(#contact-topic option[value="security"]:checked) .t-security,
  .topic-form:has(#contact-topic option[value="privacy"]:checked) .t-privacy,
  .topic-form:has(#contact-topic option[value="partnership"]:checked) .t-partnership,
  .topic-form:has(#contact-topic option[value="press"]:checked) .t-press,
  .topic-form:has(#contact-topic option[value="billing"]:checked) .t-billing,
  .topic-form:has(#contact-topic option[value="other"]:checked) .t-other {
    display: revert;
  }

  /* Before a topic is chosen, only the prompt shows. The beta topic points
     to its own application instead of this form. */
  .topic-form:not(:has(#contact-topic option[value=""]:checked)) .t-none,
  .topic-form:has(#contact-topic option[value=""]:checked) .needs-topic,
  .topic-form:has(#contact-topic option[value="beta"]:checked) .needs-topic {
    display: none;
  }
}

.topic-prompt {
  max-width: 72ch;
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--ink-muted);
}

.topic-note {
  max-width: 72ch;
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.topic-note > :last-child {
  margin-bottom: 0;
}

.topic-note p {
  margin: 0 0 var(--space-3);
}

.topic-note .topic-note-title {
  margin-bottom: var(--space-2);
  font-weight: 650;
}

.topic-note .checks {
  margin-bottom: 0;
}

.topic-note .button {
  text-decoration: none;
}

.choice-list input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* /contact/error#need-<field>: the server sends the visitor to the item
   that names what to add; :target marks it. */
.need-list li {
  margin-bottom: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
}

.need-list li:target {
  outline: 1px solid var(--cord-pending);
  background: var(--tint-pending);
}

.next-steps {
  max-width: 72ch;
  margin: 0 0 var(--space-6);
  padding-left: var(--space-5);
}

.next-steps li {
  margin-bottom: var(--space-3);
  padding-left: var(--space-1);
}

.next-steps li::marker {
  font-weight: 650;
}

.contact-form fieldset.choices {
  min-width: 0;
  margin: 0 0 var(--space-5);
  padding: 0;
  border: 0;
}

.contact-form fieldset.choices legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
}

.choice-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0 var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.choice-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
}

.choice-list input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--button-primary-bg);
}

.contact-form .choice-list label {
  font-weight: 400;
}

/* Turnstile draws its own widget inside this box. Until it does (no key
   yet, script blocked, JavaScript off) the empty box is a quiet dashed
   placeholder in the page's colours instead of a blank white rectangle. */
.contact-form .cf-turnstile {
  max-width: 300px;
  min-height: 65px;
}

.contact-form .cf-turnstile:empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.contact-form .cf-turnstile:empty::before {
  content: "Security check";
}

.form-alert {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--cord-pending);
  border-radius: var(--radius-md);
  background: var(--tint-pending);
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.form-send {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
}

.send-note {
  margin: 0;
  padding: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
  list-style: none;
}

.send-note li + li {
  margin-top: var(--space-1);
}

@media (max-width: 480px) {
  .form-send {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* === end contact + beta forms === */

/* === support search (support.stacktether.com/search) === */
/* Server-side search, no script: plain GET forms to /search (support/api/search.mjs
   fills the results). The header box sits between the logo and the links on wide
   screens, beside the Menu on tablets, and inside the Menu on phones. The home
   page has a larger box; the results page reuses it. Tokens only, so dark mode follows. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.head-search,
.search-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.head-search {
  flex: 0 1 18rem;
  min-width: 13rem;
  margin-left: auto;
}

.head-search + .site-nav {
  flex: 0 0 auto;
}

:is(.head-search, .menu-search, .support-search) input[type="search"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
  caret-color: var(--focus);
}

:is(.head-search, .menu-search, .support-search) input[type="search"]::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

:is(.head-search, .menu-search, .support-search) input[type="search"]:focus-visible {
  border-color: var(--focus);
  outline: 2px solid var(--focus);
  outline-offset: 0;
}

:is(.head-search, .menu-search, .support-search) .button {
  flex: none;
  min-height: 44px;
  padding: 0 var(--space-4);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

:is(.head-search, .menu-search, .support-search) .button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.menu-search {
  display: none;
  padding: var(--space-3) 0 var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

/* The Menu's full-width Sign in rule does not apply to this button. */
.menu-search .button {
  width: auto;
  margin-top: 0;
}

.menu-search label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Home and results page: the big box. */
.support-search {
  max-width: 40rem;
  margin: var(--space-5) 0 var(--space-6);
}

.support-search > label.tape {
  display: flex;
  width: fit-content;
  margin-bottom: var(--space-3);
}

.support-search .search-row {
  gap: var(--space-3);
}

.support-search input[type="search"] {
  min-height: 48px;
  font-size: var(--text-md);
}

.support-search .button {
  min-height: 48px;
  padding: 0 var(--space-5);
}

.support-search .hint {
  margin: var(--space-2) 0 0;
}

/* Results */
.search-count {
  margin: 0 0 var(--space-4);
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.search-results {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
  list-style: none;
}

.search-results > li {
  margin: 0;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--hairline);
}

.search-results h2 {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.35;
}

.search-section {
  margin: var(--space-1) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.search-snippet {
  margin: var(--space-2) 0 0;
}

.search-results mark {
  padding: 0 0.1em;
  border-radius: var(--radius-sm);
  background: var(--tint-pending);
  color: inherit;
  font-weight: 650;
}

.search-empty {
  max-width: 48rem;
  padding: var(--space-5);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-md);
}

.search-empty > :first-child {
  margin-top: 0;
}

.search-empty > :last-child {
  margin-bottom: 0;
}

.search-browse {
  margin-top: var(--space-7);
}

/* Tablets: the links move into the Menu, the search box stays in the header. */
@media (max-width: 1180px) {
  .docs .site-nav {
    display: none;
  }
  .docs .nav-menu {
    display: block;
    margin-left: 0;
  }
}

/* Phones: the search box moves into the Menu. */
@media (max-width: 860px) {
  .head-search {
    display: none;
  }
  .docs .nav-menu {
    margin-left: auto;
  }
  .menu-search {
    display: block;
  }
}

@media (max-width: 480px) {
  .support-search .search-row {
    flex-wrap: wrap;
  }
  .support-search .button {
    flex: 1 1 100%;
  }
}

@media print {
  .head-search,
  .support-search {
    display: none;
  }
}
/* === end support search === */