:root {
  --void: #05080f;
  --hull: #0b1220;
  --panel: #121c2e;
  --edge: rgba(125, 211, 252, 0.18);
  --signal: #7dd3fc;
  --signal-dim: #3a8fb8;
  --brass: #d4a574;
  --brass-hot: #f0c89a;
  --ink: #e8eef7;
  --mute: #8b9bb0;
  --danger: #ff6b6b;
  --font-display: 'Oxanium', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --space: clamp(1rem, 2vw, 2rem);
  --max: 1120px;
}

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

html {
  scroll-behavior: smooth;
  /* Reserve the scrollbar's width whether or not the page scrolls. Without it a
     short page has no scrollbar, a long one does, and every centred element
     jumps sideways by half a scrollbar as you move between them. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 70% 10%, rgba(125, 211, 252, 0.08), transparent 55%),
    radial-gradient(ellipse 60% 40% at 10% 80%, rgba(212, 165, 116, 0.06), transparent 50%),
    linear-gradient(180deg, #05080f 0%, #070d18 100%);
}

body > * {
  position: relative;
  z-index: 1;
}

img {
  max-width: 100%;
  display: block;
}

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

a:hover {
  color: var(--brass-hot);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--signal);
  color: var(--void);
  padding: 0.5rem 1rem;
  z-index: 100;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--space);
  max-width: calc(var(--max) + 4rem);
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
  text-decoration: none;
}

.brand-logo {
  display: block;
  height: 1.55rem;
  width: auto;
}

.brand-mark {
  width: 0.85rem;
  height: 1.55rem;
  border: 1.5px solid var(--brass);
  border-right-width: 3px;
  box-shadow: inset 3px 0 0 var(--signal-dim);
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1rem;
}

/* Prefer SVG logo; keep CSS mark + name as fallback when logo omitted */
.brand:has(.brand-logo) .brand-mark,
.brand:has(.brand-logo) .brand-name {
  display: none;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  align-items: center;
}

.site-header nav a {
  color: var(--mute);
  text-decoration: none;
  font-size: 0.95rem;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
  color: var(--ink);
}

/* The lab is not the product. A thin separator in the primary nav keeps the two
   research pages visually apart from the commercial ones, and the band below
   marks the pages that belong to the lab. */
.nav-sep {
  width: 1px;
  height: 1.05rem;
  background: var(--edge);
  flex: 0 0 auto;
}

.lab-band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  max-width: calc(var(--max) + 4rem);
  margin: 0 auto;
  padding: 0.55rem var(--space) 0.6rem;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background: rgba(11, 18, 32, 0.55);
}

.lab-band-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}

.lab-band nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}

.lab-band a {
  color: var(--mute);
  text-decoration: none;
  font-size: 0.88rem;
}

.lab-band a:hover,
.lab-band a:focus-visible {
  color: var(--ink);
}

.lab-band a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--signal);
}

/* Which page you are on. A lit bar under the label, in the signal colour used
   for live state elsewhere on the site; the hover state shows the same bar
   dimmed, so the indicator reads as one idea rather than two. */
.site-header nav a {
  position: relative;
  padding-bottom: 0.15rem;
}

.site-header nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3rem;
  height: 2px;
  background: var(--signal);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 140ms ease, transform 140ms ease;
}

.site-header nav a:not(.nav-cta):hover::after,
.site-header nav a:not(.nav-cta):focus-visible::after {
  opacity: 0.35;
  transform: scaleX(1);
}

.site-header nav a[aria-current="page"] {
  color: var(--ink);
}

.site-header nav a:not(.nav-cta)[aria-current="page"]::after,
.site-header nav a:not(.nav-cta)[aria-current="page"]:hover::after {
  opacity: 1;
  transform: scaleX(1);
  box-shadow: 0 0 8px rgba(125, 211, 252, 0.55);
}

/* The call to action is already a filled block, so it takes a ring rather than
   a bar when it is the page you are on. */
