design-system.css

/* AgenTrust editorial design system
 * Inspired by the clarity and restraint of leading AI research labs,
 * expressed with AgenTrust's own ink, parchment, navy, and signal-red palette.
 */

:root {
  --at-paper: #f3f0e8;
  --at-paper-2: #e9e4d8;
  --at-ink: #171714;
  --at-muted: #66645d;
  --at-line: rgba(23, 23, 20, 0.18);
  --at-navy: #15294b;
  --at-red: #b91c1c;
  --at-white: #fffefa;
  --at-radius: 18px;
  --at-shadow: 0 18px 45px rgba(23, 23, 20, 0.08);
  --at-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --at-serif: Iowan Old Style, Charter, "Bitstream Charter", "Sitka Text", Georgia, serif;
  --at-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  /* Card accents on the hub. No editorial equivalent, so they are named here
     rather than left as a second palette inside one page. */
  --at-purple: #6d28d9;
  --at-orange: #ea580c;
}

/* Shared MkDocs surfaces */
/* Mermaid inherits code foregrounds by default. Our code blocks are dark in
   both themes, so give diagrams their own theme-aware ink and surfaces. */
.md-typeset {
  --md-mermaid-font-family: var(--at-sans);
  --md-mermaid-label-fg-color: var(--at-ink);
  --md-mermaid-edge-color: var(--at-muted);
  --md-mermaid-label-bg-color: var(--at-paper);
  --md-mermaid-node-bg-color: var(--at-paper-2);
  --md-mermaid-node-fg-color: var(--at-muted);
}

.md-typeset .at-diagram {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.md-typeset .at-diagram .mermaid {
  min-width: 48rem;
}

.md-typeset .at-diagram:focus-visible {
  outline: 2px solid var(--md-typeset-a-color);
  outline-offset: 2px;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--at-paper);
  --md-primary-bg-color: var(--at-ink);
  --md-accent-fg-color: var(--at-red);
  --md-typeset-a-color: #1b5ea0;
  --md-default-bg-color: var(--at-paper);
  --md-default-fg-color: var(--at-ink);
  --md-default-fg-color--light: var(--at-muted);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #171714;
  --md-primary-bg-color: #f3f0e8;
  --md-accent-fg-color: #ef6672;
  --md-typeset-a-color: #9fc3ee;
  --md-default-bg-color: #171714;
  --md-default-fg-color: #f3f0e8;
  --md-default-fg-color--light: #b7b2a7;
  --md-code-bg-color: #22221e;
  --at-paper: #171714;
  --at-paper-2: #22221e;
  --at-ink: #f3f0e8;
  --at-muted: #b7b2a7;
  --at-line: rgba(243, 240, 232, 0.18);
  --at-white: #22221e;
  --at-shadow: none;
}

body,
.md-typeset,
.md-header,
.md-tabs,
.md-nav,
.md-footer {
  font-family: var(--at-sans);
}

.md-header {
  background: var(--at-paper) !important;
  color: var(--at-ink) !important;
  border-bottom: 1px solid var(--at-line);
  box-shadow: none;
}

.md-header__button,
.md-header__title,
.md-search__icon,
.md-source {
  color: var(--at-ink) !important;
}

.md-tabs {
  background: var(--at-paper);
  color: var(--at-ink);
  border-bottom: 1px solid var(--at-line);
}

.md-tabs__link {
  color: var(--at-muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--at-ink) !important;
}

.md-main { background: var(--at-paper); }
.md-main__inner { margin-top: 0; }
.md-content__inner { padding-top: clamp(2.4rem, 6vw, 5.5rem); }

.md-typeset {
  color: var(--at-ink);
  font-size: 0.82rem;
  line-height: 1.72;
}

