/* ABOUTME: The one stylesheet for fabricatedemail.com — shared by the hand-written pages and by every page scripts/build-site.ts renders. */
/* ABOUTME: No framework and no build step: the site is static files, and this file is small enough to read end to end. */

/* The tokens follow the "Terminal Obsidian" design system in doc/design:
   obsidian surfaces that step up in luminance, hairline borders, electric
   cyan for the primary action and amber for warnings, Inter for prose and
   JetBrains Mono for anything that is code, data or a label. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/vendor/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/vendor/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --surface-base: #090a0d;
  --surface-raised: #12141a;
  --surface-overlay: #181b22;
  --surface-panel: #1e2024;
  --code-bg: #0b0d11;
  --border-subtle: #272b33;
  --border-strong: #3f4450;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);
  --text: #e2e2e9;
  --text-primary: #f4f4f5;
  --text-secondary: #9da4b2;
  /* Light enough to clear WCAG AA (4.5:1) on every surface it is used on,
     which the design system's own #525866 does not. */
  --text-muted: #7d8492;
  --cyan: #00f0ff;
  --cyan-soft: rgba(0, 240, 255, 0.08);
  --cyan-line: rgba(0, 240, 255, 0.3);
  --amber: #f59e0b;
  --amber-soft: rgba(245, 158, 11, 0.1);
  --amber-line: rgba(245, 158, 11, 0.3);
  --cobalt: #1854d7;
  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.1);
  --success-line: rgba(16, 185, 129, 0.3);
  --alert: #ff453a;
  --alert-soft: rgba(255, 69, 58, 0.08);
  --alert-line: rgba(255, 69, 58, 0.3);
  --glow: 0 0 0 1px var(--cyan), 0 0 16px -2px rgba(0, 240, 255, 0.25);
  --measure: 42rem;
  --wide: 58rem;
  --landing: 74rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--text);
  background: var(--surface-base);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--cyan);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--text-primary);
}

:focus-visible {
  outline: 0;
  box-shadow: var(--glow);
  border-radius: var(--radius);
}

strong {
  color: var(--text-primary);
}

code {
  font-family: var(--mono);
  font-size: 0.875em;
  color: var(--text-primary);
  background: var(--code-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 0.05em 0.35em;
}

pre {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--code-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  overflow-x: auto;
}

pre code {
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}

/* --- chrome ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.6rem 1.5rem;
  border-bottom: 1px solid var(--hairline);
  background: rgba(9, 10, 13, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header .wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
}

/* The mark: a cyan block cursor, the one glyph a terminal always shows. */
.site-header .wordmark::before {
  content: "";
  width: 0.5rem;
  height: 1rem;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  font-size: 0.8125rem;
}

.site-header nav a {
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 120ms, background-color 120ms;
}

.site-header nav a:hover {
  color: var(--text-primary);
  background: var(--surface-raised);
}

/* The one action in the header: "Sign up" for a visitor, "Dashboard" for
   someone signed in. */
.site-header nav a.nav-action {
  margin-left: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-weight: 600;
  color: var(--surface-base);
  background: var(--cyan);
}

.site-header nav a.nav-action:hover {
  color: var(--surface-base);
  background: #7df4ff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

/* signup.js sets .signed-in on <html> from the customer app's fe_signed_in
   cookie. Without it, or without JavaScript, the header offers sign-in and
   sign-up. It also sets .js, and a .js-only control needs the dialog. */
html.signed-in .nav-guest,
html:not(.signed-in) .nav-member,
html:not(.js) .js-only {
  display: none;
}

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 1.5rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 0.5rem;
}

.site-footer nav a {
  color: var(--text-secondary);
  text-decoration: none;
}

.site-footer nav a:hover {
  color: var(--text-primary);
}

.site-footer p {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
}

.site-footer p a {
  color: var(--text-secondary);
}

.site-footer p a:hover {
  color: var(--cyan);
}

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

.layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  align-items: start;
  /* The sidebar is sticky and shorter than the page, so its column is painted
     here, for the full height, rather than on the sidebar itself. */
  background: linear-gradient(to right, var(--surface-raised) 16rem, transparent 16rem);
}

.sidebar {
  position: sticky;
  top: 3.5rem;
  max-height: calc(100vh - 3.5rem);
  overflow-y: auto;
  padding: 1.75rem 1rem 2rem 1.5rem;
  border-right: 1px solid var(--hairline);
  font-size: 0.8125rem;
}

