/* GreatCTO 2026 — dark, emerald, Geist */
/* Self-hosted fonts (latin variable woff2) — same-origin, no cross-origin font chain.
   Only Geist + Geist Mono are ever painted; Inter / JetBrains Mono are fallback names. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/geist-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/assets/fonts/geistmono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --bg-page: #fafafa;
  --bg-card: #ffffff;
  /* Renamed from --bg-elevated. This value is what the board calls --bg-muted,
     and the board ALSO has a --bg-elevated at #1a2025 — so the two surfaces had
     one name meaning two colours and one colour wearing two names. Anyone reading
     one file and editing the other got it wrong. The board keeps the fuller
     five-step ladder (page → card → muted → elevated → strong); this takes its
     vocabulary rather than inventing a sixth word. */
  --bg-muted: #f4f3ef;
  --surface-2: #efeee9; /* slightly elevated above --bg-card, used as inline fallback on hero chips */
  --border: rgba(0, 0, 0, 0.09);
  --border-strong: rgba(0, 0, 0, 0.16);

  --text: #111111;
  --text-2: #414141;
  --text-3: #6e6e6e;
  /* --muted was USED in 61 places and DEFINED in none, so every one of them fell
     through to its inline fallback #5f5e5a — a light-theme grey authored before
     this page was dark. Measured 2.62:1 on the chip surface #171d21, against a
     4.5:1 AA floor: the 60-chip industries grid, the densest block on the page,
     was rendering unreadable. Defining it here fixes all 61 at once; #8a9a92 is
     --text-2, which clears AA on every surface we use (worst case 5.77:1). */
  --muted: #414141;

  --accent: #007a45;
  --accent-2: #006b3c;
  --accent-soft: rgba(0, 122, 69, 0.08);
  --accent-strong: rgba(0, 122, 69, 0.14);

  --p0: #c81e2d;
  --p1: #8a5a00;
  --p2: #6b5f00;

  --display: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — the board's twelve steps, plus two display steps a marketing
     page needs and an instrument panel does not. One system, extended where the
     surface genuinely differs, rather than a second scale.
     Measured before adopting: 149 of 230 font-size declarations already sat on
     these steps, 74 more were within 1.5px, and only 7 moved further. The scale
     was already here; it had just never been written down, so nothing could stop
     the 46th size being invented.
     clamp() is untouched: fluid display type is correct for a page read at every
     width, and wrong for a board read at one. */
  --fs-eyebrow:    11px;
  --fs-caption:    12px;
  --fs-small:      13px;
  --fs-body:       14px;
  --fs-base:       15px;
  --fs-title-s:    16px;
  --fs-title-m:    19px;
  --fs-title-l:    22px;
  --fs-num-s:      24px;
  --fs-num-m:      30px;
  --fs-num-l:      36px;
  --fs-num-xl:     52px;
  --fs-display-s:  64px;
  --fs-display-l:  96px;

  --max: 1100px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }
::selection { background: var(--accent-strong); color: #fff; }

a { color: inherit; text-decoration: none; }

/* Keyboard navigation: skip to main content */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--accent);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* Accessibility: visible keyboard-focus ring, consistent with .picker-select's focus treatment */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
img, svg { max-width: 100%; display: block; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
section { padding: 96px 0; position: relative; }
section + section { border-top: 1px solid var(--border); }

.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.h2 em { font-style: normal; color: var(--accent); }
.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 64ch;
  margin-bottom: 56px;
}

/* ── Nav ───────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
  background: rgba(250, 250, 250, 0.82);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 600;
  font-size: 16px; letter-spacing: -0.01em;
}
.nav-logo .logo-mark {
  display: inline-flex;
  width: 26px; height: 26px;
  border-radius: 0;
  overflow: hidden;
  flex-shrink: 0;
}
.nav-logo .logo-mark svg { width: 100%; height: 100%; display: block; }
.nav-right { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.nav-right a {
  padding: 7px 12px; border-radius: 0;
  color: var(--text-2);
  transition: color 0.12s, background 0.12s;
}
.nav-right a:hover { color: var(--text); background: rgba(17, 17, 17, 0.04); }
.nav-right .cta {
  background: var(--accent);
  color: #ffffff;
  font-weight: 500;
  margin-left: 8px;
}
.nav-right .cta:hover { background: var(--accent-2); color: #ffffff; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero {
  display: flex; flex-direction: column; justify-content: center;
  padding: 110px 32px 72px;
  position: relative; overflow: hidden;
  border: none !important;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
  background: var(--bg-page);
}
.hero-bg::after {
  /* Subtle grid */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(17, 17, 17, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, #000 30%, transparent 80%);
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto;
  text-align: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-strong);
  color: var(--accent);
  margin-bottom: 28px;
}
.hero-eyebrow .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: none;
  animation: pulse-dot 2s infinite;
}
/* Prominent live npm-download stat under the hero CTA */
.hero-stat {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-top: 18px;
  text-decoration: none;
  font-family: var(--mono);
  transition: opacity 0.15s;
}
.hero-stat:hover { opacity: 0.85; }
.hero-stat-num {
  font-size: 22px; font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.hero-stat-label {
  font-size: 13px; color: var(--text-2, #8a9a92);
  letter-spacing: 0.02em;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(44px, 7vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
  text-wrap: balance;
}
.hero h1 .br { display: block; }
/* Hero headline A/B: both variants ship in markup; CSS shows the one assigned
   synchronously in <head> via document.documentElement.dataset.abHero. Default
   (no JS / localStorage blocked) renders variant A. */
.hero p.sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 60ch;
  margin: 0 auto 36px;
  text-wrap: balance;
}
.hero p.sub b { color: var(--text); font-weight: 500; }

.cta-row {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--accent);
  color: #ffffff;
  font-family: var(--mono);
  box-shadow: 0 0 0 0 var(--accent-strong), 0 8px 24px rgba(0, 122, 69, 0.15);
}
.btn-primary:hover {
  background: var(--accent-2);
  box-shadow: 0 0 0 4px var(--accent-strong), 0 12px 36px rgba(0, 122, 69, 0.28);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.cta-micro {
  font-family: var(--mono); font-size: 12px;
  color: var(--text-3);
  margin-top: 8px;
}
.cta-micro .sep { color: var(--text-3); margin: 0 10px; }
.stat-num {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ── Before / After ────────────────────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
}
.split-col {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 32px;
}
.split-col.before { opacity: 0.78; }
.split-col.before h3 { color: var(--p0); }
.split-col.after { border-color: rgba(0, 122, 69, 0.30); }
.split-col.after h3 { color: var(--accent); }
.split-col h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 24px;
}
.split-col ul { list-style: none; padding: 0; margin: 0; }
.split-col li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.55;
}
.split-col li:last-child { border-bottom: none; }
.split-col li .icon { flex-shrink: 0; margin-top: 2px; font-family: var(--mono); }
.split-col.before li { color: var(--text-2); }
.split-col.before li .icon { color: var(--p0); }
.split-col.after  li { color: var(--text); }
.split-col.after  li .icon { color: var(--accent); }