.md-typeset h1 {
  max-width: 18ch;
  margin: 0 0 1.5rem;
  color: var(--at-ink);
  font-family: var(--at-sans);
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.md-typeset h2 {
  margin-top: 3.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--at-line);
  border-bottom: 0 !important;
  color: var(--at-ink);
  font-family: var(--at-serif);
  font-size: clamp(1.65rem, 3vw, 2.55rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.md-typeset h3 {
  color: var(--at-ink);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.md-typeset > p:first-of-type {
  max-width: 58ch;
  color: var(--at-muted);
  font-family: var(--at-serif);
  font-size: 1.15rem;
  line-height: 1.48;
}

.md-typeset a { text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.md-typeset a:hover { color: var(--at-red); }

.md-typeset .md-button {
  color: var(--at-ink);
  border: 1px solid var(--at-ink);
  border-radius: 999px;
  padding: 0.65rem 1.05rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.md-typeset .md-button--primary {
  background: var(--at-ink);
  color: var(--at-paper);
}



.md-typeset code,
.md-typeset pre,
.highlight { font-family: var(--at-mono); }

.md-typeset code:not(pre code) {
  border: 1px solid var(--at-line);
  border-radius: 5px;
  background: var(--at-white);
  color: var(--at-ink);
}

.md-typeset table:not([class]) {
  border: 1px solid var(--at-line);
  border-radius: 14px;
  background: var(--at-white);
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  background: var(--at-paper-2);
  color: var(--at-ink);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--at-line) !important;
  border-left: 4px solid var(--at-navy) !important;
  border-radius: 0 14px 14px 0;
  background: var(--at-white);
  box-shadow: none;
}

.md-nav__title {
  color: var(--at-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.md-nav__link { color: var(--at-muted); }
.md-nav__link:hover,
.md-nav__link--active { color: var(--at-ink) !important; font-weight: 650; }
.md-sidebar { padding-top: 1.8rem; }

.md-footer,
.md-footer-meta {
  background: var(--at-ink);
  color: var(--at-paper);
}


/* ============================================================
   MkDocs: the complete token set
   ------------------------------------------------------------
   Every docs site loads this file, so none of them needs a
   stylesheet of its own. The four projects each shipped a local
   extra.css declaring the Material default violet (#7c3aed) and
   a dark gradient header, which is exactly the drift brand/BRAND.md
   forbids. Completing the token set here is what lets those files
   be deleted rather than corrected four times.
   ============================================================ */

:root {
  --at-blue: #1b5ea0;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color--light: var(--at-white);
  --md-primary-fg-color--dark: var(--at-paper-2);
  --md-accent-fg-color--transparent: rgba(185, 28, 28, 0.08);
  --md-default-bg-color--light: var(--at-paper-2);
  --md-default-bg-color--lighter: var(--at-white);
  --md-code-fg-color: var(--at-ink);
  --md-footer-bg-color: var(--at-ink);
  --md-footer-bg-color--dark: var(--at-ink);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color--light: #22221e;
  --md-primary-fg-color--dark: #0f0f0d;
  --md-accent-fg-color--transparent: rgba(239, 102, 114, 0.12);
  --md-default-bg-color--light: #22221e;
  --md-default-bg-color--lighter: #22221e;
  --md-code-fg-color: var(--at-paper);
  --md-footer-bg-color: #0f0f0d;
  --md-footer-bg-color--dark: #0f0f0d;
}

/* Code blocks read the same on a docs page and on a site page.
   Inline code stays a light chip; only the block surface goes to ink. */
[data-md-color-scheme="default"] {
  --md-code-bg-color: var(--at-code-bg);
  --md-code-fg-color: var(--at-code-fg);
  --md-code-hl-color: rgba(226, 201, 158, 0.16);
  --md-code-hl-comment-color: var(--at-code-dim);
  --md-code-hl-generic-color: var(--at-code-dim);
  --md-code-hl-operator-color: var(--at-code-dim);
  --md-code-hl-punctuation-color: var(--at-code-dim);
  --md-code-hl-keyword-color: var(--at-code-accent);
  --md-code-hl-string-color: var(--at-code-string);
  --md-code-hl-number-color: var(--at-code-string);
  --md-code-hl-special-color: var(--at-code-alert);
  --md-code-hl-function-color: #9fc3ee;
  --md-code-hl-constant-color: #9fc3ee;
  --md-code-hl-name-color: var(--at-code-fg);
  --md-code-hl-variable-color: var(--at-code-fg);
}

.md-typeset pre > code,
.md-typeset .highlight pre,
.md-typeset .highlighttable .linenodiv pre {
  border: 0;
  border-radius: 14px;
  background: var(--at-code-bg);
  color: var(--at-code-fg);
  box-shadow: none;
}
.md-typeset .highlighttable { border: 0; border-radius: 14px; background: var(--at-code-bg); }
.md-typeset .highlighttable .linenos { background: transparent; color: var(--at-code-dim); }
.md-typeset .highlight [data-linenos]::before { background: transparent; color: var(--at-code-dim); }

/* Controls sitting on the ink surface need to be legible against it.
   Material renames this button across versions, so cover both. */
.md-typeset .md-clipboard,
.md-typeset .md-code__button { color: var(--at-code-dim); opacity: 1; }
.md-typeset .md-clipboard:hover,
.md-typeset .md-clipboard:focus,
.md-typeset .md-code__button:hover,
.md-typeset .md-code__button:focus { color: var(--at-code-accent); }
.md-typeset .md-code__button--active { color: var(--at-code-accent); }
.md-typeset .highlight span.filename {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--at-code-dim);
  font-family: var(--at-mono);
  font-size: 0.72rem;
  font-weight: 400;
}

/* Code inside a tabbed block keeps the same surface. */
.md-typeset .tabbed-block > .highlight:only-child pre { border-radius: 14px; }

/* Table body cells. The shared rules above style the table and its header;
   without these the cells keep Material's default rhythm. */
.md-typeset table:not([class]) td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--at-line);
  vertical-align: top;
}
.md-typeset table:not([class]) tr:last-child td { border-bottom: 0; }

/* Admonitions keep one shape and say what kind they are through the rule
   colour, using the documented semantic palette rather than Material's. */
.md-typeset .admonition.note,
.md-typeset details.note { border-left-color: var(--at-navy) !important; }
.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.abstract,
.md-typeset details.abstract { border-left-color: var(--at-blue) !important; }
.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition.success,
.md-typeset details.success { border-left-color: var(--at-pass) !important; }
.md-typeset .admonition.warning,
.md-typeset details.warning,
.md-typeset .admonition.caution,
.md-typeset details.caution { border-left-color: var(--at-warn) !important; }
.md-typeset .admonition.danger,
.md-typeset details.danger,
.md-typeset .admonition.failure,
.md-typeset details.failure,
.md-typeset .admonition.bug,
.md-typeset details.bug { border-left-color: var(--at-red) !important; }

.md-typeset .admonition-title,
.md-typeset summary {
  background: transparent !important;
  color: var(--at-ink);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.md-typeset .admonition-title::before,
.md-typeset summary::before { background-color: currentcolor; }

/* Material's card grid, matched to the editorial card. */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card {
  padding: 1.35rem;
  border: 1px solid var(--at-line);
  border-radius: var(--at-radius);
  background: var(--at-white);
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.md-typeset .grid.cards > :is(ul, ol) > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--at-line);
  box-shadow: var(--at-shadow);
  transform: translateY(-3px);
}
.md-typeset .grid.cards > :is(ul, ol) > li > hr {
  margin: 0.7rem 0;
  border-color: var(--at-line);
}

/* Footer: the ink band already set above, plus legible links inside it. */
.md-footer a,
.md-footer-meta a { color: var(--at-paper); }
.md-footer a:hover,
.md-footer-meta a:hover { color: #fff; }
.md-footer__title { font-weight: 650; }
.md-copyright { color: rgba(255, 255, 255, 0.55); }

/* Search and the version chip inherit paper rather than the old violet. */
.md-search__form { background: var(--at-white); }
.md-search__form:hover { background: var(--at-paper-2); }
[data-md-color-scheme="slate"] .md-search__form { background: var(--at-paper-2); }
.md-search__input::placeholder { color: var(--at-muted); }

/* ============================================================
   Ecosystem hub layout
   ------------------------------------------------------------
   The homepage layout used to live in a <style> block inside
   index.html, on a second set of tokens, which the rules in the
   next section then repainted. It is here now, on the shared
   tokens, so the whole estate is one stylesheet and one palette.
   The rules below it still win on source order where they
   deliberately restate a value.
   ============================================================ */

html:has(body.agentrust-hub) { scroll-behavior: smooth; }

.agentrust-hub, .agentrust-hub *,
.agentrust-hub *::before,
.agentrust-hub *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.agentrust-hub {
  min-height: 100vh;
  line-height: 1.6;
}
/* ── Hero ── */
.agentrust-hub .fellowship {
  padding: 0.85rem 2rem;
  font-size: 0.9rem;
}
.agentrust-hub .fellowship-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
}
.agentrust-hub .fellowship-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}
.agentrust-hub .fellowship-inner a.fellowship-link {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .agentrust-hub .fellowship {
    padding: 0.75rem 1.25rem; font-size: 0.85rem;
  }
}
.agentrust-hub .hero {
  padding: 4rem 2rem 3.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.agentrust-hub .hero-promo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
  margin: 0 0 1.375rem;
  padding: 0.75rem 1.125rem;
}
.agentrust-hub .hero-promo-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.3125rem 0.5625rem;
  border-radius: 5px;
  white-space: nowrap;
}
.agentrust-hub .hero-promo-text {
  flex: 1;
  min-width: 220px;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.agentrust-hub .hero-promo-text b {
  font-weight: 500;
}
.agentrust-hub .hero-promo-link {
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.6875rem 1rem;
  text-decoration: none;
}
.agentrust-hub .hero-promo-link:hover {
  background: #A01818;
}
.agentrust-hub .hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.agentrust-hub .hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.agentrust-hub .hero h1 {
  margin-bottom: 1.25rem;
}
.agentrust-hub .hero p {
  font-size: 1.0625rem;
  max-width: 580px;
  line-height: 1.65;
  margin-bottom: 2rem;
}
.agentrust-hub .hero-actions {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
}
.agentrust-hub .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
  border: none;
}
.agentrust-hub .btn-primary:hover {
  background: #991B1B;
}
.agentrust-hub .btn-ghost {
  border: 1px solid rgba(255,255,255,0.18);
}
.agentrust-hub .btn-ghost:hover {
  background: rgba(255,255,255,0.14);
}
/* .btn-ghost is built for the navy hero; on a light section it needs
       ink that is actually readable. */
.agentrust-hub #fellowship .btn-ghost {
  background: var(--at-white);
  color: var(--at-navy);
  border: 1px solid var(--at-line);
}
.agentrust-hub #fellowship .btn-ghost:hover {
  background: #E8EDF3;
}
/* ── Section layout ── */
.agentrust-hub .section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 2rem;
}
.agentrust-hub .section-header {
  margin-bottom: 1.75rem;
}
.agentrust-hub .section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.agentrust-hub .trust-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--at-line);
}
.agentrust-hub .trust-step {
  position: relative; padding: 1.5rem; background: white;
}
.agentrust-hub .trust-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -0.7rem;
  top: 50%;
  z-index: 1;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--at-navy);
  color: white;
  text-align: center;
  line-height: 1.3rem;
}
.agentrust-hub .trust-step strong {
  display: block; margin: 0.3rem 0 0.5rem;
}
.agentrust-hub .trust-step p {
  margin: 0; color: var(--at-muted); font-size: 0.9rem; line-height: 1.5;
}
.agentrust-hub .trust-number {
  color: var(--at-red); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
}
.agentrust-hub .trust-home {
  display: block;
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--at-line);
  color: var(--at-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}