.sidebar-heading {
  margin: 0 0 0.5rem;
  padding: 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

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

.sidebar li {
  margin: 0.1rem 0;
}

.sidebar a {
  display: block;
  padding: 0.3rem 0.5rem;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-secondary);
  text-decoration: none;
}

.sidebar a:hover {
  color: var(--text-primary);
  background: var(--surface-overlay);
}

.sidebar a[aria-current="page"] {
  border-left-color: var(--cyan);
  background: var(--cyan-soft);
  color: var(--cyan);
  font-weight: 500;
}

.docs main {
  max-width: var(--measure);
  padding: 1.75rem 1.5rem 4rem;
}

/* Redoc renders its own menu and sample panes and needs the width. Beside the
   site sidebar that would be three columns, all of them squeezed, so on a wide
   screen the reference page drops the sidebar; the header's Documentation link
   is the way back. On a narrow screen the layout is one column anyway and the
   sidebar stacks above, as it does on every other page. */
.reference .layout {
  grid-template-columns: minmax(0, 1fr);
}

.reference .sidebar {
  display: none;
}

.reference main {
  padding: 0;
}

.reference redoc {
  display: block;
}

/* Redoc's own theme (scripts/build-site.ts) carries the palette, but a few of
   its colours are not theme options and are hard-coded for a light page. Each
   rule below is one of those: without them the reference has white table rows,
   an invisible selected sample tab and near-black labels on the obsidian
   background. The selectors are Redoc's stable class names and plain elements,
   never its generated styled-components hashes. */
.reference redoc .redoc-markdown table tr {
  background: transparent;
}

.reference redoc .redoc-markdown table tr:nth-child(2n) {
  background: var(--surface-raised);
}

/* Redoc paints the selected sample tab in its `text.primary` colour, which on
   a dark palette is a near-white block. It injects its stylesheet after this
   one, so the override has to out-rank it rather than merely follow it. */
body.reference redoc ul[role="tablist"] li.react-tabs__tab--selected {
  background: var(--surface-panel);
  border-radius: var(--radius) var(--radius) 0 0;
}

body.reference redoc ul[role="tablist"] li.react-tabs__tab--selected:not([class*="tab-"]) {
  color: var(--text-primary);
}

.reference redoc h5 {
  color: var(--text-secondary);
}

.reference redoc h5 span {
  color: var(--text-primary);
}

/* The method chips, in the menu and above each endpoint: Redoc sets white on
   the method colour, which is unreadable on cyan and on green. */
.reference redoc .operation-type,
.reference redoc .http-verb {
  color: var(--surface-base);
  font-weight: 700;
}

/* Every method colour is a light one, so all four chips take the dark text. */

/* --- prose --------------------------------------------------------------- */

main h1 {
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 1rem;
}

main h2 {
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 2.5rem 0 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hairline);
}

main h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 1.75rem 0 0.5rem;
}

main h4 {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 1.5rem 0 0.5rem;
}

main table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.875rem;
}

main th,
main td {
  border: 1px solid var(--border-subtle);
  padding: 0.5rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

main th {
  background: var(--surface-raised);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* A markdown table written without column headings still renders a `thead`.
   An empty one is a grey bar with nothing in it, which a reader has to stop
   and explain to themselves. */
main thead:not(:has(th:not(:empty))) {
  display: none;
}

main blockquote {
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--amber-line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  background: var(--amber-soft);
}

main blockquote p {
  margin: 0;
}

main hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 2.5rem 0;
}

/* --- marketing pages ----------------------------------------------------- */

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.page.wide {
  max-width: var(--wide);
}

.lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.hero {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 1rem;
}

.hero h1 {
  font-size: 2.75rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 0.75rem;
}

.hero h1 em {
  font-style: normal;
  color: var(--cyan);
}

.hero .lede {
  font-size: 1.0625rem;
  max-width: 36rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--cyan);
  background: var(--cyan);
  color: var(--surface-base);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: box-shadow 120ms, transform 80ms, border-color 120ms, background-color 120ms;
}

.button:hover {
  border-color: #7df4ff;
  background: #7df4ff;
  color: var(--surface-base);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

.button:active {
  transform: scale(0.98);
}

/* The button paints its own box-shadow, so it needs its focus ring spelled
   out here — the shared :focus-visible rule loses to :hover otherwise. */
.button:focus-visible,
.site-header nav a:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
  box-shadow: var(--glow);
}