/* ── How it works ──────────────────────────────────────────────────────────── */
.how-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.how-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 28px;
  position: relative;
  transition: border-color 0.15s, transform 0.15s;
}
.how-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.how-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.16em;
  margin-bottom: 14px;
}
.how-card h3 {
  font-family: var(--display); font-weight: 600;
  font-size: 22px; letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.how-card p {
  font-size: 14px; color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* ── Showcase (admin screenshots) ──────────────────────────────────────────── */
.showcase {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: center;
  margin-top: 64px;
}
.showcase + .showcase { margin-top: 96px; }
.inline-code {
  font-family: var(--mono); font-size: 13px;
  background: rgba(0, 122, 69, 0.08);
  border: 1px solid rgba(0, 122, 69, 0.16);
  color: var(--accent);
  padding: 1px 8px; border-radius: 0;
}

/* ── Screenshot wrapper (for real PNG screenshots) ────────────────────────── */
.screenshot {
  border: 1px solid var(--border-strong);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  background: var(--bg-card);
  position: relative;
}
.screenshot::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0.02), transparent 30%);
  pointer-events: none;
  z-index: 1;
}
.screenshot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Archetypes grid ──────────────────────────────────────────────────────── */
.archetypes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin: 40px 0 16px;
}
.arch-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 18px 14px;
  text-align: center;
  transition: all 160ms;
  cursor: default;
}
.arch-icon { font-size: 30px; margin-bottom: 8px; line-height: 1; }
.arch-name {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}
.arch-comp {
  font-family: var(--mono); font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  line-height: 1.4;
}
a.arch-card.arch-link {
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
  cursor: pointer;
  border-color: rgba(0, 122, 69, 0.18);
}
a.arch-card.arch-link:hover {
  border-color: var(--accent);
  background: rgba(0, 122, 69, 0.06);
  transform: translateY(-2px);
}
.arch-cta {
  font-family: var(--mono); font-size: 11px;
  color: var(--accent);
  margin-top: 8px;
  letter-spacing: 0.04em;
  opacity: 0.5;
  transition: opacity 160ms;
}
a.arch-card.arch-link:hover .arch-cta { opacity: 1; }
.arch-note {
  font-size: 13px; color: var(--text-3);
  text-align: center;
  margin-top: 24px;
  font-style: italic;
}

@media (max-width: 880px) {
}

@media (max-width: 880px) {
  .archetypes-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
  .arch-card { padding: 14px 10px; }
  .arch-icon { font-size: 24px; }
}

/* ── 12-angle review ───────────────────────────────────────────────────────── */
.angles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 48px;
}
.angle {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 18px 20px;
  position: relative;
  cursor: default;
  transition: all 0.15s;
  min-height: 140px;
  display: flex; flex-direction: column;
}
.angle:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: none;
}
.angle .pill {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--mono); font-size: 11px;
  padding: 2px 8px; border-radius: 0;
  letter-spacing: 0.06em;
  align-self: flex-start;
}
.angle .pill.p0 { background: rgba(255, 84, 102, 0.14); color: var(--p0); }
.angle .pill.p1 { background: rgba(255, 170, 60, 0.14); color: var(--p1); }
.angle .pill.p2 { background: rgba(240, 210, 78, 0.14); color: var(--p2); }

/* ── Audience ──────────────────────────────────────────────────────────────── */
.aud-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-top: 48px;
}
.aud-col h4 {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 8px;
}
.aud-col.yes h4 { color: var(--accent); }
.aud-col.no  h4 { color: var(--text-3); }
.aud-col ul { list-style: none; padding: 0; }
.aud-col li {
  font-size: 15px;
  line-height: 1.65;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
}
.aud-col li:last-child { border-bottom: none; }
.aud-col.yes li { color: var(--text); }

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
.faq { margin-top: 40px; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0;
  font-family: var(--display); font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::after {
  content: "+";
  font-family: var(--mono); font-size: 22px;
  color: var(--text-3);
  font-weight: 300;
  transition: transform 0.2s, color 0.15s;
}
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.faq-a {
  padding: 0 0 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 72ch;
}
.faq-a code {
  font-family: var(--mono); font-size: 13px;
  background: #fafafa;
  padding: 2px 6px; border-radius: 0;
  color: var(--text);
  border: 1px solid var(--border);
}

/* ── Final CTA ─────────────────────────────────────────────────────────────── */
.final-cta {
  text-align: center;
  padding: 140px 32px 96px;
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: ""; position: absolute;
  top: -100px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--accent-soft), transparent 60%);
  pointer-events: none;
}
.final-cta-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 22px;
  position: relative;
}
.final-cta h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02; letter-spacing: -0.04em;
  margin-bottom: 36px;
  position: relative;
}
.final-cta h2 .accent { color: var(--accent); }
.final-cta-row {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  position: relative;
}
.final-cta-row .cmd {
  font-family: var(--mono); font-size: 15px; color: var(--text);
}
.final-cta-row .cmd .dim { color: var(--text-3); }
.final-cta-row .copy-btn {
  background: var(--accent); color: #ffffff;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 0;
  transition: background 0.12s;
}
.final-cta-row .copy-btn:hover { background: var(--accent-2); }
.final-cta-micro {
  font-family: var(--mono); font-size: 12px;
  color: var(--text-3);
  margin-top: 24px;
  position: relative;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.footer {
  padding: 32px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  font-family: var(--mono); font-size: 12px;
  color: var(--text-3);
}
.footer-links { display: flex; gap: 22px; }
.footer-links a:hover { color: var(--accent); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .desk-only { display: none; }
  section { padding: 56px 0; }
  .wrap { padding: 0 18px; box-sizing: border-box; max-width: 100%; }
  /* Mobile menu: one row, same 56px height as before (8 + 40 + 7 + 1px border), so nothing
     under the fixed nav moves. The links used to be display:none here — a phone
     could reach Install and nothing else. They now scroll sideways inside the
     row; Install stays pinned at its right edge, with a fade in the page colour
     so links scrolled under it do not show through. CSS only: every page with
     the nav loads this file, so no page markup changes. */
  .nav { padding: 8px 14px 7px; gap: 10px; }
  .nav-right {
    flex: 1 1 auto; min-width: 0; gap: 2px;
    justify-content: flex-start;
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    scroll-padding-inline-end: 96px; /* a link focused by Tab is not left under Install */
  }
  .nav-right::-webkit-scrollbar { display: none; }
  .nav-right .nav-link {
    display: inline-flex; align-items: center; flex: none;
    min-height: 40px; padding: 0 10px; white-space: nowrap;
  }
  .nav-right .cta {
    position: sticky; right: 0; flex: none; margin-left: auto;
    padding: 8px 12px; font-size: 12px; white-space: nowrap;
    box-shadow: -18px 0 12px -6px var(--bg-page);
  }
  .nav-logo { font-size: 15px; flex: none; }
  .nav-logo .logo-mark { width: 22px; height: 22px; }

  .hero { padding: 88px 16px 40px; min-height: auto; box-sizing: border-box; }
  .hero-inner { width: 100%; box-sizing: border-box; }
  .hero-eyebrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 5px 10px;
    width: fit-content;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    text-align: center;
    line-height: 1.5;
    white-space: normal;
    word-break: break-word;
  }
  .hero h1 {
    font-size: clamp(28px, 9vw, 48px);
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 18px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
  .hero h1 .br { display: inline; }
  .hero p.sub {
    font-size: 15px; line-height: 1.55;
    padding: 0;
    max-width: 100%;
    margin-bottom: 24px;
    overflow-wrap: break-word;
  }
  .cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px;
    box-sizing: border-box;
  }
  .btn { width: 100%; justify-content: center; padding: 12px 18px; font-size: 13px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }
  .cta-micro { font-size: 11px; padding: 0 8px; line-height: 1.6; }
  .stat-num { font-size: 19px; }
  .cta-micro .sep { margin: 0 6px; }

  .h2 { font-size: clamp(26px, 7vw, 38px); }
  .lede { font-size: 16px; margin-bottom: 36px; }
  .eyebrow { font-size: 11px; }

  .split, .how-grid, .aud-grid { grid-template-columns: 1fr; }
  .split-col { padding: 24px 18px; }
  .split-col li { font-size: 14px; }
  .aud-grid { gap: 32px; }
  .angles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .angle { padding: 14px 14px; min-height: auto; }
  .faq-item summary { font-size: 15px; padding: 18px 0; }
  .faq-a { font-size: 14px; }
  .final-cta { padding: 80px 18px 56px; }
  .final-cta h2 { font-size: clamp(32px, 9vw, 56px); }
  .final-cta-row { flex-direction: column; padding: 16px; gap: 12px; align-items: stretch; }
  .final-cta-row .cmd { text-align: center; font-size: 13px; word-break: break-all; }
  .footer { flex-direction: column; align-items: flex-start; padding: 24px 18px; gap: 8px; }
  .footer-links { flex-wrap: wrap; gap: 14px; }

  .showcase {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 48px;
  }
  .showcase + .showcase { margin-top: 64px; }
}
@media (max-width: 480px) {
  .btn { min-height: 44px; padding: 13px 20px; }  /* touch-target minimum */
  .nav-logo span:not(.logo-mark) { display: none; }  /* show only the mark on tiny screens */
  .nav-logo .logo-mark { width: 26px; height: 26px; }
  .angles { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(24px, 8vw, 36px); }
  .h2 { font-size: clamp(22px, 7vw, 34px); }
  .hero-eyebrow {
    font-size: 11px;
    padding: 4px 8px;
    letter-spacing: 0.04em;
    max-width: calc(100vw - 32px);
  }
  .split-col h3 { font-size: 11px; }
  .term { font-size: 11px; }
  .how-card { padding: 20px 16px; }
}