.nav-cta[aria-current="page"] {
  box-shadow: 0 0 0 2px var(--void), 0 0 0 3px var(--signal);
}

@media (prefers-reduced-motion: reduce) {
  .site-header nav a:not(.nav-cta)::after { transition: none; }
}

.nav-cta {
  color: var(--void) !important;
  background: var(--signal);
  padding: 0.45rem 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.8rem !important;
}

.nav-cta:hover {
  background: var(--brass-hot);
  color: var(--void) !important;
}

.hero {
  position: relative;
  min-height: min(100vh, 920px);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}

.hero-chamber {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 8, 15, 0.92) 0%, rgba(5, 8, 15, 0.55) 42%, rgba(5, 8, 15, 0.25) 70%),
    linear-gradient(0deg, rgba(5, 8, 15, 0.9) 0%, transparent 38%);
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(4rem, 12vh, 7rem) var(--space) clamp(3rem, 8vh, 5rem);
}

.brand-hero {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 11vw, 7.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 40px rgba(125, 211, 252, 0.25);
  animation: brand-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

#hero-title {
  margin: 0 0 1rem;
  max-width: 14ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.55rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  animation: rise 1s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero-lede {
  margin: 0 0 1.75rem;
  max-width: 38rem;
  color: var(--mute);
  font-size: 1.12rem;
  animation: rise 1s 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
  animation: rise 1s 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute);
  animation: rise 1s 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--signal), #4aa3c7);
  color: #041018;
  border-color: transparent;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--brass-hot), var(--brass));
  color: #1a1208;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--edge);
}

.btn-ghost:hover {
  border-color: var(--signal);
  color: var(--signal);
}

.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vh, 6rem) var(--space);
}

.section-head {
  max-width: 40rem;
  margin-bottom: 2.5rem;
}

.eyebrow {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

.section h2 {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
  font-weight: 600;
}

.section-head p:last-child {
  margin: 0;
  color: var(--mute);
}

/*
 * The trust section argues the seal needs no reputation behind it, so the
 * entity panel is the one place that deliberately does the opposite: a named
 * company, on the record. Given its own treatment so it reads as a signature
 * rather than another feature card.
 */
/* Four substantial claims read better in pairs than in a 3+1 orphan row. */
.team-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 800px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 2.5rem;
  }
}

.team-grid article {
  padding-top: 1rem;
  border-top: 1px solid var(--edge);
}

.team-grid h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}

.team-grid p {
  margin: 0;
  color: var(--mute);
}

/* Dense reference prose: the integration guide and every research page.
   One measure for everything: 48rem of container, which is 44rem of text
   once the page's own padding is taken off, against a 52rem break-out for a
   table, a code block or a figure. The text is meant to read a little
   narrower than the figure beside it, not a lot.

   `.page.doc`, not `.doc`. Every one of these pages is `<main class="page
   doc">`, and `.page { max-width: var(--max) }` is defined three hundred
   lines below `.doc`, so at equal specificity it won and `.doc`'s measure had
   never applied to anything. The container was the full 1120px while `.page
   .lede` capped every paragraph at 640, so headings, lists, tables and code
   blocks ran four hundred and eighty pixels wider than the prose beneath
   them, and the paragraphs read as short and ragged against their own
   headings. A table, a code block or a figure may still break out of the
   measure, but symmetrically and only where there is room, so that it reads
   as a decision rather than as the prose having come up short. */
.page.doc { max-width: 48rem; }
.page.doc .lede { max-width: none; }

.doc-h2 {
  margin: 2.75rem 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
}

.doc-h3 {
  margin: 2rem 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}

.doc-h4 {
  margin: 1.6rem 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--brass);
}

.doc .lede { margin: 0 0 0.9rem; }

/* The break-out: wide tables, code blocks and figures centre on the text
   column and extend equally either side of it, above the width where that
   fits. The selector carries `.page` so it outranks `.doc-figure`'s own
   margin shorthand further down the file. */