.button.secondary {
  border-color: var(--hairline-strong);
  background: var(--surface-raised);
  color: var(--text-primary);
}

.button.secondary:hover {
  border-color: var(--cyan);
  background: var(--surface-overlay);
  color: var(--text-primary);
  box-shadow: none;
}

.notice {
  max-width: var(--wide);
  margin: 2rem auto 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--amber-line);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-md);
  background: var(--amber-soft);
}

.notice h2 {
  margin: 0 0 0.4rem;
  border: 0;
  padding: 0;
  font-size: 1.125rem;
}

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

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  max-width: var(--wide);
  margin: 2.5rem auto 0;
  padding: 0 1.5rem;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  background: var(--surface-raised);
  transition: border-color 120ms, background-color 120ms;
}

.card:hover {
  border-color: var(--hairline-strong);
  background: var(--surface-overlay);
}

.card h3 {
  margin: 0;
  font-size: 1rem;
}

.card p {
  margin: 0;
  color: var(--text-secondary);
}

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

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}

.tier {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  background: var(--surface-raised);
}

.tier.featured {
  border-color: var(--cyan);
  box-shadow: var(--glow);
}

.tier h2 {
  margin: 0;
  border: 0;
  padding: 0;
  font-size: 1.25rem;
}

.tier .price {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0.5rem 0 0;
}

.tier.featured .price {
  color: var(--cyan);
}

.tier .price small {
  display: block;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0;
}

.tier ul {
  margin: 1.25rem 0 0;
  padding-left: 1.1rem;
}

.tier li {
  margin: 0.35rem 0;
}

.tier li strong {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* --- landing page -------------------------------------------------------- */

.landing {
  display: flex;
  flex-direction: column;
}

.landing > section {
  padding: 4rem 1.5rem;
}

.landing > section.raised {
  background: var(--surface-raised);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.landing .inner {
  max-width: var(--landing);
  margin: 0 auto;
}

/* A mono uppercase label that heads a section or a panel. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
}

.eyebrow .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--success);
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow .dot {
    animation: none;
  }
}

.section-head {
  max-width: 44rem;
  margin: 0 0 2.5rem;
}

.section-head h2 {
  margin: 0 0 0.5rem;
  padding: 0;
  border: 0;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.section-head p {
  margin: 0;
  font-size: 1rem;
  color: var(--text-secondary);
}

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

.landing .hero {
  position: relative;
  overflow: hidden;
  max-width: none;
  margin: 0;
  padding: 4.5rem 1.5rem 4rem;
}

/* Two ambient glows behind the hero: cyan top-left, amber bottom-right. */
.landing .hero::before,
.landing .hero::after {
  content: "";
  position: absolute;
  width: 28rem;
  height: 28rem;
  border-radius: 9999px;
  filter: blur(80px);
  pointer-events: none;
}

.landing .hero::before {
  top: -10rem;
  left: -6rem;
  background: rgba(0, 240, 255, 0.07);
}

.landing .hero::after {
  right: -8rem;
  bottom: -14rem;
  background: rgba(245, 158, 11, 0.06);
}

.landing .hero .inner {
  position: relative;
  z-index: 1;
}

.landing .hero .lede {
  margin: 0;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.stats li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.stats .label {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stats .value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-primary);
}

.stats .value.accent {
  color: var(--cyan);
}

/* A code window: a title bar with the three dots, a body, and an optional
   response pane below it. */
.terminal {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  background: var(--code-bg);
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-raised);
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.terminal-bar .dots {
  display: inline-flex;
  gap: 0.35rem;
  margin-right: 0.25rem;
}

.terminal-bar .dots i {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background: var(--border-strong);
}

.terminal-bar .dots i:nth-child(1) {
  background: rgba(255, 69, 58, 0.7);
}

.terminal-bar .dots i:nth-child(2) {
  background: rgba(245, 158, 11, 0.7);
}

.terminal-bar .dots i:nth-child(3) {
  background: rgba(16, 185, 129, 0.7);
}

.terminal-bar .right {
  margin-left: auto;
}

.terminal pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 1rem 1.25rem;
  font-size: 0.75rem;
  line-height: 1.65;
}

.terminal .response {
  border-top: 1px solid var(--hairline);
  background: rgba(18, 20, 26, 0.6);
}

.terminal .response pre {
  color: var(--text-secondary);
}

/* Syntax roles inside code samples. */
.c-cmt {
  color: var(--text-muted);
}

.c-cmd {
  color: var(--success);
  font-weight: 600;
}

.c-str {
  color: var(--amber);
}

.c-key {
  color: var(--text-secondary);
}

.c-val {
  color: var(--text-primary);
}

.c-hi {
  color: var(--cyan);
  font-weight: 600;
}

/* Status pills: mono, uppercase, a hairline in the state's colour. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--cyan-line);
  border-radius: var(--radius);
  background: var(--cyan-soft);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}

.pill.success {
  border-color: var(--success-line);
  background: var(--success-soft);
  color: var(--success);
}

.pill.pending {
  border-color: var(--amber-line);
  background: var(--amber-soft);
  color: var(--amber);
}

.pill .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: currentColor;
}

/* How it works: the diagram across the section, the three numbered steps in a
   row beneath it. The diagram carries small labels, so it gets the full width
   rather than half of it. */
.pipeline {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.diagram {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-base);
}

.diagram-head,
.diagram-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.diagram-head .label {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.diagram-head .accent {
  color: var(--cyan);
}

/* On a narrow screen the diagram keeps a readable size and scrolls sideways,
   as the design system says a code viewport should. */
.diagram-scroll {
  overflow-x: auto;
}

.diagram svg {
  display: block;
  width: 100%;
  min-width: 44rem;
  height: auto;
}

/* Only worth saying where the diagram actually scrolls. */
.diagram-scroll-hint {
  display: none;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: flex;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 600;
}

.steps li:nth-child(1)::before {
  background: var(--cyan);
  color: var(--surface-base);
}

.steps li:nth-child(2)::before {
  background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  color: var(--amber);
}

.steps li:nth-child(3)::before {
  background: var(--success-soft);
  border: 1px solid var(--success-line);
  color: var(--success);
}

.steps h3 {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
}

.steps p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* A short token like `?wait=30` reads as one thing; letting it break after
   the question mark makes it look like two. */
.steps code {
  white-space: nowrap;
}

/* The "know this before you buy" section: the notice with a checklist card
   beside it. */
.notice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 2rem;
  align-items: start;
}

.landing .notice {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--hairline);
  border-left: 0;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  overflow: hidden;
}