/* ── v2.8 pack/archetype additions (companies, packs, gates, FAQ) ────────── */

.co-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 24px 0 16px;
}
.co-card {
  display: block;
  padding: 14px 14px 12px;
  background: rgba(17, 17, 17, 0.03);
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, transform 0.18s;
}
.co-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.co-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; min-height: 24px; }
.co-name { font-weight: 600; font-size: 14px; color: var(--text); }
.co-logo {
  width: 22px;
  height: 22px;
  border-radius: 0;
  background: rgba(17, 17, 17, 0.06);
  object-fit: contain;
  flex-shrink: 0;
}
.co-tag { font-size: 12px; color: rgba(17, 17, 17, 0.65); line-height: 1.35; margin-bottom: 8px; min-height: 34px; }
.co-meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--text-3); }
.co-stage, .co-country {
  padding: 2px 6px;
  background: rgba(17, 17, 17, 0.05);
  border-radius: 0;
  text-transform: lowercase;
  font-family: var(--mono, 'Geist Mono', monospace);
}
.co-disclaimer { font-size: 11px; color: var(--text-3); margin-top: 16px; line-height: 1.5; }

.pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin: 24px 0;
}
.pack-card {
  display: block;
  padding: 18px 18px 16px;
  background: rgba(0, 122, 69, 0.04);
  border: 1px solid rgba(0, 122, 69, 0.22);
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.pack-card:hover {
  border-color: var(--accent);
  background: rgba(0, 122, 69, 0.08);
  transform: translateY(-1px);
}
.pack-name { font-weight: 600; color: var(--accent); font-size: 15px; margin-bottom: 6px; }
.pack-desc { font-size: 13px; color: rgba(17, 17, 17, 0.72); line-height: 1.5; }

.faq { margin: 20px 0; }
.faq-item {
  padding: 14px 18px;
  margin-bottom: 8px;
  background: rgba(17, 17, 17, 0.03);
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 0;
}
/* Removed: a second `.faq-item summary` rule that sat 528 lines below the
   designed one and silently overrode three of its decisions — 17px to 14.5px,
   weight 500 to 600, and colour to a raw #fff outside the token system. It
   also beat the max-width:880px override at line 1548, so the responsive size
   never applied on any phone. Found by css-cascade on its first run here. */
.faq-item div {
  margin-top: 10px;
  color: rgba(17, 17, 17, 0.7);
  font-size: 14px;
  line-height: 1.55;
}
.faq-item[open] summary { color: var(--accent); }

/* Aggregate index pages (companies, packs, agents) */
.index-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 28px;
}
.index-filter-chip {
  padding: 6px 14px;
  background: rgba(17, 17, 17, 0.04);
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 0;
  font-size: 13px;
  color: rgba(17, 17, 17, 0.78);
  cursor: pointer;
  transition: all 0.15s;
}
.index-filter-chip:hover, .index-filter-chip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 122, 69, 0.06);
}

.index-filter-group {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.index-filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  width: 92px;
  flex-shrink: 0;
}
.co-count {
  margin: 18px 0 12px;
  font-size: 13px;
  color: rgba(17, 17, 17, 0.6);
  font-family: var(--mono, 'Geist Mono', monospace);
}

/* ── Archetype + pack landing hero — shorter than homepage hero ───────────── */
/* Homepage hero uses min-height: 100vh to fill the viewport (single-focus
   landing). Archetype/pack pages have lots of content below, so the full-viewport
   hero leaves a giant dead-space below the CTA. Compact form. */
.hero.hero--page {
  min-height: 0;
  padding: 96px 32px 56px;
}
@media (max-width: 720px) {
  .hero.hero--page { padding: 72px 16px 32px; }
}

/* ── Themed hero backgrounds (per-archetype) ──────────────────────────────── */
/* Each archetype sets two CSS vars: --theme-rgb (color) and --theme-pattern
   (one of 7 shared SVG motifs). Pattern is applied via mask-image so the
   underlying background-color (driven by --theme-rgb) tints it dynamically.
   This keeps per-theme CSS to a single declaration. */

.hero--theme {
  min-height: 60vh;
  padding: 120px 32px 80px;
  --theme-rgb: 0, 217, 126;
  --theme-pattern: none;
}
@media (max-width: 720px) {
  .hero--theme { min-height: 0; padding: 88px 16px 48px; }
}

/* Themed radial backdrop — replaces the default hero-bg gradient */
.hero--theme .hero-bg {
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(var(--theme-rgb), 0.22), transparent 60%),
    radial-gradient(ellipse 50% 70% at 88% 85%, rgba(var(--theme-rgb), 0.10), transparent 70%),
    radial-gradient(ellipse 50% 70% at 12% 85%, rgba(0, 122, 69, 0.07), transparent 70%),
    linear-gradient(180deg, #fafafa 0%, var(--bg-page) 100%);
}

/* Pattern overlay — SVG is a monochrome mask, color comes from --theme-rgb */
.hero--theme .hero-bg-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: rgba(var(--theme-rgb), 0.55);
  -webkit-mask-image: var(--theme-pattern);
          mask-image: var(--theme-pattern);
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  -webkit-mask-size: 320px 320px;
          mask-size: 320px 320px;
  opacity: 0.35;
  /* Vignette: pattern fades out toward edges so text stays focal */
  -webkit-mask-composite: source-in;
}
.hero--theme .hero-bg-pattern::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 65% at 50% 40%, #000 30%, transparent 85%);
  /* fallback fade — the mask handles it but ::before guards older browsers */
}

/* Themed eyebrow + h1 em — use --theme-rgb */
.hero--theme .hero-eyebrow {
  background: rgba(var(--theme-rgb), 0.12);
  border-color: rgba(var(--theme-rgb), 0.35);
  color: rgb(var(--theme-rgb));
}
.hero--theme .hero-eyebrow .pulse {
  background: rgb(var(--theme-rgb));
  box-shadow: none;
}
.hero--theme h1 em {
  background: linear-gradient(135deg, rgba(var(--theme-rgb), 0.78), rgb(var(--theme-rgb)));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
}