@media (min-width: 58rem) {
  .page.doc .table-scroll,
  .page.doc .code-block,
  .page.doc .doc-figure {
    width: 52rem;
    /* Centred on the text column whatever the page padding is: a fixed
       negative margin put the break-out 32px off centre, because the measure
       is the container's max-width minus its padding rather than the
       max-width itself. */
    margin-left: calc((100% - 52rem) / 2);
  }
}

.doc-list { margin: 0 0 1rem; padding-left: 1.15rem; color: var(--mute); }
.doc-list li { margin-bottom: 0.4rem; }

.doc-rule { border: 0; border-top: 1px solid var(--edge); margin: 2.5rem 0; }

.code-block {
  margin: 0 0 1.1rem;
  padding: 1rem 1.1rem;
  background: rgba(5, 8, 15, 0.75);
  border: 1px solid var(--edge);
  border-left: 2px solid var(--brass);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.65;
}

.code-block code { color: var(--ink); }

.doc .scenario-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.doc .scenario-table th {
  text-align: left;
  padding: 0.6rem 0.9rem 0.6rem 0;
  border-bottom: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}

.doc .scenario-table td {
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--edge);
  color: var(--mute);
  vertical-align: top;
}

/* Wide content scrolls in its own box; the page body never scrolls sideways. */
.table-scroll { overflow-x: auto; margin: 0 0 1.2rem; }

/* Directory: one card per certified agent. A buyer scans these to compare
   seals, so the tier and what it covers lead, and the evidence links are
   always present rather than hidden behind the name. */
.dir-list { display: grid; gap: 1.25rem; }

@media (min-width: 860px) {
  .dir-list { grid-template-columns: repeat(2, 1fr); }
}

.dir-card {
  min-width: 0;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--edge);
  background: rgba(11, 18, 32, 0.9);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.dir-head { min-width: 0; }

.dir-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.dir-principal { margin: 0.15rem 0 0; color: var(--mute); font-size: 0.9rem; }

/* The badge's width grows with the suite-version text it renders, so it is
   scaled to the card rather than given a fixed height. Left-aligned on its own
   row: in the header it overflowed the card and squeezed the agent name. */
.dir-badge {
  display: block;
  max-width: 100%;
  height: auto;
  align-self: flex-start;
}

.dir-tier { margin: 0; font-size: 0.95rem; }
.dir-tier code { font-size: 0.8rem; color: var(--mute); overflow-wrap: anywhere; }

.dir-about { margin: 0.6rem 0 0; font-size: 0.95rem; line-height: 1.55; }
.dir-about.is-collapsed { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dir-more { margin: 0.25rem 0 0; padding: 0; border: 0; background: none; color: var(--accent, #7fd1b9); font: inherit; font-size: 0.85rem; cursor: pointer; }
.dir-more:hover, .dir-more:focus-visible { text-decoration: underline; }
.dir-chip-first-party { border-color: var(--accent, #7fd1b9); color: var(--accent, #7fd1b9); }
.dir-summary { margin: 0; color: var(--mute); font-size: 0.88rem; line-height: 1.6; }

.dir-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.dir-chip {
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--edge);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--mute);
  white-space: nowrap;
}

.dir-dates {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--mute);
}

.dir-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.dir-links .btn { font-size: 0.8rem; padding: 0.4rem 0.8rem; }

.trust-entity {
  border-left: 2px solid var(--brass);
}

.trust-entity p {
  margin: 0;
  color: var(--mute);
  max-width: 52rem;
}

.trust-entity strong {
  color: var(--ink, inherit);
}

/* .mono carries pre-wrap for block output; inline it opens a visible gap. */
.entity-no {
  font-family: var(--font-mono);
  font-size: 0.85em;
  white-space: nowrap;
}

.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}

.flow li {
  margin: 0;
  padding: 1.4rem 1.35rem;
  background: rgba(11, 18, 32, 0.92);
}

.flow-label {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
}

.flow p {
  margin: 0;
  color: var(--mute);
}

@media (min-width: 800px) {
  .flow {
    grid-template-columns: repeat(3, 1fr);
  }
}

.readout-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 800px) {
  .readout-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.readout-grid article {
  padding-top: 1rem;
  border-top: 1px solid var(--edge);
}

.readout-grid h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}