.landing .notice::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.375rem;
  background: var(--amber);
}

.landing .notice h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 1.375rem;
}

.landing .notice h2 svg {
  color: var(--amber);
}

.landing .notice p {
  color: var(--text-secondary);
}

.landing .notice p:first-of-type {
  color: var(--text);
}

.landing .notice strong {
  color: var(--amber);
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
}

.checklist .eyebrow {
  margin: 0;
  color: var(--text-muted);
}

.checklist ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-primary);
}

.checklist li svg {
  flex: 0 0 auto;
}

.checklist li.yes svg {
  color: var(--success);
}

.checklist li.no {
  color: var(--text-secondary);
}

.checklist li.no svg {
  color: var(--alert);
}

.checklist .more {
  margin-top: 0.25rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
}

/* The six cards, with an icon and a mono footer line each. */
.landing .cards {
  max-width: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  /* Each card is as tall as its own content. Stretching them to the tallest
     in the row leaves the short ones with a band of empty space inside. */
  align-items: start;
}

.landing .card {
  gap: 0.6rem;
  padding: 1.5rem;
  background: var(--surface-base);
}

.landing .card:hover {
  background: var(--surface-overlay);
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--cyan);
}

.card-icon.amber {
  color: var(--amber);
}

.card-icon.success {
  color: var(--success);
}

.card-icon.alert {
  color: var(--alert);
}

.card-icon.filled {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--surface-base);
}

.landing .card h3 {
  font-size: 1.0625rem;
  font-weight: 600;
}

.landing .card p {
  flex: 1 1 auto;
  font-size: 0.875rem;
}

/* A note that runs the width of the card grid: icon, text, and the link to the
   guide, on one line. */
.landing .card.wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
}

.card.wide .card-icon {
  flex: 0 0 auto;
}

.card.wide h3 {
  margin: 0 0 0.15rem;
  font-size: 1rem;
}

.card.wide p {
  margin: 0;
  max-width: 62ch;
}

.card-more {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.6875rem;
  white-space: nowrap;
}

.card-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.card-foot.code {
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  background: var(--code-bg);
}