/* ── Per-archetype assignments (color × pattern) ──────────────────────────── */
/* AI / agent family — mesh + violet/indigo/magenta */
.theme-agent-product   { --theme-rgb: 155, 136, 255; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='0.9'><path d='M40 40 L160 80 L280 40 M40 40 L80 160 M160 80 L160 200 M280 40 L240 160 M80 160 L160 200 M240 160 L160 200 M80 160 L40 280 M160 200 L160 280 M240 160 L280 280 M40 280 L160 280 L280 280'/></g><g fill='black'><circle cx='40' cy='40' r='3'/><circle cx='160' cy='80' r='3.5'/><circle cx='280' cy='40' r='3'/><circle cx='80' cy='160' r='3'/><circle cx='160' cy='200' r='4'/><circle cx='240' cy='160' r='3'/><circle cx='40' cy='280' r='3'/><circle cx='160' cy='280' r='3'/><circle cx='280' cy='280' r='3'/></g></svg>"); }
.theme-ai-system       { --theme-rgb: 129, 140, 248; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='0.9'><path d='M40 40 L160 80 L280 40 M40 40 L80 160 M160 80 L160 200 M280 40 L240 160 M80 160 L160 200 M240 160 L160 200 M80 160 L40 280 M160 200 L160 280 M240 160 L280 280 M40 280 L160 280 L280 280'/></g><g fill='black'><circle cx='40' cy='40' r='3'/><circle cx='160' cy='80' r='3.5'/><circle cx='280' cy='40' r='3'/><circle cx='80' cy='160' r='3'/><circle cx='160' cy='200' r='4'/><circle cx='240' cy='160' r='3'/><circle cx='40' cy='280' r='3'/><circle cx='160' cy='280' r='3'/><circle cx='280' cy='280' r='3'/></g></svg>"); }
.theme-mlops           { --theme-rgb: 232, 121, 249; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='0.9'><path d='M40 40 L160 80 L280 40 M40 40 L80 160 M160 80 L160 200 M280 40 L240 160 M80 160 L160 200 M240 160 L160 200 M80 160 L40 280 M160 200 L160 280 M240 160 L280 280 M40 280 L160 280 L280 280'/></g><g fill='black'><circle cx='40' cy='40' r='3'/><circle cx='160' cy='80' r='3.5'/><circle cx='280' cy='40' r='3'/><circle cx='80' cy='160' r='3'/><circle cx='160' cy='200' r='4'/><circle cx='240' cy='160' r='3'/><circle cx='40' cy='280' r='3'/><circle cx='160' cy='280' r='3'/><circle cx='280' cy='280' r='3'/></g></svg>"); }

/* Money family — chart + blue/orange/rose/red */
.theme-fintech         { --theme-rgb:  96, 165, 250; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g stroke='black' stroke-width='1' fill='none' opacity='0.35'><line x1='0' y1='80' x2='320' y2='80'/><line x1='0' y1='160' x2='320' y2='160'/><line x1='0' y1='240' x2='320' y2='240'/></g><g fill='black'><rect x='30' y='120' width='10' height='80' rx='1'/><rect x='70' y='90' width='10' height='120' rx='1'/><rect x='110' y='140' width='10' height='40' rx='1'/><rect x='150' y='100' width='10' height='100' rx='1'/><rect x='190' y='130' width='10' height='60' rx='1'/><rect x='230' y='80' width='10' height='140' rx='1'/><rect x='270' y='110' width='10' height='90' rx='1'/></g></svg>"); }
.theme-insurance       { --theme-rgb: 251, 113, 133; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g stroke='black' stroke-width='1' fill='none' opacity='0.35'><line x1='0' y1='80' x2='320' y2='80'/><line x1='0' y1='160' x2='320' y2='160'/><line x1='0' y1='240' x2='320' y2='240'/></g><g fill='black'><rect x='30' y='120' width='10' height='80' rx='1'/><rect x='70' y='90' width='10' height='120' rx='1'/><rect x='110' y='140' width='10' height='40' rx='1'/><rect x='150' y='100' width='10' height='100' rx='1'/><rect x='190' y='130' width='10' height='60' rx='1'/><rect x='230' y='80' width='10' height='140' rx='1'/><rect x='270' y='110' width='10' height='90' rx='1'/></g></svg>"); }
.theme-commerce        { --theme-rgb: 251, 146,  60; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g stroke='black' stroke-width='1' fill='none' opacity='0.35'><line x1='0' y1='80' x2='320' y2='80'/><line x1='0' y1='160' x2='320' y2='160'/><line x1='0' y1='240' x2='320' y2='240'/></g><g fill='black'><rect x='30' y='120' width='10' height='80' rx='1'/><rect x='70' y='90' width='10' height='120' rx='1'/><rect x='110' y='140' width='10' height='40' rx='1'/><rect x='150' y='100' width='10' height='100' rx='1'/><rect x='190' y='130' width='10' height='60' rx='1'/><rect x='230' y='80' width='10' height='140' rx='1'/><rect x='270' y='110' width='10' height='90' rx='1'/></g></svg>"); }
.theme-marketplace     { --theme-rgb: 244, 114, 182; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g stroke='black' stroke-width='1' fill='none' opacity='0.35'><line x1='0' y1='80' x2='320' y2='80'/><line x1='0' y1='160' x2='320' y2='160'/><line x1='0' y1='240' x2='320' y2='240'/></g><g fill='black'><rect x='30' y='120' width='10' height='80' rx='1'/><rect x='70' y='90' width='10' height='120' rx='1'/><rect x='110' y='140' width='10' height='40' rx='1'/><rect x='150' y='100' width='10' height='100' rx='1'/><rect x='190' y='130' width='10' height='60' rx='1'/><rect x='230' y='80' width='10' height='140' rx='1'/><rect x='270' y='110' width='10' height='90' rx='1'/></g></svg>"); }

/* Health + audio — pulse */
.theme-healthcare      { --theme-rgb:  45, 212, 191; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='160'><g fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M0 80 L50 80 L55 80 L60 40 L65 120 L70 80 L120 80 L145 80 L150 80 L155 40 L160 120 L165 80 L210 80 L245 80 L250 80 L255 40 L260 120 L265 80 L320 80'/></g></svg>"); }
.theme-streaming       { --theme-rgb: 192, 132, 252; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='160'><g fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M0 80 L50 80 L55 80 L60 40 L65 120 L70 80 L120 80 L145 80 L150 80 L155 40 L160 120 L165 80 L210 80 L245 80 L250 80 L255 40 L260 120 L265 80 L320 80'/></g></svg>"); }

/* Hardware / tools — circuit */
.theme-iot-embedded    { --theme-rgb: 251, 191,  36; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='1.2'><path d='M0 40 L80 40 L80 100 L160 100 L160 60 L240 60 L240 140 L320 140 M0 200 L60 200 L60 260 L140 260 L140 220 L220 220 L220 280 L320 280'/></g><g fill='black'><circle cx='80' cy='40' r='3.5'/><circle cx='80' cy='100' r='3.5'/><circle cx='160' cy='60' r='3.5'/><circle cx='160' cy='100' r='3.5'/><circle cx='240' cy='60' r='3.5'/><circle cx='240' cy='140' r='3.5'/><circle cx='60' cy='200' r='3.5'/><circle cx='60' cy='260' r='3.5'/><circle cx='140' cy='220' r='3.5'/><circle cx='140' cy='260' r='3.5'/><circle cx='220' cy='220' r='3.5'/><circle cx='220' cy='280' r='3.5'/></g></svg>"); }
.theme-infra           { --theme-rgb: 148, 163, 184; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='1.2'><path d='M0 40 L80 40 L80 100 L160 100 L160 60 L240 60 L240 140 L320 140 M0 200 L60 200 L60 260 L140 260 L140 220 L220 220 L220 280 L320 280'/></g><g fill='black'><circle cx='80' cy='40' r='3.5'/><circle cx='80' cy='100' r='3.5'/><circle cx='160' cy='60' r='3.5'/><circle cx='160' cy='100' r='3.5'/><circle cx='240' cy='60' r='3.5'/><circle cx='240' cy='140' r='3.5'/><circle cx='60' cy='200' r='3.5'/><circle cx='60' cy='260' r='3.5'/><circle cx='140' cy='220' r='3.5'/><circle cx='140' cy='260' r='3.5'/><circle cx='220' cy='220' r='3.5'/><circle cx='220' cy='280' r='3.5'/></g></svg>"); }
.theme-devtools        { --theme-rgb:  34, 211, 238; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='1.2'><path d='M0 40 L80 40 L80 100 L160 100 L160 60 L240 60 L240 140 L320 140 M0 200 L60 200 L60 260 L140 260 L140 220 L220 220 L220 280 L320 280'/></g><g fill='black'><circle cx='80' cy='40' r='3.5'/><circle cx='80' cy='100' r='3.5'/><circle cx='160' cy='60' r='3.5'/><circle cx='160' cy='100' r='3.5'/><circle cx='240' cy='60' r='3.5'/><circle cx='240' cy='140' r='3.5'/><circle cx='60' cy='200' r='3.5'/><circle cx='60' cy='260' r='3.5'/><circle cx='140' cy='220' r='3.5'/><circle cx='140' cy='260' r='3.5'/><circle cx='220' cy='220' r='3.5'/><circle cx='220' cy='280' r='3.5'/></g></svg>"); }
.theme-cli-tool        { --theme-rgb: 132, 204,  22; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='1.2'><path d='M0 40 L80 40 L80 100 L160 100 L160 60 L240 60 L240 140 L320 140 M0 200 L60 200 L60 260 L140 260 L140 220 L220 220 L220 280 L320 280'/></g><g fill='black'><circle cx='80' cy='40' r='3.5'/><circle cx='80' cy='100' r='3.5'/><circle cx='160' cy='60' r='3.5'/><circle cx='160' cy='100' r='3.5'/><circle cx='240' cy='60' r='3.5'/><circle cx='240' cy='140' r='3.5'/><circle cx='60' cy='200' r='3.5'/><circle cx='60' cy='260' r='3.5'/><circle cx='140' cy='220' r='3.5'/><circle cx='140' cy='260' r='3.5'/><circle cx='220' cy='220' r='3.5'/><circle cx='220' cy='280' r='3.5'/></g></svg>"); }
.theme-browser-extension { --theme-rgb: 250, 204,  21; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='1.2'><path d='M0 40 L80 40 L80 100 L160 100 L160 60 L240 60 L240 140 L320 140 M0 200 L60 200 L60 260 L140 260 L140 220 L220 220 L220 280 L320 280'/></g><g fill='black'><circle cx='80' cy='40' r='3.5'/><circle cx='80' cy='100' r='3.5'/><circle cx='160' cy='60' r='3.5'/><circle cx='160' cy='100' r='3.5'/><circle cx='240' cy='60' r='3.5'/><circle cx='240' cy='140' r='3.5'/><circle cx='60' cy='200' r='3.5'/><circle cx='60' cy='260' r='3.5'/><circle cx='140' cy='220' r='3.5'/><circle cx='140' cy='260' r='3.5'/><circle cx='220' cy='220' r='3.5'/><circle cx='220' cy='280' r='3.5'/></g></svg>"); }

/* Documents / content — docs */
.theme-regulated       { --theme-rgb: 212, 175,  55; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='1.2'><rect x='30' y='30' width='80' height='100' rx='4'/><rect x='140' y='30' width='80' height='100' rx='4'/><rect x='30' y='170' width='80' height='100' rx='4'/><rect x='140' y='170' width='80' height='100' rx='4'/></g><g stroke='black' stroke-width='1' opacity='0.5'><line x1='40' y1='50' x2='100' y2='50'/><line x1='40' y1='65' x2='100' y2='65'/><line x1='40' y1='80' x2='80' y2='80'/><line x1='150' y1='50' x2='210' y2='50'/><line x1='150' y1='65' x2='210' y2='65'/><line x1='150' y1='80' x2='190' y2='80'/><line x1='40' y1='190' x2='100' y2='190'/><line x1='40' y1='205' x2='100' y2='205'/><line x1='150' y1='190' x2='210' y2='190'/><line x1='150' y1='205' x2='210' y2='205'/><line x1='150' y1='220' x2='190' y2='220'/></g></svg>"); }
.theme-gov-public      { --theme-rgb:  56, 189, 248; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='1.2'><rect x='30' y='30' width='80' height='100' rx='4'/><rect x='140' y='30' width='80' height='100' rx='4'/><rect x='30' y='170' width='80' height='100' rx='4'/><rect x='140' y='170' width='80' height='100' rx='4'/></g><g stroke='black' stroke-width='1' opacity='0.5'><line x1='40' y1='50' x2='100' y2='50'/><line x1='40' y1='65' x2='100' y2='65'/><line x1='40' y1='80' x2='80' y2='80'/><line x1='150' y1='50' x2='210' y2='50'/><line x1='150' y1='65' x2='210' y2='65'/><line x1='150' y1='80' x2='190' y2='80'/><line x1='40' y1='190' x2='100' y2='190'/><line x1='40' y1='205' x2='100' y2='205'/><line x1='150' y1='190' x2='210' y2='190'/><line x1='150' y1='205' x2='210' y2='205'/><line x1='150' y1='220' x2='190' y2='220'/></g></svg>"); }
.theme-edtech          { --theme-rgb: 236,  72, 153; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='1.2'><rect x='30' y='30' width='80' height='100' rx='4'/><rect x='140' y='30' width='80' height='100' rx='4'/><rect x='30' y='170' width='80' height='100' rx='4'/><rect x='140' y='170' width='80' height='100' rx='4'/></g><g stroke='black' stroke-width='1' opacity='0.5'><line x1='40' y1='50' x2='100' y2='50'/><line x1='40' y1='65' x2='100' y2='65'/><line x1='40' y1='80' x2='80' y2='80'/><line x1='150' y1='50' x2='210' y2='50'/><line x1='150' y1='65' x2='210' y2='65'/><line x1='150' y1='80' x2='190' y2='80'/><line x1='40' y1='190' x2='100' y2='190'/><line x1='40' y1='205' x2='100' y2='205'/><line x1='150' y1='190' x2='210' y2='190'/><line x1='150' y1='205' x2='210' y2='205'/><line x1='150' y1='220' x2='190' y2='220'/></g></svg>"); }
.theme-cms             { --theme-rgb: 167, 139, 250; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='1.2'><rect x='30' y='30' width='80' height='100' rx='4'/><rect x='140' y='30' width='80' height='100' rx='4'/><rect x='30' y='170' width='80' height='100' rx='4'/><rect x='140' y='170' width='80' height='100' rx='4'/></g><g stroke='black' stroke-width='1' opacity='0.5'><line x1='40' y1='50' x2='100' y2='50'/><line x1='40' y1='65' x2='100' y2='65'/><line x1='40' y1='80' x2='80' y2='80'/><line x1='150' y1='50' x2='210' y2='50'/><line x1='150' y1='65' x2='210' y2='65'/><line x1='150' y1='80' x2='190' y2='80'/><line x1='40' y1='190' x2='100' y2='190'/><line x1='40' y1='205' x2='100' y2='205'/><line x1='150' y1='190' x2='210' y2='190'/><line x1='150' y1='205' x2='210' y2='205'/><line x1='150' y1='220' x2='190' y2='220'/></g></svg>"); }
.theme-library         { --theme-rgb: 156, 163, 175; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='1.2'><rect x='30' y='30' width='80' height='100' rx='4'/><rect x='140' y='30' width='80' height='100' rx='4'/><rect x='30' y='170' width='80' height='100' rx='4'/><rect x='140' y='170' width='80' height='100' rx='4'/></g><g stroke='black' stroke-width='1' opacity='0.5'><line x1='40' y1='50' x2='100' y2='50'/><line x1='40' y1='65' x2='100' y2='65'/><line x1='40' y1='80' x2='80' y2='80'/><line x1='150' y1='50' x2='210' y2='50'/><line x1='150' y1='65' x2='210' y2='65'/><line x1='150' y1='80' x2='190' y2='80'/><line x1='40' y1='190' x2='100' y2='190'/><line x1='40' y1='205' x2='100' y2='205'/><line x1='150' y1='190' x2='210' y2='190'/><line x1='150' y1='205' x2='210' y2='205'/><line x1='150' y1='220' x2='190' y2='220'/></g></svg>"); }

/* SaaS / web / mobile / data / game — tiles */
.theme-enterprise-saas { --theme-rgb: 168,  85, 247; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='1.2'><rect x='30' y='30' width='50' height='50' rx='8'/><rect x='110' y='30' width='50' height='50' rx='8'/><rect x='190' y='30' width='50' height='50' rx='8'/><rect x='270' y='30' width='50' height='50' rx='8'/><rect x='30' y='110' width='50' height='50' rx='8'/><rect x='110' y='110' width='50' height='50' rx='8'/><rect x='190' y='110' width='50' height='50' rx='8'/><rect x='30' y='190' width='50' height='50' rx='8'/><rect x='110' y='190' width='50' height='50' rx='8'/><rect x='190' y='190' width='50' height='50' rx='8'/><rect x='270' y='190' width='50' height='50' rx='8'/><rect x='30' y='270' width='50' height='50' rx='8'/><rect x='110' y='270' width='50' height='50' rx='8'/></g><g fill='black'><circle cx='55' cy='55' r='4'/><circle cx='215' cy='55' r='4'/><circle cx='135' cy='135' r='4'/><circle cx='55' cy='215' r='4'/><circle cx='215' cy='215' r='4'/></g></svg>"); }
.theme-web-service     { --theme-rgb:  16, 185, 129; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='1.2'><rect x='30' y='30' width='50' height='50' rx='8'/><rect x='110' y='30' width='50' height='50' rx='8'/><rect x='190' y='30' width='50' height='50' rx='8'/><rect x='270' y='30' width='50' height='50' rx='8'/><rect x='30' y='110' width='50' height='50' rx='8'/><rect x='110' y='110' width='50' height='50' rx='8'/><rect x='190' y='110' width='50' height='50' rx='8'/><rect x='30' y='190' width='50' height='50' rx='8'/><rect x='110' y='190' width='50' height='50' rx='8'/><rect x='190' y='190' width='50' height='50' rx='8'/><rect x='270' y='190' width='50' height='50' rx='8'/><rect x='30' y='270' width='50' height='50' rx='8'/><rect x='110' y='270' width='50' height='50' rx='8'/></g><g fill='black'><circle cx='55' cy='55' r='4'/><circle cx='215' cy='55' r='4'/><circle cx='135' cy='135' r='4'/><circle cx='55' cy='215' r='4'/><circle cx='215' cy='215' r='4'/></g></svg>"); }
.theme-mobile-app      { --theme-rgb:  94, 234, 212; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='1.2'><rect x='30' y='30' width='50' height='50' rx='8'/><rect x='110' y='30' width='50' height='50' rx='8'/><rect x='190' y='30' width='50' height='50' rx='8'/><rect x='270' y='30' width='50' height='50' rx='8'/><rect x='30' y='110' width='50' height='50' rx='8'/><rect x='110' y='110' width='50' height='50' rx='8'/><rect x='190' y='110' width='50' height='50' rx='8'/><rect x='30' y='190' width='50' height='50' rx='8'/><rect x='110' y='190' width='50' height='50' rx='8'/><rect x='190' y='190' width='50' height='50' rx='8'/><rect x='270' y='190' width='50' height='50' rx='8'/><rect x='30' y='270' width='50' height='50' rx='8'/><rect x='110' y='270' width='50' height='50' rx='8'/></g><g fill='black'><circle cx='55' cy='55' r='4'/><circle cx='215' cy='55' r='4'/><circle cx='135' cy='135' r='4'/><circle cx='55' cy='215' r='4'/><circle cx='215' cy='215' r='4'/></g></svg>"); }
.theme-data-platform   { --theme-rgb:  14, 165, 233; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='1.2'><rect x='30' y='30' width='50' height='50' rx='8'/><rect x='110' y='30' width='50' height='50' rx='8'/><rect x='190' y='30' width='50' height='50' rx='8'/><rect x='270' y='30' width='50' height='50' rx='8'/><rect x='30' y='110' width='50' height='50' rx='8'/><rect x='110' y='110' width='50' height='50' rx='8'/><rect x='190' y='110' width='50' height='50' rx='8'/><rect x='30' y='190' width='50' height='50' rx='8'/><rect x='110' y='190' width='50' height='50' rx='8'/><rect x='190' y='190' width='50' height='50' rx='8'/><rect x='270' y='190' width='50' height='50' rx='8'/><rect x='30' y='270' width='50' height='50' rx='8'/><rect x='110' y='270' width='50' height='50' rx='8'/></g><g fill='black'><circle cx='55' cy='55' r='4'/><circle cx='215' cy='55' r='4'/><circle cx='135' cy='135' r='4'/><circle cx='55' cy='215' r='4'/><circle cx='215' cy='215' r='4'/></g></svg>"); }
.theme-game            { --theme-rgb: 217,  70, 239; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='black' stroke-width='1.2'><rect x='30' y='30' width='50' height='50' rx='8'/><rect x='110' y='30' width='50' height='50' rx='8'/><rect x='190' y='30' width='50' height='50' rx='8'/><rect x='270' y='30' width='50' height='50' rx='8'/><rect x='30' y='110' width='50' height='50' rx='8'/><rect x='110' y='110' width='50' height='50' rx='8'/><rect x='190' y='110' width='50' height='50' rx='8'/><rect x='30' y='190' width='50' height='50' rx='8'/><rect x='110' y='190' width='50' height='50' rx='8'/><rect x='190' y='190' width='50' height='50' rx='8'/><rect x='270' y='190' width='50' height='50' rx='8'/><rect x='30' y='270' width='50' height='50' rx='8'/><rect x='110' y='270' width='50' height='50' rx='8'/></g><g fill='black'><circle cx='55' cy='55' r='4'/><circle cx='215' cy='55' r='4'/><circle cx='135' cy='135' r='4'/><circle cx='55' cy='215' r='4'/><circle cx='215' cy='215' r='4'/></g></svg>"); }

/* Web3 — hex */
.theme-web3            { --theme-rgb: 252, 211,  77; --theme-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='320'><g fill='none' stroke='black' stroke-width='1.2'><polygon points='80,40 130,40 155,80 130,120 80,120 55,80'/><polygon points='190,40 240,40 265,80 240,120 190,120 165,80'/><polygon points='135,130 185,130 210,170 185,210 135,210 110,170'/><polygon points='80,220 130,220 155,260 130,300 80,300 55,260'/><polygon points='190,220 240,220 265,260 240,300 190,300 165,260'/></g><g fill='black'><circle cx='105' cy='80' r='3.5'/><circle cx='215' cy='80' r='3.5'/><circle cx='160' cy='170' r='3.5'/><circle cx='105' cy='260' r='3.5'/><circle cx='215' cy='260' r='3.5'/></g></svg>"); }

/* ── Flow Picker ─────────────────────────────────────────────────────────── */
.picker-row {
  display: flex;
  gap: 16px;
  margin: 40px 0 28px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.picker-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.picker-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--mono);
}
.picker-select-wrap { position: relative; }
.picker-select {
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  padding: 10px 38px 10px 14px;
  cursor: pointer;
  min-width: 210px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.picker-select:hover  { border-color: rgba(0, 122, 69, 0.35); }
.picker-select:focus  { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.picker-select option { background: #ffffff; }
.picker-select-wrap::after {
  content: '▾';
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  pointer-events: none;
  font-size: 13px;
}
.picker-terminal-wrap {
  background: #fafafa;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  max-width: 700px;
}
.picker-terminal-bar {
  background: #0e1410;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
}
.t-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.t-red    { background: #ff5f57; }
.t-yellow { background: #febc2e; }
.t-green  { background: #28c840; }
/* 8b9490 measures 3.12:1 against the page and 5.98:1 against the bar it
   actually sits on (.picker-terminal-bar, background #1b1f1e). A contrast
   audit that reads one rule at a time cannot see the second number, so it
   reports this as a failure. It is not one — do not "fix" it lighter. */
.t-title  { margin-left: 8px; font-family: var(--mono); font-size: 11px; color: #8b9490; }
.picker-terminal {
  padding: 20px 22px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  color: var(--text);
  white-space: pre-wrap;
  overflow-x: auto;
  min-height: 148px;
}
.p-cmd   { color: var(--text-3); }
.p-title { color: var(--accent); font-weight: 500; }
.p-key   { color: var(--text-2); }
.p-val   { color: var(--text); }
.p-comp  { color: var(--accent-2); }
.p-cost  { color: var(--text-2); }
.p-note  { color: var(--text-3); }
/* items contributed by the chosen jurisdiction — shows what your choice added */
.p-jur   { color: var(--accent-2); border-bottom: 1px dashed var(--accent-2); }
/* clickable archetype title → its /for/ deep-dive page */
.p-link  { color: var(--accent); font-weight: 500; text-decoration: none;
           border-bottom: 1px solid transparent; transition: border-color 0.12s; }
.p-link:hover { border-bottom-color: var(--accent); }
/* brief flash when the compiled flow changes — makes "instant" visible */
@keyframes pFlash { from { background: rgba(80, 220, 130, 0.12); } to { background: transparent; } }
.p-flash { animation: pFlash 0.6s ease-out; }
/* install CTA under the compiled flow */
.picker-cta { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.picker-cta .cmd { font-family: var(--mono); font-size: 14px; color: var(--text);
                   background: rgba(17, 17, 17, 0.04); padding: 9px 14px; border-radius: 0; }
.picker-cta .copy-btn {
  background: var(--accent); color: #ffffff;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 0; cursor: pointer; border: 0;
  transition: background 0.12s;
}
.picker-cta .copy-btn:hover { background: var(--accent-2); }
@media (max-width: 600px) {
  .picker-select { min-width: calc(100vw - 48px); }
  .picker-row    { flex-direction: column; }
  /* merged from the retired 640px breakpoint */
  .index-filter-label { width: 100%; margin-bottom: 4px; }
}
.ap-lead{color:#111111;max-width:60ch;margin:.4rem 0 1.4rem}
@media (max-width: 720px) { }
.ap-hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin:1.5rem 0}
.ap-hubcard{display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:0;padding:1.4rem;text-decoration:none;transition:border-color .15s,transform .15s}
.ap-hubcard:hover{border-color:var(--accent-strong);transform:translateY(-2px)}
.ap-hubicon{font-size: 30px;margin-bottom:.5rem;line-height:0}
/* Geometric archetype marks (build/_icons.mjs) replace the emoji that used to
   label these cards. Emoji are drawn by the reader's OS, so the same card was a
   flat glyph on one machine and a glossy 3-D bubble on another, in a colour we
   did not pick. The mark inherits the card's ink through currentColor and keeps
   one accent stroke of its own. */
.ap-mark{display:block;color:var(--text-2)}
.ap-hubcard:hover .ap-mark{color:var(--text)}
.ap-hubname{font-weight:600;color:var(--text);font-size: 19px;margin-bottom:.3rem}
.ap-hubtag{color:#111111;font-size: 14px;margin-bottom:.9rem}
.ap-hubmeta{display:flex;justify-content:space-between;font-size: 13px;color:var(--accent);font-family:var(--mono)}
.ap-cos{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.ap-co{display:inline-flex;align-items:center;gap:.4rem;background:var(--bg-card);border:1px solid var(--border-strong);border-radius:0;padding:.3rem .7rem .3rem .5rem;font-size: 14px;color:var(--text);text-decoration:none;transition:border-color .15s}
.ap-co:hover{border-color:var(--accent-strong)}
.ap-co img{width:18px;height:18px;border-radius:0;background:#fff}
.ap-hubarrow{color:var(--accent)!important;font-family:var(--mono)}

/* ── "Under the hood" context banner on engineering pages ─────────────────── */
.ap-context-banner{max-width:var(--max);margin:1.2rem auto 0;padding:.7rem 1.1rem;background:var(--accent-soft);border:1px solid var(--accent-strong);border-radius:0;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size: 15px;color:#111111}
.ap-context-banner b{color:var(--accent)}
.ap-context-banner a{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}
.ap-context-banner a:hover{text-decoration:underline}
.ap-lead{font-size: 16px;line-height:1.6}
.ap-co{font-size: 15px}

/* Product Builder — peer/skill/tool chips on build + pipeline pages */
.chip2{display:inline-block;margin:3px 4px 0 0;padding:3px 9px;border:1px solid var(--border,rgba(17, 17, 17, 0.14));border-radius:0;font-size:12px;color:var(--muted,#9aa0a6);text-decoration:none}
a.chip2:hover{border-color:var(--accent,var(--accent));color:var(--text,#e8e8e8)}

/* Accessibility: respect prefers-reduced-motion across the whole site */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Team page ── */
/* SLICE 2b-2. No new colours — aliases of existing tokens only, per
   docs/team-page/DESIGN-team-page.md §7. Every value below is copied
   verbatim from that section; contrast ratios in the comments are the
   design doc's own measurements against the surfaces this page uses. */
:root {
  /* gates */
  --team-gate-ink:       var(--text);          /* #111111 — "stops" plate */
  --team-gate-on-ink:    #ffffff;              /* 18.88:1 on #111111 */
  --team-gate-outline:   var(--text-2);        /* #414141 — dashed "stops at level", 9.78:1 on page */
  /* rail + states */
  --team-rail-line:      var(--border-strong); /* decorative connector — carries no information */
  --team-joined-border:  var(--accent);        /* #007a45 — 5.43:1 on card */
  --team-joined-bg:      var(--accent-soft);   /* #ebf4f0 on card */
  --team-tag-border:     var(--text-3);        /* #6e6e6e — 5.10:1 on card */
  --team-control-mark:   var(--text-2);        /* checkbox / radio glyph, 9.78:1 */
  /* layout */
  --team-sticky-top:     88px;                 /* fixed .nav ≈63px (18+26+18+1) + 25 */
  --team-card-min:       300px;
  --team-rail-cols:      minmax(0, 5fr) minmax(0, 7fr);
}

/* .ap-hubgrid is shared with other pages as a <div> grid — the team page
   also renders it as <ol>/<ul> so screen readers announce list semantics
   for the pipeline rail (design §4 "readable by a screen reader"). Only
   the list-marker reset needs to be conditional on the tag. */
ol.ap-hubgrid, ul.ap-hubgrid { list-style: none; }

/* Hero numbers: --fs-num-l tabular per §7 typography table, not the
   generic 19px/600 archetype-card name style .ap-hubname carries
   elsewhere on the site. Geist Mono capped at 500 (brief item 1). */
.team-hero-stats .ap-hubname {
  font-family: var(--mono);
  font-size: var(--fs-num-l);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
}
.team-hero-stats .ap-hubtag {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  color: var(--text-2);
}

/* Pipeline rail + gate plates share #pipeline's .ap-hubname override:
   slug / gate id at --fs-base or --fs-small, weight 500 (not the shared
   19px/600 default) per §7 typography table rows "Slug агента" / "id гейта". */
#pipeline .ap-hubname { font-family: var(--mono); font-weight: 500; font-size: var(--fs-base); overflow-wrap: anywhere; }
#pipeline .ap-hubmeta { font-size: var(--fs-caption); color: var(--text-2); }

/* GateStop — four states, distinguished by shape AND text, never colour
   alone (brief item 1). floor = permanent, solid dark plate. default =
   this approval level's own choice, solid accent. level = stops only at
   specific levels, dashed outline. none = doesn't stop this gate, thin
   border. Text always differs too (see gateState() in team/_generate.mjs). */
.gate-plate { cursor: default; }
.gate-plate--floor {
  background: var(--team-gate-ink);
  border: 2px solid var(--team-gate-ink);
}
.gate-plate--floor:hover { border-color: var(--team-gate-ink); transform: none; }
.gate-plate--floor .ap-hubname,
.gate-plate--floor .ap-hubtag { color: var(--team-gate-on-ink); }
.gate-plate--default {
  border: 2px solid var(--team-joined-border);
  background: var(--team-joined-bg);
}
.gate-plate--level {
  border: 2px dashed var(--team-gate-outline);
  background: transparent;
}
.gate-plate--none {
  border: 1px solid var(--border);
  background: transparent;
  opacity: 0.85;
}

/* AgentCard — <details class="team-card ap-hubcard">. Marker replaced with
   the same +/45deg affordance as .faq-item summary, scoped to this class so
   the shared .ap-hubcard hover/border rules are untouched. */
.team-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.team-card summary::-webkit-details-marker { display: none; }
.team-card summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: var(--fs-title-s);
  font-weight: 400;
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform 0.15s, color 0.15s;
}
.team-card[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.team-card .ap-hubname { font-family: var(--mono); font-weight: 500; font-size: var(--fs-base); overflow-wrap: anywhere; }
.team-card .ap-hubmeta { flex-direction: column; align-items: flex-end; font-size: var(--fs-caption); color: var(--text-2); }
.team-card .ap-hubtag {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-2);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.team-card dl {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: 8px 12px;
  font-size: var(--fs-small);
}
.team-card dt {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.team-card dd {
  color: var(--text);
  overflow-wrap: anywhere;
}
.team-card dd a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Roster: group TOC, filter, Blocks/Example fields (great_cto-fs0z). The
   [hidden] rules win over .ap-hubcard / grid display so the filter can hide. */
.team-card[hidden], .team-group[hidden], .team-filter[hidden] { display: none !important; }
.team-toc ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2rem 0 0; padding: 0; }
.team-toc a {
  font-family: var(--mono); font-size: var(--fs-caption); color: var(--text-2);
  border: 1px solid var(--border-strong); padding: 6px 12px; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
}
.team-toc a:hover { border-color: var(--accent); color: var(--text); }
.team-toc a span { color: var(--text-3); }
.team-filter { margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.team-filter label { font-family: var(--mono); font-size: var(--fs-caption); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.team-filter input {
  flex: 1 1 240px; min-height: 44px; padding: 0 12px; font: inherit; font-size: var(--fs-small);
  color: var(--text); background: var(--bg-card); border: 1px solid var(--border-strong);
}
.team-filter input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.team-filter p { flex-basis: 100%; margin: 0; font-size: var(--fs-caption); color: var(--text-2); min-height: 1.2em; }
.team-card dd code { font-family: var(--mono); font-size: var(--fs-caption); overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .team-card dl { grid-template-columns: 1fr; gap: 2px 0; }
  .team-card dd { margin-bottom: 8px; }
}

/* /team readability pass (2026-10): a card leads with the role and what it does;
   the facts read from the plugin sit under "Technical details". */
.team-card summary { display: block; position: relative; padding-right: 28px; }
.team-card summary::after { position: absolute; top: 0; right: 0; }
.team-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.team-card-title { font-family: var(--sans); font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.team-card-slug { font-family: var(--mono); font-size: var(--fs-caption); color: var(--text-3); overflow-wrap: anywhere; }
.team-card-does { display: block; margin-top: 6px; font-family: var(--sans); font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }
.team-card-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.team-card-why { margin: 0 0 10px; font-size: var(--fs-small); line-height: 1.5; color: var(--text); }
.team-card-why > span {
  display: block; font-family: var(--mono); font-size: var(--fs-caption); color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px;
}
.team-card-why a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.team-card-tech { margin-top: 4px; }
.team-card-tech > summary {
  display: inline-block; padding: 6px 0; min-height: 32px; cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-caption); color: var(--text-2);
}
.team-card-tech > summary::after { content: none; }
.team-card-tech > summary::before { content: "▸ "; }
.team-card-tech[open] > summary::before { content: "▾ "; }
.team-card-tech dl { margin-top: 8px; }
.team-card-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; }

.team-group-note { margin: 0 0 .9rem; max-width: 70ch; font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }
.team-subgroup { margin-top: 1.4rem; }
.team-subgroup-title { margin: 0 0 .2rem; font-family: var(--sans); font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.team-subgroup-title span { font-family: var(--mono); font-weight: 400; font-size: var(--fs-caption); color: var(--text-3); margin-left: 4px; }

/* Main path: a numbered list read top to bottom, not a grid of nine boxes. */
.team-steps { list-style: none; margin: 1.4rem 0 0; padding: 0; max-width: 820px; }
.team-step { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.team-step:last-child { border-bottom: 1px solid var(--border); }
.team-step-num {
  flex: 0 0 32px; height: 32px; border: 1px solid var(--border-strong); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: var(--fs-small); color: var(--text-2);
}
.team-step-main { min-width: 0; }
.team-step-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.team-step-title a { color: inherit; text-decoration: none; }
.team-step-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.team-step-does { margin-top: 2px; font-size: var(--fs-body); line-height: 1.5; color: var(--text); }
.team-step-why { margin-top: 2px; font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }
.team-step-stop {
  display: inline-block; margin-top: 8px; padding: 4px 10px;
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  font-size: var(--fs-small); font-weight: 500; color: var(--text);
}
.team-step--stop .team-step-num { border-color: var(--accent); color: var(--accent); }

.tp-more { margin-top: 1rem; }
.tp-more > summary { cursor: pointer; font-family: var(--mono); font-size: var(--fs-caption); color: var(--text-2); min-height: 32px; }
.tp-result td .team-card-slug { white-space: nowrap; }
.tp-result .team-table-scroll td:nth-child(2) { white-space: normal; min-width: 240px; }

/* LevelMatrix — scrolls inside its own container so the page body never
   scrolls horizontally at 320px (brief item 1); body already has
   overflow-x: hidden globally as a second layer. */
.team-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 0.6rem; }
.team-table-scroll table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-family: var(--mono);
  font-size: var(--fs-small);
}
.team-table-scroll caption {
  text-align: left;
  color: var(--text-2);
  font-size: var(--fs-caption);
  margin-bottom: 8px;
}
.team-table-scroll th,
.team-table-scroll td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.team-table-scroll thead th { color: var(--text); font-weight: 500; background: var(--bg-muted); }
.team-table-scroll tbody th[scope="row"] { color: var(--text); font-weight: 500; background: var(--bg-muted); }

@media (max-width: 880px) {
  #pipeline .ap-hubgrid { grid-template-columns: 1fr !important; }
}

/* ── §B picker (SLICE 3) — design §4 "Пикер" + §7 tokens ──────────────── */
.tp-form { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 1rem; }
.tp-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tp-preset {
  font-family: var(--mono); font-size: var(--fs-caption); color: var(--text-2);
  border: 1px solid var(--border-strong); padding: 6px 12px; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.tp-preset:hover { border-color: var(--accent); color: var(--text); }
.tp-preset[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); font-weight: 500; }

.tp-fieldset { border: none; padding: 0; margin: 0; }
.tp-fieldset legend { font-family: var(--mono); font-size: var(--fs-caption); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.08em; padding: 0 0 8px; }
.tp-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Design §4 "Кольцо фокуса": the checkbox itself is visually hidden but
   stays focusable and tabbable — the glyph + label is what's shown, so the
   site's global `a, button, summary, [tabindex]` focus rule (which does not
   cover inputs) is re-declared here on the sibling it needs to land on. */
.tp-chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 12px 6px 8px; cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-small); color: var(--text);
  border: 1px solid var(--border); user-select: none;
}
.tp-chip:hover { border-color: var(--accent); }
.tp-chip input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.tp-chip-face { display: inline-flex; align-items: center; gap: 8px; }
.tp-chip-face::before {
  content: ''; flex: none; width: 12px; height: 12px; border: 1px solid var(--team-control-mark);
  background: transparent;
}
.tp-chip input:checked + .tp-chip-face::before {
  background: var(--accent); border-color: var(--accent);
  /* white check, drawn with a clip-path so no image asset is needed */
  clip-path: polygon(14% 44%, 0% 65%, 37% 100%, 100% 20%, 79% 0%, 37% 62%);
}
/* #tr-q (§C search) gets the same rule when that slice is built — out of
   scope here, not declared yet, so not referenced. */
.tp-chip input:focus-visible + .tp-chip-face {
  outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 3px var(--accent-soft);
}

.tp-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tp-actions button {
  font-family: var(--mono); font-size: var(--fs-caption); min-height: 44px; padding: 6px 16px;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text); cursor: pointer;
}
.tp-actions button:hover { border-color: var(--accent); color: var(--accent); }

#tp-summary { margin-top: 0.8rem; padding: 10px 14px; border: 1px solid var(--border-strong); background: var(--bg-muted); }

.tp-result { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.tp-result:first-child { border-top: none; padding-top: 0; }

.tp-new {
  font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--accent-2);
  border: 1px solid var(--accent); background: var(--accent-soft); padding: 1px 6px; margin-left: 4px;
}

@media (max-width: 480px) {
  .tp-chip { width: 100%; }
}