.readout-grid p {
  margin: 0;
  color: var(--mute);
  font-size: 0.98rem;
}

.cta-band {
  text-align: left;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background: linear-gradient(90deg, rgba(18, 28, 46, 0.8), rgba(5, 8, 15, 0.2));
}

.cta-band h2 {
  max-width: 18ch;
}

.cta-band p {
  color: var(--mute);
  margin: 0 0 1.5rem;
}

.site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.5rem var(--space) 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  color: var(--mute);
  font-size: 0.92rem;
}

.site-footer strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.site-footer p {
  margin: 0;
  max-width: 28rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

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

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

/* Inner pages */
.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.5rem var(--space) 4rem;
}

.page h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 1rem;
}

/* The measure for prose that is not in a document page. 44rem is about
   eighty characters at this size: wider than the 40rem it was, because 40
   read as cramped beside everything around it, and still short of the line
   length at which the eye loses its place returning to the left margin. */
.page .lede {
  color: var(--mute);
  max-width: 44rem;
}

.panel {
  margin-top: 2rem;
  padding: 1.35rem;
  background: rgba(11, 18, 32, 0.9);
  border: 1px solid var(--edge);
}

.panel label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 0.35rem;
}

.panel input,
.panel textarea,
.panel select {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem 0.85rem;
  background: var(--void);
  border: 1px solid var(--edge);
  color: var(--ink);
  font: inherit;
}

.panel input:focus,
.panel textarea:focus,
.panel select:focus {
  outline: 2px solid var(--signal);
  outline-offset: 1px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.form-note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--mute);
}

/* Off-screen honeypot. Bots fill it; people never see it. */
.enquiry-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

.panel select {
  color-scheme: dark;
}

.status {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.status.error {
  color: var(--danger);
}

.status.ok {
  color: var(--signal);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
}

@keyframes brand-in {
  from {
    opacity: 0;
    letter-spacing: 0.18em;
    filter: blur(6px);
  }
  to {
    opacity: 1;
    letter-spacing: 0.02em;
    filter: blur(0);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .brand-hero,
  #hero-title,
  .hero-lede,
  .hero-actions,
  .hero-meta,
  .btn {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 720px) {
  .site-header nav a:not(.nav-cta) {
    display: none;
  }

  .hero {
    min-height: 100svh;
  }
}


/* Pricing --------------------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.pricing-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 1px solid var(--edge, rgba(255, 255, 255, 0.12));
  border-radius: 12px;
  background: var(--panel, rgba(255, 255, 255, 0.03));
}
.pricing-card.is-featured {
  border-color: var(--signal, #7fd1ff);
  box-shadow: 0 0 0 1px var(--signal, #7fd1ff) inset;
}
.pricing-card .price {
  font-family: var(--font-display, inherit);
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
}
.pricing-card .price-period {
  font-size: 0.5em;
  font-weight: 400;
  color: var(--mute, #8b97a5);
}
.pricing-card .tier-suite {
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  color: var(--mute, #8b97a5);
  margin: 0;
}
.pricing-card ul {
  margin: 0;
  padding-left: 1.1rem;
  flex: 1;
}
.pricing-card li {
  margin: 0.35rem 0;
}
.pricing-card .btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}
.tier-flag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--edge, rgba(255, 255, 255, 0.2));
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute, #8b97a5);
  vertical-align: middle;
}

/* Research index: a reader should be able to find a paper, an article or the
   next release without first reading the abstracts.  The index is a two-column
   card catalogue; the full argument belongs on the document page. */
.research-tracks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.75rem 0 2.25rem;
}
.research-tracks .research-card {
  padding: 1.2rem 1.25rem;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: rgba(18, 28, 46, 0.4);
}
.research-tracks .research-card h3 { font-size: 1.2rem; }
.research-tracks .research-card p + p { margin-top: 0.6rem; }
.research-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0 2rem;
}
.research-jump a {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--edge);
  border-radius: 999px;
  color: var(--mute);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}