.card-foot .pill {
  font-size: 0.6875rem;
  letter-spacing: 0;
  text-transform: none;
}

.card-foot svg {
  color: var(--success);
}

/* The MCP tool list: real text rather than a picture of text, so it stays
   legible and selectable at every width. */
.tools {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.tools li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--code-bg);
}

.tools code {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cyan);
}

.tools span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.tools li.rest {
  border-style: dashed;
  border-color: var(--cyan-line);
  background: none;
}

/* Agents: three points beside the client configuration and the tool list. */
.agent-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.agent-points {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-points li {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--cyan);
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
}

.agent-points h3 {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
}

.agent-points p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.agent-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.agent-panel .tools {
  margin: 0;
}

/* Start reading: the prose beside the two document links. */
.reading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.reading .section-head {
  margin: 0;
}

.reading .section-head p a {
  color: var(--text-primary);
  font-weight: 500;
}

.reading .section-head p a:hover {
  color: var(--cyan);
}

.reading .actions {
  flex: 0 0 auto;
  margin: 0;
}

/* --- legal --------------------------------------------------------------- */

.version {
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 0.8125rem;
  margin-top: -0.5rem;
}

/* --- sign-up dialog ------------------------------------------------------ */

/* Built by signup.js and opened with showModal(), which makes the rest of the
   page inert and closes on Escape. */
.signup-dialog {
  width: min(26rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.5rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
}

.signup-dialog::backdrop {
  background: rgba(9, 10, 13, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.signup-dialog h2 {
  margin: 0 2rem 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.signup-close-form {
  margin: 0;
}

.signup-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text-secondary);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}

.signup-close:hover {
  color: var(--text-primary);
  background: var(--surface-overlay);
}

.signup-intro {
  margin: 0 0 1.25rem;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

/* "Check your inbox" takes focus so a screen reader reads it; it is not a control, so no ring. */
.signup-intro:focus {
  outline: 0;
  box-shadow: none;
}

.signup-form {
  display: flex;
  flex-direction: column;
}

.signup-form > label:not(.signup-check) {
  margin-bottom: 0.35rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.signup-form input[type="email"] {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--code-bg);
  color: var(--text-primary);
  font: inherit;
}

.signup-form input:focus-visible {
  border-color: var(--cyan);
}

.signup-check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.signup-check input {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0.2rem 0 0;
  accent-color: var(--cyan);
}

.signup-error {
  margin: 0 0 1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--alert-line);
  border-left: 3px solid var(--alert);
  border-radius: var(--radius);
  background: var(--alert-soft);
  color: var(--text-primary);
  font-size: 0.875rem;
}

.signup-status:empty {
  display: none;
}

.signup-status {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--success);
}

.signup-submit {
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
}

.signup-submit:disabled,
.signup-link:disabled {
  opacity: 0.55;
  cursor: progress;
}

.signup-submit:disabled:hover {
  border-color: var(--cyan);
  background: var(--cyan);
  box-shadow: none;
}

.signup-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 1rem 0 0;
}

.signup-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cyan);
  font: inherit;
  font-size: 0.8125rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.signup-link:hover {
  color: var(--text-primary);
}

.signup-foot {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 64rem) {
  .hero-grid,
  .agent-grid,
  .notice-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .notice-grid .checklist {
    max-width: 24rem;
  }

  .landing .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reading {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 52rem) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    background: none;
  }

  /* A wide table scrolls inside its own box instead of widening the page. */
  main table {
    display: block;
    overflow-x: auto;
  }

  /* A heading that is one long path may break inside the path. */
  main h2,
  main h3 {
    overflow-wrap: anywhere;
  }

  .sidebar,
  .reference .sidebar {
    display: block;
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    padding: 1rem 1.5rem;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .landing > section,
  .landing .hero {
    padding: 3rem 1rem;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps,
  .landing .cards {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Too narrow for the one-line note; it stacks like every other card. */
  .landing .card.wide {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .card-more {
    margin-left: 0;
  }

  /* Two labels on one line wrap into four at this width. */
  .diagram-head {
    flex-direction: column;
    gap: 0.15rem;
  }

  /* Below this width the diagram no longer fits, so say that it scrolls. */
  .diagram-scroll-hint {
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
  }

  .diagram-foot {
    display: none;
  }

  .section-head h2 {
    font-size: 1.5rem;
  }
}