.agentrust-hub .trust-base {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--at-line);
  border-radius: 10px;
}
.agentrust-hub .trust-observe {
  border-left: 4px solid var(--at-orange);
}
.agentrust-hub .trust-observe .trust-base-label {
  color: var(--at-orange);
}
.agentrust-hub .trust-base-label {
  color: var(--at-blue); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
}
.agentrust-hub .trust-base-text {
  color: var(--at-ink); font-size: 0.9rem;
}
.agentrust-hub .trust-note {
  margin: 0.9rem 0 0; color: var(--at-muted); font-size: 0.85rem;
}
/* ── Product grid ── */
.agentrust-hub .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.agentrust-hub .product-card {
  border: 1px solid var(--at-line);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s, transform 0.15s;
}
.agentrust-hub .card-accent {
  height: 4px;
}
.agentrust-hub .card-body {
  padding: 1.375rem 1.375rem 1rem;
  flex: 1;
}
.agentrust-hub .card-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.agentrust-hub .card-name {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.agentrust-hub .card-desc {
  font-size: 0.875rem;
  line-height: 1.55;
}
.agentrust-hub .card-footer {
  padding: 0.875rem 1.375rem;
  border-top: 1px solid var(--at-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.agentrust-hub .card-url {
  font-size: 0.8rem;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}
.agentrust-hub .card-arrow {
  width: 20px;
  height: 20px;
  color: var(--at-muted);
  flex-shrink: 0;
}
.agentrust-hub .card-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.agentrust-hub .badge-live {
  background: #DCFCE7; color: var(--at-pass);
}
.agentrust-hub .badge-oss {
  background: #EFF6FF; color: var(--at-blue);
}
.agentrust-hub .badge-ext {
  background: #F3F4F6; color: var(--at-muted);
}
.agentrust-hub .badge-preview {
  background: #FEF3C7; color: #92400E;
}
/* ── Divider ── */
.agentrust-hub .divider {
  border: none;
  border-top: 1px solid var(--at-line);
}
/* ── Specs table ── */
.agentrust-hub .spec-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.agentrust-hub .spec-card {
  border: 1px solid var(--at-line);
  padding: 1.125rem 1.25rem;
}
.agentrust-hub .spec-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--at-muted);
  margin-bottom: 0.3rem;
}
.agentrust-hub .spec-value {
  font-size: 0.9375rem;
  font-weight: 600;
}
/* ── Footer ── */
.agentrust-hub footer {
  color: rgba(255,255,255,0.55);
  padding: 2rem;
  margin-top: 3rem;
}
.agentrust-hub .footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.agentrust-hub .footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.agentrust-hub .footer-links a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.12s;
}
.agentrust-hub .footer-links a:hover {
  color: #fff;
}
.agentrust-hub .footer-copy {
  font-size: 0.8rem;
}
/* ── Prose + FAQ ── */
.agentrust-hub .lead-copy {
  max-width: 760px;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.agentrust-hub .lead-copy + .lead-copy {
  margin-top: 1rem;
}
.agentrust-hub .ecosystem-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.agentrust-hub .ecosystem-card {
  background: var(--at-white); border: 1px solid var(--at-line); border-radius: 8px; padding: 1.4rem;
}
.agentrust-hub .ecosystem-card h3 {
  color: var(--at-navy); font-size: 1rem; margin-bottom: 0.5rem;
}
.agentrust-hub .ecosystem-card p {
  color: var(--at-muted); font-size: 0.9rem; line-height: 1.6;
}
.agentrust-hub .pathway {
  margin-top: 1rem; padding: 1.25rem 1.4rem; border-left: 4px solid var(--at-pass); background: #fff; color: var(--at-ink);
}
.agentrust-hub .qa {
  max-width: 760px;
}
.agentrust-hub .qa-item {
  padding: 1.125rem 0; border-bottom: 1px solid var(--at-line);
}
.agentrust-hub .qa-item:first-child {
  border-top: 1px solid var(--at-line);
}
.agentrust-hub .qa-q {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.45rem;
}
.agentrust-hub .qa-a {
  font-size: 0.9375rem;
  line-height: 1.65;
}
@media (max-width: 640px) {
  .agentrust-hub .spec-row {
    grid-template-columns: 1fr 1fr;
  }
  .agentrust-hub .hero {
    padding: 2.5rem 1.25rem 2rem;
  }
  .agentrust-hub .section {
    padding: 2rem 1.25rem;
  }
  .agentrust-hub .trust-flow {
    grid-template-columns: 1fr;
  }
  .agentrust-hub .trust-step:not(:last-child)::after {
    content: "↓"; right: 1rem; top: auto; bottom: -0.7rem;
  }
  .agentrust-hub .ecosystem-grid {
    grid-template-columns: 1fr;
  }
}

/* Main ecosystem hub
 * The hub still ships the older inline palette. Rather than rewrite 500 lines
 * of page CSS, remap those variables onto the editorial tokens once, here.
 * Every remaining var(--navy)/var(--blue)/... on the page resolves through it,
 * so the hub has one palette, not two. The semantic accents keep the exact
 * hexes brand/BRAND.md documents: the product cards use them to tell
 * categories apart, and they are status colours, not surface colours.
 */
.agentrust-hub {
  --bg: var(--at-paper);
  --surface: var(--at-white);
  --border: var(--at-line);
  --body: var(--at-ink);
  --muted: var(--at-muted);
  --navy: var(--at-navy);
  --red: var(--at-red);
  --blue: var(--at-blue);
  --green: #1b7a4a;
  --amber: #c17817;
  --purple: #6d28d9;
  --orange: #ea580c;
}

/* Status badges: one parchment chip, the accent carried by the text alone */
.agentrust-hub .badge-live,
.agentrust-hub .badge-oss,
.agentrust-hub .badge-ext,
.agentrust-hub .badge-preview {
  border: 1px solid var(--at-line);
  border-radius: 999px;
  background: var(--at-paper-2);
}
.agentrust-hub .badge-live { color: var(--green); }
.agentrust-hub .badge-oss { color: var(--blue); }
.agentrust-hub .badge-ext { color: var(--at-muted); }
.agentrust-hub .badge-preview { color: var(--amber); }

.agentrust-hub .fellowship-tag {
  background: var(--at-ink);
  color: var(--at-paper);
  border-radius: 999px;
}


.agentrust-hub {
  background: var(--at-paper);
  color: var(--at-ink);
  font-family: var(--at-sans);
}

.agentrust-hub .logo-dot { color: var(--at-red); }

.agentrust-hub .fellowship,
.agentrust-hub .hero {
  background: var(--at-paper);
  color: var(--at-ink);
}

.agentrust-hub .fellowship { border-bottom: 1px solid var(--at-line); }
.agentrust-hub .fellowship-text,
.agentrust-hub .fellowship-inner a.fellowship-link { color: var(--at-ink); }

.agentrust-hub .hero { padding-top: clamp(4rem, 9vw, 8rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.agentrust-hub .hero-eyebrow { color: var(--at-red); }
.agentrust-hub .hero h1 {
  max-width: 900px;
  color: var(--at-ink);
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 650;
  letter-spacing: -0.065em;
  line-height: 0.94;
}

.agentrust-hub .hero > .hero-inner > p:not(.hero-eyebrow) {
  max-width: 700px;
  color: var(--at-muted);
  font-family: var(--at-serif);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.45;
}

.agentrust-hub .hero-promo {
  border: 1px solid var(--at-line);
  border-radius: var(--at-radius);
  background: var(--at-white);
  box-shadow: var(--at-shadow);
}

.agentrust-hub .hero-promo-text { color: var(--at-ink); }
.agentrust-hub .hero-promo-tag { color: var(--at-red); background: rgba(185, 28, 28, 0.08); }
.agentrust-hub .hero-promo-link { border-radius: 999px; background: var(--at-ink); color: var(--at-paper); }

.agentrust-hub .btn { border-radius: 999px; padding: 0.75rem 1.2rem; }
.agentrust-hub .btn-primary { background: var(--at-ink); color: var(--at-paper); }
.agentrust-hub .btn-ghost { background: transparent; color: var(--at-ink); border-color: var(--at-line); }

.agentrust-hub .section { padding-top: clamp(4rem, 7vw, 7rem); padding-bottom: clamp(4rem, 7vw, 7rem); }
.agentrust-hub .section-label { color: var(--at-red); }
.agentrust-hub .section-title,
.agentrust-hub .section h2 {
  color: var(--at-ink);
  font-family: var(--at-serif);
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.agentrust-hub .divider { border-color: var(--at-line); }
.agentrust-hub .trust-flow { border-color: var(--at-line); border-radius: var(--at-radius); background: var(--at-line); }
.agentrust-hub .trust-step,
.agentrust-hub .trust-base,
.agentrust-hub .ecosystem-card,
.agentrust-hub .product-card,
.agentrust-hub .spec-card,
.agentrust-hub .pathway { background: var(--at-white); border-color: var(--at-line); }
.agentrust-hub .ecosystem-card,
.agentrust-hub .product-card,
.agentrust-hub .spec-card { border-radius: var(--at-radius); }
.agentrust-hub .product-card:hover { box-shadow: var(--at-shadow); transform: translateY(-3px); }
.agentrust-hub .card-name,
.agentrust-hub .spec-value,
.agentrust-hub .ecosystem-card h3,
.agentrust-hub .qa-q { color: var(--at-ink); }
.agentrust-hub .card-desc,
.agentrust-hub .card-url,
.agentrust-hub .lead-copy,
.agentrust-hub .qa-a,
.agentrust-hub .trust-step p,
.agentrust-hub .trust-note { color: var(--at-muted); }
.agentrust-hub footer { background: var(--at-ink); border-top: 0; }

/* Section rail
 *
 * The homepage runs to a dozen sections, so it carries a fixed jump list in
 * the left gutter. It shows ticks until pointed at or tabbed into, then
 * expands to labels, which keeps it out of the way of a 1100px content
 * column. Below the width where the gutter can hold it, the header nav is
 * the only navigation and the rail is hidden.
 */
.agentrust-hub .railnav {
  position: fixed;
  top: 50%;
  left: 1rem;
  z-index: 90;
  padding: .5rem .45rem;
  border: 1px solid transparent;
  border-radius: 14px;
  /* Matches the page ground, so the rail is invisible over it. It only shows
   * as a pill over the dark footer, which is what keeps the ticks legible
   * there instead of dark-on-dark. */
  background: rgba(243, 240, 232, 0.92);
  transform: translateY(-50%);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.agentrust-hub .railnav:hover,
.agentrust-hub .railnav:focus-within {
  border-color: var(--at-line);
  background: rgba(243, 240, 232, 0.97);
  box-shadow: var(--at-shadow);
  backdrop-filter: blur(14px);
}
.agentrust-hub .railnav ul { display: grid; gap: .05rem; margin: 0; padding: 0; list-style: none; }
.agentrust-hub .railnav a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .3rem .35rem;
  border-radius: 8px;
  color: var(--at-muted);
  text-decoration: none;
}
.agentrust-hub .railnav-tick {
  width: 14px;
  height: 2px;
  flex: none;
  border-radius: 2px;
  background: var(--at-line);
  transition: width .18s ease, background .18s ease;
}
.agentrust-hub .railnav-label {
  max-width: 0;
  overflow: hidden;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .18s ease, opacity .18s ease;
}
.agentrust-hub .railnav:hover .railnav-label,
.agentrust-hub .railnav:focus-within .railnav-label { max-width: 11rem; opacity: 1; }
.agentrust-hub .railnav a:hover,
.agentrust-hub .railnav a:focus-visible { color: var(--at-ink); }
.agentrust-hub .railnav a:hover .railnav-tick { background: var(--at-muted); }
.agentrust-hub .railnav a[aria-current="true"] { color: var(--at-red); }
.agentrust-hub .railnav a[aria-current="true"] .railnav-tick { width: 26px; background: var(--at-red); }
/* Below this the 1100px column leaves no gutter wide enough for the rail
 * to sit clear of the text, so the header nav is the only navigation. */
@media (max-width: 1279px) {
  .agentrust-hub .railnav { display: none; }
}

/* Adoption, partnership, governance, and compliance evidence */
.agentrust-hub .adoption-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
.agentrust-hub .adoption-card,
.agentrust-hub .governance-card,
.agentrust-hub .playbook-card,
.agentrust-hub .partner-card {
  border: 1px solid var(--at-line);
  border-radius: var(--at-radius);
  background: var(--at-white);
}
.agentrust-hub .adoption-card { display: flex; min-height: 190px; flex-direction: column; padding: 1.25rem; }
.agentrust-hub .adopter-mark { min-height: 36px; color: var(--at-ink); font-size: 1.2rem; font-weight: 750; letter-spacing: -0.045em; }
.agentrust-hub .adopter-mark:has(img) { display: flex; align-items: center; }
.agentrust-hub .adopter-mark img { display: block; width: auto; max-width: 96px; height: 22px; object-fit: contain; object-position: left center; }
.agentrust-hub .uae-mark img { height: 26px; }
.agentrust-hub .microsoft-mark img,
.agentrust-hub .amd-mark img,
.agentrust-hub .intel-mark img { height: 22px; }
.agentrust-hub .atf-mark img,
.agentrust-hub .pronative-mark img { height: 26px; }
.agentrust-hub .servicenow-mark { color: #16825d; }
.agentrust-hub .uae-mark { max-width: 13ch; font-family: var(--at-serif); font-size: 1.1rem; font-weight: 600; line-height: 1.05; }
.agentrust-hub .microsoft-mark { color: #505050; }
.agentrust-hub .amd-mark { color: #111; letter-spacing: -.07em; }
.agentrust-hub .intel-mark { color: #0068b5; font-weight: 650; }
.agentrust-hub .atf-mark { max-width: 16ch; font-size: 1.05rem; line-height: 1.1; }
.agentrust-hub .adopter-stage,
.agentrust-hub .governance-role,
.agentrust-hub .partner-kicker {
  margin: .75rem 0 .45rem;
  color: var(--at-red);
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.agentrust-hub .adoption-card p,
.agentrust-hub .governance-card p,
.agentrust-hub .partner-card p { margin: 0; color: var(--at-muted); font-size: .9rem; line-height: 1.6; }
.agentrust-hub .evidence-link { display: inline-block; margin-top: auto; padding-top: .8rem; color: var(--at-ink); font-size: .72rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--at-line); text-underline-offset: .2em; }
.agentrust-hub .evidence-link:hover { color: var(--at-red); }
.agentrust-hub .partner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }
.agentrust-hub .partner-card { display: grid; grid-template-columns: minmax(130px, .65fr) 1.35fr; gap: 1.25rem; align-items: center; padding: 1.35rem; }
.agentrust-hub .partner-logo-wrap { display: flex; min-height: 110px; align-items: center; padding: 1rem; border-radius: 12px; background: var(--at-paper); }
.agentrust-hub .lf-card { margin-top: 2.5rem; }
.agentrust-hub .lf-card { grid-template-columns: minmax(180px, .55fr) 1.45fr; }
.agentrust-hub .lf-card .partner-logo-wrap { padding: 1.25rem; }
.agentrust-hub .partner-logo-wrap img { display: block; width: 100%; height: auto; }
.agentrust-hub .partner-kicker { margin-top: 0; }
.agentrust-hub .partner-card h3 { margin: 0 0 .55rem; color: var(--at-ink); font-family: var(--at-serif); font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 500; line-height: 1.08; }
.agentrust-hub .startup-card { grid-template-columns: 76px 1fr; padding: 1rem; }
.agentrust-hub .startup-card .partner-logo-wrap { min-height: 76px; padding: .65rem; }
.agentrust-hub .startup-card .partner-logo-wrap img { width: 48px; max-height: 48px; margin: auto; object-fit: contain; }
.agentrust-hub .startup-card h3 { font-family: var(--at-sans); font-size: 1.1rem; font-weight: 750; }
.agentrust-hub .adoption-contact { display: flex; gap: 2rem; align-items: center; justify-content: space-between; margin-top: 1rem; padding: 1.5rem; border: 1px solid var(--at-line); border-radius: var(--at-radius); background: var(--at-paper-2); }
.agentrust-hub .adoption-contact h3 { margin: 0 0 .4rem; color: var(--at-ink); font-family: var(--at-serif); font-size: clamp(1.35rem, 2.5vw, 1.9rem); font-weight: 500; }
.agentrust-hub .adoption-contact p { max-width: 720px; margin: 0; color: var(--at-muted); font-size: .9rem; line-height: 1.55; }
.agentrust-hub .adoption-contact .btn { flex: 0 0 auto; white-space: nowrap; }
.agentrust-hub .governance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.agentrust-hub .governance-card { min-height: 240px; padding: 1.5rem; }
.agentrust-hub .funding-status { margin-top: 1rem; min-height: 0; }
.agentrust-hub .governance-card h3 { margin: 0 0 .6rem; color: var(--at-ink); font-size: 1.1rem; }
.agentrust-hub .open-seat { border-style: dashed; background: transparent; }
.agentrust-hub .governance-actions { margin-top: 1.5rem; border-top: 1px solid var(--at-line); }
.agentrust-hub .path-link { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--at-line); color: var(--at-ink); font-size: .86rem; font-weight: 650; text-decoration: none; }
.agentrust-hub .path-link:hover { color: var(--at-red); }
.agentrust-hub .playbook-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 2.5rem; overflow: hidden; border: 1px solid var(--at-line); border-radius: var(--at-radius); background: var(--at-line); }
.agentrust-hub .playbook-card { display: flex; min-height: 180px; flex-direction: column; padding: 1.25rem; border: 0; border-radius: 0; color: var(--at-ink); text-decoration: none; }
.agentrust-hub .playbook-card span { color: var(--at-red); font-size: .64rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.agentrust-hub .playbook-card strong { margin: .7rem 0 auto; font-family: var(--at-serif); font-size: 1.15rem; font-weight: 600; line-height: 1.1; }
.agentrust-hub .playbook-card small { color: var(--at-muted); font-size: .7rem; }
.agentrust-hub .playbook-card:hover { background: var(--at-paper-2); }

@media (max-width: 700px) {
  .agentrust-hub .hero h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .agentrust-hub .hero-promo { border-radius: 14px; }
  .md-typeset h1 { font-size: clamp(2.35rem, 13vw, 3.6rem); }
  .agentrust-hub .adoption-grid,
  .agentrust-hub .governance-grid,
  .agentrust-hub .partner-grid,
  .agentrust-hub .partner-card { grid-template-columns: 1fr; }
  .agentrust-hub .adoption-contact { align-items: flex-start; flex-direction: column; }
  .agentrust-hub .playbook-grid { grid-template-columns: 1fr; }
  .agentrust-hub .playbook-card { min-height: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* ============================================================
   Shared editorial page layer
   ------------------------------------------------------------
   Every standalone page under agentrust-io.com (quickstart,
   demos, telemetry, extension pages) opts in with
   <body class="at-page"> and then writes no CSS of its own.
   The hub keeps .agentrust-hub; MkDocs keeps the .md-* rules
   above. Adding a page means adding markup, not a stylesheet.
   ============================================================ */

:root {
  --at-pass: #1b7a4a;
  --at-warn: #c17817;
  --at-code-bg: #171714;
  --at-code-fg: #e4e0d6;
  --at-code-dim: #9d998e;
  --at-code-accent: #86c9a4;
  --at-code-string: #e2c99e;
  --at-code-alert: #f0908a;
  --at-wrap: 1120px;
  --at-gutter: clamp(1.25rem, 4vw, 3rem);
}

[data-md-color-scheme="slate"] {
  --at-pass: #6cc39a;
  --at-warn: #e0b063;
  --at-code-bg: #0f0f0d;
}

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

.at-page {
  margin: 0;
  background: var(--at-paper);
  color: var(--at-ink);
  font-family: var(--at-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.at-page h1,
.at-page h2,
.at-page h3,
.at-page h4,
.at-page p,
.at-page ul,
.at-page ol,
.at-page pre,
.at-page figure { margin: 0; }

.at-page a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.at-page a:hover { color: var(--at-red); }
.at-page [id] { scroll-margin-top: 5.5rem; }

/* Shell */
.at-page .wrap,
.at-page > main { max-width: var(--at-wrap); margin: 0 auto; }
.at-page > main { padding: 0 var(--at-gutter); }

.at-page .wordmark {
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.at-page .wordmark span { color: var(--at-muted); font-weight: 500; }


/* Hero */
.at-page .hero {
  padding: clamp(4.5rem, 10vw, 8.5rem) var(--at-gutter) clamp(3.75rem, 7vw, 6.5rem);
  border-bottom: 1px solid var(--at-line);
}
.at-page .hero > .wrap > * + * { margin-top: 1.6rem; }

.at-page .eyebrow,
.at-page .label {
  display: block;
  color: var(--at-red);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.at-page .hero h1 {
  max-width: 16ch;
  font-size: clamp(2.9rem, 7vw, 6rem);
  font-weight: 650;
  letter-spacing: -0.065em;
  line-height: 0.95;
}
.at-page .hero h1 em { color: var(--at-red); font-style: normal; }
/* Beside a second column the headline gets less room, so it steps down a size */
.at-page .hero .split h1 { max-width: 15ch; font-size: clamp(2.5rem, 4.4vw, 4rem); }
.at-page .hero .split .sub { font-size: clamp(1.05rem, 1.5vw, 1.3rem); }

.at-page .hero .sub {
  max-width: 700px;
  color: var(--at-muted);
  font-family: var(--at-serif);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.45;
}

.at-page .status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--at-line);
  border-radius: 999px;
  background: var(--at-white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Sections */
.at-page section {
  padding: clamp(4rem, 7.5vw, 7rem) 0;
  border-bottom: 1px solid var(--at-line);
}
.at-page section:last-of-type { border-bottom: 0; }

.at-page h2 {
  max-width: 17ch;
  margin: 0.5rem 0 1.3rem;
  font-family: var(--at-serif);
  font-size: clamp(2.1rem, 4.4vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.04;
}
.at-page h3 {
  font-size: 1.1rem;
  font-weight: 650;
  letter-spacing: -0.025em;
}
.at-page h4 {
  color: var(--at-muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.at-page section > p,
.at-page .lead {
  max-width: 760px;
  color: var(--at-muted);
  font-size: 1rem;
}
.at-page .lead-serif {
  max-width: 720px;
  color: var(--at-muted);
  font-family: var(--at-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.5;
}
.at-page section > p + p,
.at-page .prose > * + * { margin-top: 1rem; }
.at-page section > .code + p,
.at-page section > pre + p,
.at-page section > .callout + p { margin-top: 1.25rem; }
.at-page strong { color: var(--at-ink); font-weight: 650; }

.at-page ul, .at-page ol { padding-left: 1.15rem; color: var(--at-muted); }
.at-page li { margin-bottom: 0.35rem; }
.at-page li::marker { color: var(--at-line); }

/* Cards and grids */
.at-page .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2.25rem; }
.at-page .grid-3 { grid-template-columns: repeat(3, 1fr); }

.at-page .card {
  padding: 1.5rem;
  border: 1px solid var(--at-line);
  border-radius: var(--at-radius);
  background: var(--at-white);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.at-page .grid > .card { min-height: 190px; }
.at-page .card:hover { transform: translateY(-3px); box-shadow: var(--at-shadow); }
.at-page .card.static:hover { transform: none; box-shadow: none; }
.at-page .card > p { margin-top: 0.35rem; color: var(--at-muted); font-size: 0.92rem; }
.at-page .card.ruled::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 1.5rem;
  background: var(--at-red);
}

.at-page .card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.7rem;
}
.at-page .card-head strong { font-size: 1.05rem; letter-spacing: -0.025em; }
.at-page .card ul { margin-top: 0.75rem; font-size: 0.92rem; }
.at-page .card pre { margin-top: 1rem; }

/* Vertical rhythm for a run of sibling blocks */
.at-page .stack > * + * { margin-top: 1rem; }
.at-page .stack { margin-top: 2.25rem; }

/* Hairline strip: equal cells separated by a single rule */
.at-page .flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 2.25rem;
  overflow: hidden;
  border: 1px solid var(--at-line);
  border-radius: var(--at-radius);
  background: var(--at-line);
}
.at-page .flow-5 { grid-template-columns: repeat(5, 1fr); }
.at-page .flow > * {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  padding: 1.35rem;
  background: var(--at-white);
  color: inherit;
  text-decoration: none;
}
.at-page .flow .n {
  color: var(--at-red);
  font-family: var(--at-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.at-page .flow strong { display: block; margin: 0.55rem 0 0.35rem; font-size: 0.96rem; }
.at-page .flow span { color: var(--at-muted); font-size: 0.84rem; line-height: 1.5; }
.at-page a.flow-cell:hover { background: var(--at-paper-2); }
.at-page .flow .marked { box-shadow: inset 3px 0 0 var(--at-red); }

/* Two-column split: copy beside a demonstration */
.at-page .split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.at-page .split.even { grid-template-columns: 1fr 1fr; align-items: start; }
.at-page .split > * > * + * { margin-top: 1rem; }

/* Badges, callouts, buttons */
.at-page .tag {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--at-ink);
  color: var(--at-paper);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.at-page .tag.quiet { border: 1px solid var(--at-line); background: transparent; color: var(--at-muted); }
.at-page .meta { color: var(--at-muted); font-size: 0.78rem; }

.at-page .callout {
  max-width: 820px;
  margin: 2rem 0;
  padding: 1.2rem 1.35rem;
  border: 1px solid var(--at-line);
  border-left: 4px solid var(--at-navy);
  border-radius: 0 14px 14px 0;
  background: var(--at-white);
  font-size: 0.94rem;
}
.at-page .callout.caution { border-left-color: var(--at-warn); }
.at-page .callout.affirm { border-left-color: var(--at-pass); }
.at-page .callout > * + * { margin-top: 0.8rem; }

.at-page .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.at-page .button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--at-ink);
  border-radius: 999px;
  background: var(--at-ink);
  color: var(--at-paper);
  font-size: 0.78rem;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}
.at-page .button:hover { border-color: var(--at-red); background: var(--at-red); color: #fff; }
.at-page .button.secondary { border-color: var(--at-line); background: transparent; color: var(--at-ink); }
.at-page .button.secondary:hover { border-color: var(--at-ink); background: var(--at-ink); color: var(--at-paper); }
.at-page .button.block { width: 100%; justify-content: center; }

/* Code */
.at-page code { font-family: var(--at-mono); font-size: 0.88em; }
.at-page p code,
.at-page li code,
.at-page td code,
.at-page .hint code {
  padding: 0.1em 0.35em;
  border: 1px solid var(--at-line);
  border-radius: 5px;
  background: var(--at-white);
  color: var(--at-ink);
}
.at-page pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 1.15rem 1.25rem;
  border-radius: 14px;
  background: var(--at-code-bg);
  color: var(--at-code-fg);
  font-family: var(--at-mono);
  font-size: 0.82rem;
  line-height: 1.65;
}
.at-page pre code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; }
.at-page section > pre,
.at-page .prose > pre { max-width: 820px; margin-top: 1.25rem; }

/* Code block with a filename bar and a copy button */
.at-page .code {
  margin: 0.75rem 0;
  overflow: hidden;
  border: 1px solid var(--at-line);
  border-radius: 14px;
  background: var(--at-code-bg);
}
.at-page .code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}
.at-page .code-label { color: var(--at-code-dim); font-family: var(--at-mono); font-size: 0.72rem; }
.at-page .code-label .file { color: var(--at-code-string); }
.at-page .code pre { border-radius: 0; }
.at-page .copy {
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: transparent;
  color: var(--at-code-dim);
  font-family: var(--at-sans);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.at-page .copy:hover,
.at-page .copy.copied { border-color: var(--at-code-accent); color: var(--at-code-accent); }
.at-page .copy.failed { border-color: var(--at-code-alert); color: var(--at-code-alert); }

/* Syntax accents inside dark code */
.at-page pre .c { color: var(--at-code-dim); }
.at-page pre .s { color: var(--at-code-string); }
.at-page pre .k { color: var(--at-code-accent); }
.at-page pre .alert { color: var(--at-code-alert); font-weight: 600; }

/* Terminal */
.at-page .term {
  overflow: hidden;
  border: 1px solid var(--at-line);
  border-radius: 14px;
  background: var(--at-code-bg);
}
.at-page .term-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}
.at-page .term-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.at-page .term-title { margin-left: 0.5rem; color: var(--at-code-dim); font-family: var(--at-mono); font-size: 0.72rem; }
.at-page .term-body {
  padding: 1.15rem;
  color: var(--at-code-fg);
  font-family: var(--at-mono);
  font-size: 0.8rem;
  line-height: 1.75;
}
.at-page .term-body .dim { color: var(--at-code-dim); }
.at-page .term-body .alert { color: var(--at-code-alert); font-weight: 600; }
.at-page .term-body .ok { color: var(--at-code-accent); font-weight: 600; }
.at-page .runbtn {
  margin-top: 1rem;
  padding: 0.55rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: transparent;
  color: var(--at-code-fg);
  font-family: var(--at-sans);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.at-page .runbtn:hover { border-color: var(--at-code-accent); color: var(--at-code-accent); }

/* Numbered stepper */
.at-page .steps { margin-top: 2rem; border-top: 1px solid var(--at-line); }
.at-page .step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 1.4rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--at-line);
}
.at-page .step-num {
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--at-ink);
  border-radius: 50%;
  font-family: var(--at-serif);
  font-size: 1.05rem;
  font-weight: 600;
}
.at-page .step-body { min-width: 0; }
.at-page .step-body > * + * { margin-top: 0.75rem; }
.at-page .hint { color: var(--at-muted); font-size: 0.92rem; line-height: 1.6; }
.at-page .hint b { color: var(--at-ink); font-weight: 650; }

/* Verification rows */
.at-page .checks {
  overflow: hidden;
  border: 1px solid var(--at-line);
  border-radius: 14px;
  background: var(--at-white);
}
.at-page .chk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.05rem;
  border-bottom: 1px solid var(--at-line);
  font-family: var(--at-mono);
  font-size: 0.78rem;
}
.at-page .chk:last-child { border-bottom: 0; }
.at-page .chk .note { color: var(--at-muted); font-weight: 400; }
.at-page .chk.result { background: var(--at-paper-2); font-family: var(--at-sans); font-weight: 750; letter-spacing: 0.04em; }

/* Result panel */
.at-page .verdict {
  margin-top: 1.25rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--at-line);
  border-radius: var(--at-radius);
  background: var(--at-white);
}
.at-page .verdict .flag {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  color: var(--at-red);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.at-page .verdict .check {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--at-ink);
  color: var(--at-paper);
  font-size: 0.7rem;
}
.at-page .verdict p { color: var(--at-muted); font-size: 0.95rem; }
.at-page .verdict p + p { margin-top: 0.7rem; }
.at-page .verdict.quiet { border-style: dashed; background: transparent; }
.at-page .verdict.quiet .flag { color: var(--at-muted); }

.at-page .note-rule {
  max-width: 820px;
  margin-top: 1.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--at-line);
  color: var(--at-muted);
  font-size: 0.95rem;
}
.at-page .pass { color: var(--at-pass); font-weight: 650; }
.at-page .warn { color: var(--at-warn); font-weight: 650; }

/* Tables */
.at-page table {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--at-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  background: var(--at-white);
  font-size: 0.9rem;
}
.at-page th, .at-page td { padding: 0.7rem 0.95rem; border-bottom: 1px solid var(--at-line); text-align: left; }
.at-page tr:last-child td { border-bottom: 0; }
.at-page th {
  background: var(--at-paper-2);
  color: var(--at-ink);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.at-page td { color: var(--at-muted); }

.at-page .uri {
  display: block;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--at-line);
  border-left: 4px solid var(--at-red);
  border-radius: 0 14px 14px 0;
  background: var(--at-white);
  color: var(--at-ink);
  font-family: var(--at-mono);
  font-size: 0.9rem;
  word-break: break-all;
}

.at-page .divider { margin: 0; border: 0; border-top: 1px solid var(--at-line); }

/* WCM release page */
.at-page .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 1rem;
}
.at-page .hero-actions .button.secondary {
  border-color: var(--at-line);
  background: transparent;
  color: var(--at-ink);
}
.at-page .hero-actions .button.secondary:hover { background: var(--at-ink); color: var(--at-paper); }
.at-page .proof-section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.at-page .proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--at-line);
  border-radius: var(--at-radius);
  background: var(--at-white);
}
.at-page .proof-grid a {
  display: flex;
  min-height: 132px;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem;
  border-right: 1px solid var(--at-line);
  color: var(--at-ink);
  text-decoration: none;
}
.at-page .proof-grid a:last-child { border-right: 0; }
.at-page .proof-grid a:hover { background: var(--at-paper-2); }
.at-page .proof-grid strong {
  font-family: var(--at-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}
.at-page .proof-grid span {
  margin-top: 0.55rem;
  color: var(--at-muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.at-page .proof-note { margin-top: 0.8rem; color: var(--at-muted); font-size: 0.72rem; }
.at-page .proof-note code { color: var(--at-ink); font-family: var(--at-mono); }
.at-page .wcm-terminal { margin-top: 2rem; }
.at-page .wcm-terminal .term-body { display: grid; gap: 0.7rem; }
.at-page .wcm-terminal .term-body > div {
  display: grid;
  grid-template-columns: 30px minmax(230px, 1fr) minmax(220px, auto);
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.at-page .wcm-terminal .term-body > div:last-child { padding-bottom: 0; border-bottom: 0; }
.at-page .wcm-use-cases .card { min-height: 250px; }
.at-page .card-num {
  color: var(--at-red);
  font-family: var(--at-mono);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.08em;
}
.at-page .wcm-flow {
  display: grid;
  grid-template-columns: minmax(145px, 1fr) auto minmax(145px, 1fr) auto minmax(145px, 1fr) auto minmax(145px, 1fr);
  align-items: stretch;
  gap: 0.7rem;
  margin-top: 2.2rem;
}
.at-page .wcm-flow > div {
  display: flex;
  min-height: 180px;
  flex-direction: column;
  padding: 1.25rem;
  border: 1px solid var(--at-line);
  border-radius: 14px;
  background: var(--at-white);
}
.at-page .wcm-flow.wcm-release-flow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
@media (max-width: 700px) {
  .at-page .wcm-flow.wcm-release-flow { grid-template-columns: 1fr; }
}
.at-page .wcm-flow > div.gate { border-color: var(--at-red); box-shadow: inset 0 4px 0 var(--at-red); }
.at-page .wcm-flow span { color: var(--at-red); font-family: var(--at-mono); font-size: 0.7rem; }
.at-page .wcm-flow strong { margin-top: auto; font-family: var(--at-serif); font-size: 1.15rem; }
.at-page .wcm-flow small { margin-top: 0.55rem; color: var(--at-muted); line-height: 1.5; }
.at-page .wcm-flow > i { align-self: center; color: var(--at-red); font-family: var(--at-serif); font-size: 1.5rem; font-style: normal; }
.at-page .source-links { display: flex; flex-wrap: wrap; gap: 0.55rem 1.1rem; margin-top: 1.5rem; }
.at-page .source-links a { font-size: 0.78rem; font-weight: 700; }
.at-page .wcm-personas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.at-page .wcm-personas .card { min-height: 220px; }
.at-page .wcm-personas .card a { margin-top: auto; padding-top: 1rem; color: var(--at-ink); font-size: 0.78rem; font-weight: 750; }

/* Footer */
.at-page .site-footer {
  padding: clamp(2.5rem, 5vw, 4rem) var(--at-gutter);
  background: var(--at-ink);
  color: var(--at-paper);
  font-size: 0.84rem;
}
.at-page .site-footer a { color: var(--at-paper); text-underline-offset: 0.18em; }
.at-page .site-footer a:hover { color: #fff; }
.at-page .foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.75rem;
}
.at-page .foot-brand .wordmark { display: block; color: var(--at-paper); font-size: 1.15rem; }
.at-page .foot-brand .tagline { margin-top: 0.5rem; color: rgba(255, 255, 255, 0.6); }
.at-page .credit {
  max-width: 460px;
  padding-left: 1rem;
  border-left: 2px solid var(--at-red);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
}
.at-page .credit b { color: var(--at-paper); font-weight: 650; }
.at-page .foot-legal { margin-top: 2rem; color: rgba(255, 255, 255, 0.5); font-size: 0.74rem; }
.at-page .foot-links { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; }

@media (max-width: 860px) {
  .at-page .grid,
  .at-page .grid-3,
  .at-page .flow,
  .at-page .flow-5 { grid-template-columns: 1fr; }
  .at-page .grid > .card,
  .at-page .flow > * { min-height: auto; }
  .at-page .hero h1 { font-size: clamp(2.5rem, 11vw, 3.9rem); }
  .at-page .hero h1 br { display: none; }
  .at-page .step { grid-template-columns: 1fr; gap: 0.9rem; }
  .at-page .split,
  .at-page .split.even { grid-template-columns: 1fr; }
  .at-page section { padding: 3.5rem 0; }
  .at-page .credit { max-width: none; }
  .at-page .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-page .proof-grid a:nth-child(2) { border-right: 0; }
  .at-page .proof-grid a:nth-child(-n + 2) { border-bottom: 1px solid var(--at-line); }
  .at-page .wcm-flow { grid-template-columns: 1fr; }
  .at-page .wcm-flow > div { min-height: 145px; }
  .at-page .wcm-flow > i { transform: rotate(90deg); }
  .at-page .wcm-personas { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .at-page .proof-grid { grid-template-columns: 1fr; }
  .at-page .proof-grid a { min-height: 110px; border-right: 0; border-bottom: 1px solid var(--at-line); }
  .at-page .proof-grid a:last-child { border-bottom: 0; }
  .at-page .wcm-terminal .term-body > div { grid-template-columns: 24px 1fr; }
  .at-page .wcm-terminal .term-body > div span:last-child { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .at-page *, .at-page *::before, .at-page *::after { transition: none !important; }
}

/* Marketplace */
.marketplace-callout { display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-top:1.5rem;padding:1.5rem 1.75rem;border:1px solid var(--border);border-left:4px solid var(--accent);background:var(--surface); }
.marketplace-callout span,.marketplace-page .eyebrow { color:var(--at-red);font-size:.68rem;font-weight:750;letter-spacing:.11em;text-transform:uppercase; }
.marketplace-callout h3 { margin:.3rem 0;font-size:1.25rem; }.marketplace-callout p { color:var(--muted);font-size:.9rem; }
.marketplace-page { background:var(--at-paper); }.marketplace-page main { overflow:hidden; }
.marketplace-page .button { display:inline-flex;align-items:center;justify-content:center; }
.market-hero { position:relative;padding:clamp(3.5rem,7vw,6rem) 0;border-top:1px solid var(--at-line);border-bottom:1px solid var(--at-line);background:linear-gradient(135deg,var(--at-paper) 0%,#f4f0e8 72%,#eee8dc 100%);color:var(--at-ink); }
.market-hero::before { position:absolute;top:0;right:10%;width:220px;height:4px;background:var(--at-red);content:""; }
.market-hero-grid { position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.65fr);align-items:center;gap:clamp(2.5rem,7vw,7rem); }
.market-hero h1 { max-width:780px;margin:.8rem 0 1.25rem;color:var(--at-ink);font-family:var(--at-serif);font-size:clamp(2.8rem,5.6vw,5.2rem);font-weight:500;letter-spacing:-.05em;line-height:.98; }
.market-hero h1 em { color:var(--at-red);font-style:italic; }.market-intro { max-width:690px;color:var(--at-muted);font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.7; }
.market-hero-actions { display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem; }.market-hero .button.secondary { border-color:var(--at-line);color:var(--at-ink);background:rgba(255,255,255,.45); }
.market-signal { position:relative;padding:1.7rem;border:1px solid var(--at-line);border-radius:16px;background:rgba(255,255,255,.64);box-shadow:0 18px 50px rgba(19,19,19,.05); }
.market-signal p { display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;margin:0;padding:.8rem 0;border-bottom:1px solid var(--at-line);color:var(--at-muted);font-size:.76rem; }.market-signal p:first-child{padding-top:0}.market-signal p strong { color:var(--at-ink);font-family:var(--at-serif);font-size:1.65rem;font-weight:500; }.market-signal small{display:block;margin-top:1rem;color:var(--at-muted);font-size:.66rem;line-height:1.5}.market-signal small.catalog-warning{color:#8b5b20}
.market-featured,.market-browser { padding:clamp(4rem,8vw,7rem) 0; }.market-featured { background:#f0ede6; }.market-section-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2rem; }
.market-section-heading h2,.market-submit h2 { margin-top:.45rem;font-family:var(--at-serif);font-size:clamp(2rem,4vw,3.5rem);font-weight:500;letter-spacing:-.035em;line-height:1.05; }.market-section-heading>a { color:var(--at-ink);font-size:.8rem;font-weight:700; }
.featured-strip,.market-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem; }.market-card { display:flex;min-height:360px;flex-direction:column;justify-content:space-between;padding:1.4rem;border:1px solid var(--at-line);border-radius:16px;background:var(--at-white);transition:transform .2s,border-color .2s,box-shadow .2s; }
.market-card:hover { transform:translateY(-3px);border-color:rgba(19,19,19,.35);box-shadow:0 16px 35px rgba(19,19,19,.07); }.market-card-featured { min-height:330px; }
.market-card-top { display:flex;align-items:flex-start;justify-content:space-between;gap:1rem; }.market-mark { display:flex;width:50px;height:50px;align-items:center;justify-content:center;border-radius:13px;background:var(--at-ink);color:#fff;font-family:var(--at-mono);font-size:.82rem;font-weight:700;letter-spacing:-.02em; }
.mark-frameworks{background:#5d3fd3}.mark-observability{background:#a43c78}.mark-security-policy{background:#173d34}.mark-identity-trust{background:#304b83}.mark-compliance{background:#7b4825}.mark-evidence-receipts{background:#604070}
.mark-agt-integrations{background:#315b78}.tier-project i{background:#4c7fa3}
.market-tier { display:inline-flex;align-items:center;gap:.4rem;color:var(--at-muted);font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; }.market-tier i { width:7px;height:7px;border-radius:50%;background:#3b9f78; }
.market-vendor { margin-top:2rem;color:var(--at-muted);font-size:.69rem;font-weight:650;letter-spacing:.05em;text-transform:uppercase; }.market-card h3 { margin:.35rem 0 .65rem;font-family:var(--at-serif);font-size:1.5rem;font-weight:600;letter-spacing:-.025em; }.market-description { color:var(--at-muted);font-size:.88rem;line-height:1.6; }
.market-card-foot { margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--at-line); }.market-tags { display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1rem; }.market-tags span { padding:.25rem .5rem;border-radius:999px;background:var(--at-paper-2);color:var(--at-muted);font-family:var(--at-mono);font-size:.62rem; }.market-card-foot>a { display:flex;justify-content:space-between;color:var(--at-ink);font-size:.78rem;font-weight:750;text-decoration:none; }.market-card-foot>a:hover { color:var(--at-red); }
.browser-heading { margin-bottom:1.5rem; }.market-count { color:var(--at-muted);font-size:.8rem; }.market-count strong { color:var(--at-ink);font-family:var(--at-serif);font-size:1.6rem; }
.market-search-row { display:grid;grid-template-columns:1fr auto;gap:.8rem;margin-bottom:2.2rem;padding-bottom:2.2rem;border-bottom:1px solid var(--at-line); }.market-search { display:flex;align-items:center;gap:.8rem;padding:0 1rem;border:1px solid var(--at-line);border-radius:12px;background:var(--at-white); }.market-search:focus-within { border-color:var(--at-ink);box-shadow:0 0 0 3px rgba(19,19,19,.06); }.market-search svg { width:20px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.7; }.market-search input { width:100%;padding:.9rem 0;border:0;outline:0;background:transparent;color:var(--at-ink);font:inherit; }.market-search kbd { padding:.15rem .4rem;border:1px solid var(--at-line);border-radius:5px;color:var(--at-muted);font-size:.7rem; }
.market-sort { display:flex;align-items:center;gap:.5rem;padding-left:1rem;color:var(--at-muted);font-size:.72rem;font-weight:700; }.market-sort select { min-height:48px;padding:0 2.2rem 0 .9rem;border:1px solid var(--at-line);border-radius:12px;background:var(--at-white);color:var(--at-ink);font:inherit; }
.market-layout { display:grid;grid-template-columns:220px 1fr;align-items:start;gap:2.2rem; }.market-filters { position:sticky;top:1.5rem; }.filter-group { padding:0 0 1.4rem;margin-bottom:1.4rem;border-bottom:1px solid var(--at-line); }.filter-group>p { margin-bottom:.75rem;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase; }.filter-group label { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.55rem;padding:.45rem 0;color:var(--at-muted);font-size:.78rem;cursor:pointer; }.filter-group input { accent-color:var(--at-red); }.filter-group b { color:#999;font-size:.68rem;font-weight:500; }.clear-filters { padding:0;border:0;background:none;color:var(--at-red);font:inherit;font-size:.72rem;font-weight:750;cursor:pointer; }.neutrality-note { margin-top:2rem;padding:1rem;border-left:2px solid var(--at-line);color:var(--at-muted);font-size:.7rem;line-height:1.55; }
.market-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.active-filters { display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem; }.active-filters:empty { display:none; }.active-filters button { padding:.35rem .6rem;border:1px solid var(--at-line);border-radius:999px;background:var(--at-white);color:var(--at-muted);font-size:.68rem;cursor:pointer; }
.market-empty { padding:5rem 2rem;border:1px dashed var(--at-line);border-radius:16px;text-align:center; }.market-empty span { color:var(--at-red);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; }.market-empty h3 { margin:.7rem 0;font-family:var(--at-serif);font-size:2rem; }.market-empty p { margin-bottom:1.4rem;color:var(--at-muted); }
.market-submit { padding:clamp(3.5rem,7vw,5.5rem) 0;border-top:1px solid var(--at-line);background:#ece7dd;color:var(--at-ink); }.market-submit .eyebrow { color:var(--at-red); }.submit-grid { display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,8vw,7rem); }.market-submit p { max-width:580px;color:var(--at-muted);line-height:1.7; }.market-submit .button { margin-top:1.5rem;background:var(--at-ink);color:#fff; }
.marketplace-page [hidden] { display:none!important; }.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
@media(max-width:860px){.marketplace-callout,.market-section-heading{align-items:flex-start;flex-direction:column}.market-hero-grid,.market-layout,.submit-grid{grid-template-columns:1fr}.market-signal{max-width:440px}.featured-strip,.market-grid{grid-template-columns:1fr}.market-filters{position:static;display:grid;grid-template-columns:1fr 1fr;gap:1rem}.neutrality-note{grid-column:1/-1;margin-top:0}.market-search-row{grid-template-columns:1fr}.market-sort{padding-left:0}.market-card{min-height:315px}}
@media(max-width:560px){.market-hero h1 br{display:none}.market-filters{grid-template-columns:1fr}.neutrality-note{grid-column:auto}.market-search kbd{display:none}}
/* Reader entry points and architecture share the site's existing palette. */
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 20000; padding: .75rem 1rem; background: var(--at-ink); color: var(--at-paper); }
.skip-link:focus { top: .5rem; }
.agentrust-hub .hero { padding-block: clamp(2rem, 4vw, 3.5rem); }
.agentrust-hub .hero h1 { font-size: clamp(2.6rem, 5.5vw, 4.8rem); line-height: 1.03; max-width: 1000px; margin-block: 1rem; }
.agentrust-hub .hero > .hero-inner > p:not(.hero-eyebrow) { max-width: 760px; font-family: var(--at-sans); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.6; }
.agentrust-hub .hero > .hero-inner > p.hero-scope { font-size: .85rem; margin-top: 1rem; }
.agentrust-hub .hero .hero-eyebrow { max-width: none; font-size: .78rem; }
.agentrust-hub .reader-start { padding-block: 2rem 3rem; }
.agentrust-hub .reader-start h2 { font-size: 2rem; margin-bottom: 1.5rem; }
.agentrust-hub .ecosystem-card a { display: inline-block; margin-top: 1rem; color: var(--at-ink); font-weight: 650; text-underline-offset: .2em; }
.architecture { margin: 2rem 0; color: var(--at-ink); }
.architecture-input { display: flex; align-items: center; gap: 1.5rem; padding: 1.25rem; border: 1px solid var(--at-line); background: var(--at-paper-2); }
.architecture-input > a { flex-shrink: 0; }
.architecture a { color: var(--at-ink); text-underline-offset: .2em; }
.architecture-row { display: grid; grid-template-columns: 1fr auto 1.3fr auto 1fr; gap: .8rem; align-items: stretch; margin-block: 1.25rem; }
.architecture-node { display: flex; flex-direction: column; justify-content: center; gap: .65rem; padding: 1.25rem; border: 1px solid var(--at-line); background: var(--at-white); min-width: 0; }
.architecture-boundary { border: 2px dashed var(--at-navy); }
.architecture-edge { align-self: center; font-size: .8rem; font-weight: 650; white-space: nowrap; }
.architecture-outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--at-line); background: var(--at-white); }
.architecture-outcomes > div { padding: 1.25rem; }
.architecture-outcomes > div:nth-child(even) { border-left: 1px solid var(--at-line); }
.architecture-outcomes > div:nth-child(n+3) { border-top: 1px solid var(--at-line); }
.architecture span, .architecture p, .architecture small, .architecture figcaption { font-size: .9rem; line-height: 1.6; }
.architecture p { margin-bottom: 0; }
.architecture figcaption { margin-top: 1rem; color: var(--at-muted); }
.tutorial-toc { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin: 1.5rem 0; }
.tutorial-toc a { color: var(--at-ink); padding-block: .4rem; }
.troubleshooting dt { font-weight: 700; margin-top: 1.25rem; }
.troubleshooting dd { margin: .5rem 0 0; }
.at-page .step-body, .at-page .split > *, .at-page .code { min-width: 0; }
.at-page .code-label { overflow-wrap: anywhere; }
.at-page .copy { flex-shrink: 0; }
@media (max-width: 700px) {
  .architecture-input { flex-direction: column; align-items: start; gap: .5rem; }
  .architecture-row, .architecture-outcomes { grid-template-columns: 1fr; }
  .architecture-edge { justify-self: center; margin-block: .25rem; }
  .architecture-edge .direction { display: inline-block; transform: rotate(90deg); }
  .architecture-outcomes > div:nth-child(even) { border-left: 0; }
  .architecture-outcomes > div + div { border-top: 1px solid var(--at-line); }
  .agentrust-hub .hero-actions { gap: .75rem; }
  .agentrust-hub .hero-actions .btn { text-align: center; white-space: normal; }
}

/* Homepage, verifiable AI supply chain (September 2026)
 *
 * The hero runs the in-browser TDX verifier (verify/home-panel.js), so the
 * panel is a terminal whose states fill in from the live result rather than
 * a picture of one. The other blocks are the few layouts the new homepage
 * needs that the hub vocabulary above did not already have.
 */
.agentrust-hub .verify-panel {
  margin: 3.5rem 0 0;
  overflow: hidden;
  border-radius: var(--at-radius);
  background: var(--at-code-bg);
  color: var(--at-code-fg);
  box-shadow: var(--at-shadow);
}
.agentrust-hub .verify-panel-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid rgba(243, 240, 232, 0.12);
  color: var(--at-code-dim);
  font-family: var(--at-mono);
  font-size: 0.8rem;
}
.agentrust-hub .verify-rows {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 1.3rem 1.5rem 1.4rem;
  list-style: none;
  font-family: var(--at-mono);
  font-size: 0.9rem;
  line-height: 1.5;
}
.agentrust-hub .verify-rows li {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) 6rem;
  gap: 1rem;
}
.agentrust-hub .verify-rows .key { color: var(--at-code-dim); }
.agentrust-hub .verify-rows .state { color: var(--at-code-dim); text-align: right; }
.agentrust-hub .verify-rows .state.pass { color: var(--at-code-accent); font-weight: 600; }
.agentrust-hub .verify-rows .state.fail { color: var(--at-code-alert); font-weight: 600; }
.agentrust-hub .verify-rows .state.note { color: var(--at-code-string); }
.agentrust-hub .verify-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: 1rem;
  color: var(--at-muted);
}
.agentrust-hub .verify-foot p {
  max-width: 46rem;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
}
.agentrust-hub .verify-foot .tag {
  margin-right: 0.5rem;
  color: var(--at-red);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.agentrust-hub .scope-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.agentrust-hub .scope-list li {
  padding: 1.1rem 0;
  border-top: 1px solid var(--at-line);
  color: var(--at-ink);
  line-height: 1.6;
}
.agentrust-hub .logo-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
}
.agentrust-hub .logo-row img {
  display: block;
  max-width: 120px;
  max-height: 44px;
  margin: auto;
}
.agentrust-hub .build-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.agentrust-hub .build-band h3 {
  margin: 0 0 1rem;
  color: var(--at-ink);
  font-family: var(--at-serif);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
@media (max-width: 700px) {
  .agentrust-hub .verify-rows li { grid-template-columns: minmax(0, 1fr) auto; gap: 0 1rem; }
  .agentrust-hub .verify-rows .key { grid-column: 1 / -1; }
  .agentrust-hub .scope-list,
  .agentrust-hub .build-band { grid-template-columns: 1fr; }
  .agentrust-hub .logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .agentrust-hub .ecosystem-grid { grid-template-columns: 1fr; }
}

/* Site header
 * One header for every agentrust-io.com page. tools/build-header.py stamps the
 * markup from tools/site_header.py, and hub-nav.js adds the mobile Menu toggle.
 * Selectors hang off .hub-header rather than a body class, so the same block
 * serves the hub (.agentrust-hub) and the editorial pages (.at-page). It sits
 * last so their generic list and link rules cannot restyle it.
 */
.hub-header, .hub-header *, .hub-header *::before, .hub-header *::after { box-sizing: border-box; }
.hub-header { position: sticky; top: 0; z-index: 100; padding: 0 2rem; background: var(--at-paper); color: var(--at-ink); border-bottom: 1px solid var(--at-line); font-family: var(--at-sans); font-size: 16px; line-height: 1.6; }
.hub-header ul, .hub-header li { margin: 0; padding: 0; list-style: none; color: inherit; }
.hub-header .header-inner { max-width: 1100px; height: 56px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.hub-header .logo { display: flex; align-items: center; gap: .5rem; color: var(--at-ink); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.hub-header .header-nav { display: flex; align-items: center; gap: 1.5rem; }
.hub-header .header-nav a, .hub-header .spec-menu summary { color: var(--at-ink); font-size: .875rem; text-decoration: none; transition: color .15s; }
.hub-header .header-nav a:hover, .hub-header .spec-menu summary:hover,
.hub-header .header-nav [aria-current="page"], .hub-header .spec-menu.is-current > details > summary { color: var(--at-red); }
.hub-header .nav-toggle { display: none; }
.hub-header .spec-menu { position: relative; }
.hub-header .spec-menu summary { cursor: pointer; }
.hub-header .spec-menu ul { position: absolute; top: 2rem; right: 0; min-width: 17rem; padding: .75rem; background: var(--at-paper); border: 1px solid var(--at-line); border-radius: .5rem; box-shadow: 0 .5rem 1.5rem #0001; }
.hub-header .spec-menu li a { display: block; padding: .65rem; }
@media (max-width: 900px) {
  .hub-header .header-inner { height: auto; min-height: 56px; flex-wrap: wrap; }
  .hub-header .header-inner nav { margin-left: auto; }
  .hub-header .nav-toggle:not([hidden]) { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .75rem; color: var(--at-ink); background: transparent; border: 1px solid var(--at-line); border-radius: .3rem; font: inherit; }
  .hub-header .header-nav { flex-wrap: wrap; gap: .5rem 1rem; padding: .75rem 0; }
  .hub-nav-ready .hub-header .header-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: .75rem 1.25rem; background: var(--at-paper); border-bottom: 1px solid var(--at-line); max-height: calc(100dvh - 56px); overflow-y: auto; }
  .hub-nav-ready .hub-header .header-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hub-header .header-nav a, .hub-header .spec-menu summary { display: block; padding: .75rem; min-height: 44px; }
  .hub-header .spec-menu ul { position: static; min-width: 0; box-shadow: none; margin: 0 .75rem .5rem; }
}

/* On this page: the section links an editorial page used to carry in its header. */
.on-this-page { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.35rem; padding: .85rem max(var(--at-gutter), calc((100% - var(--at-wrap)) / 2)); border-bottom: 1px solid var(--at-line); background: var(--at-paper); font-family: var(--at-sans); font-size: .72rem; font-weight: 700; letter-spacing: .06em; line-height: 1.6; text-transform: uppercase; }
.on-this-page span { color: var(--at-muted); font-size: .66rem; letter-spacing: .11em; }
.on-this-page a { color: var(--at-ink); text-decoration: none; }
.on-this-page a:hover { color: var(--at-red); }

/* /search/: one box across every AgenTrust site. search/search.js fills it. */
.site-search-section { padding-top: 3.5rem; }
.site-search-lead { max-width: 46rem; color: var(--at-muted); }
.site-search-form { display: flex; gap: .6rem; margin: 1.6rem 0 1rem; }
.site-search-form input { flex: 1; min-width: 0; padding: .85rem 1rem; border: 1px solid var(--at-line); border-radius: 12px; background: var(--at-white); color: var(--at-ink); font: 1rem var(--at-sans); }
.site-search-form input:focus { outline: 2px solid var(--at-red); outline-offset: 1px; }
.site-search-filters { display: flex; flex-wrap: wrap; gap: .45rem; }
.site-search-filters button { padding: .35rem .8rem; border: 1px solid var(--at-line); border-radius: 999px; background: transparent; color: var(--at-ink); font: 600 .78rem var(--at-sans); cursor: pointer; }
.site-search-filters button[aria-pressed="true"] { border-color: var(--at-ink); background: var(--at-ink); color: var(--at-paper); }
.site-search-status { margin: 1.1rem 0 0; color: var(--at-muted); font: .8rem var(--at-sans); }
.site-search-count { margin: .2rem 0 0; font: 700 .85rem var(--at-sans); }
.site-search-results { margin: 1rem 0 0; padding: 0; list-style: none; }
.search-hit { padding: 1rem 0; border-top: 1px solid var(--at-line); }
.search-site { display: inline-block; margin-bottom: .25rem; color: var(--at-red); font: 800 .66rem var(--at-sans); letter-spacing: .08em; text-transform: uppercase; }
.search-title { display: block; color: var(--at-ink); font: 600 1.05rem var(--at-sans); text-decoration: none; }
.search-title:hover, .search-title:focus { color: var(--at-red); text-decoration: underline; }
.search-snippet { margin: .3rem 0; color: var(--at-muted); font-size: .92rem; line-height: 1.55; overflow-wrap: anywhere; }
.search-url { color: var(--at-muted); font: .72rem var(--at-mono); overflow-wrap: anywhere; }
.search-hit mark { background: rgba(185, 28, 28, .14); color: inherit; border-radius: 3px; padding: 0 .1em; }
.site-search-empty { margin-top: 1.5rem; padding: 2rem; border: 1px dashed var(--at-line); border-radius: 16px; text-align: center; }
@media (max-width: 560px) { .site-search-form { flex-direction: column; } }

/* Collapsible technical detail under plain-language copy */
details.tech-detail { margin: 1.25rem 0; padding: 0.75rem 1rem; border: 1px solid var(--at-line); border-radius: 6px; background: rgba(0,0,0,0.015); }
details.tech-detail > summary { cursor: pointer; font-weight: 600; color: var(--at-navy); }
details.tech-detail[open] > summary { margin-bottom: 0.75rem; }