.research-jump a:hover { border-color: var(--signal); color: var(--signal); }

.research-list { margin: 2.75rem 0 0; }
.research-section { margin: 2.75rem 0 0; }
.research-section:first-child { margin-top: 0; }
.research-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.9rem;
}
.research-section h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
}
.research-section-head p {
  max-width: 42rem;
  margin: 0;
  color: var(--mute);
  font-size: 0.95rem;
  text-align: right;
}
.research-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.research-list .research-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: rgba(18, 28, 46, 0.4);
}
.research-list .research-card:hover {
  border-color: rgba(127, 209, 255, 0.46);
  background: rgba(22, 36, 57, 0.65);
}
.research-card h3 {
  margin: 0.4rem 0 0.65rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
}
.research-card h3 a { color: inherit; }
.research-card.is-featured {
  grid-column: 1 / -1;
  padding: 1.6rem;
  border-color: rgba(212, 165, 116, 0.5);
  border-left: 3px solid var(--brass);
  background: linear-gradient(135deg, rgba(59, 43, 34, 0.62), rgba(18, 28, 46, 0.7));
}
.research-card.is-featured h3 { max-width: 45rem; font-size: 1.65rem; }
.research-card.is-upcoming { border-style: dashed; }
.research-card p { margin: 0; color: var(--mute); }
.research-card .eyebrow { margin-bottom: 0.2rem; }
.research-card .research-links { margin-top: auto; padding-top: 1rem; }
.research-links a { margin-right: 1rem; }
.research-subtitle { font-weight: 400; color: var(--mute); }

/* A paper: author block under the title, figures with captions, a citation. */
.paper-meta {
  margin: 0.25rem 0 1.6rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--edge);
  border-left: 2px solid var(--brass);
  background: rgba(18, 28, 46, 0.55);
}
.paper-meta p { margin: 0 0 0.3rem; }
.paper-meta p:last-child { margin-bottom: 0; }
.paper-authors { font-weight: 600; }
.paper-affil, .paper-links { color: var(--mute); font-size: 0.95rem; }
.paper code { overflow-wrap: anywhere; }
/* The Contents list names headings that carry their own numbers ("Part 1", "1."); a second number from the list would read "9. Part 1". */
nav.doc-toc[aria-label="Contents"] ol { list-style: none; padding-left: 0; }
.plain-terms ol { list-style: decimal; padding-left: 1.3rem; margin: 0.4rem 0 0; }
.plain-terms li { margin: 0 0 0.45rem; line-height: 1.5; }
.doc-figure { margin: 1.5rem 0 1.8rem; }
.doc-figure img { width: 100%; height: auto; border: 1px solid var(--edge); border-radius: 4px; background: var(--hull); }
.doc-figure figcaption, .doc-caption { margin: 0.6rem 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--mute); }
.doc-caption { margin: -0.5rem 0 1.5rem; }
ol.doc-list { padding-left: 1.4rem; }
.paper-cite {
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--mute);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Papers: results tables are wide, so headers may wrap and the type is a touch smaller. */
.paper .scenario-table { font-size: 0.84rem; }
.paper .scenario-table th { white-space: normal; line-height: 1.3; }

/* Empirical releases are visually distinct without burying the rest of the
   catalogue in a paper-length wall of text. */
.research-section.is-papers h2 { color: var(--brass); }

@media (max-width: 720px) {
  .research-tracks,
  .research-grid { grid-template-columns: 1fr; }
  .research-section-head { display: block; }
  .research-section-head p { margin-top: 0.35rem; text-align: left; }
  .research-card.is-featured { grid-column: auto; }
}

/* A card says what the agent declared; an absent homepage is declared absent. */
.dir-nohome {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}