/* ============================================================================
   AXIONALYTICS — DESIGN SYSTEM
   Loaded after Tailwind CDN + axio-config.js on every page.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. BASE
   --------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* clears the fixed header on anchor jumps */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #fff;
  color: #0A101C;
  overflow-x: hidden; /* wide diagrams scroll in their own container, never the page */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: -0.021em;
}

h1 { letter-spacing: -0.034em; }

::selection { background: rgba(34, 211, 238, 0.28); }

:focus-visible {
  outline: 2px solid #22D3EE;
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------------------
   2. BILINGUAL ENGINE  (EN default / ES on html.lang-es)
   ---------------------------------------------------------------------------
   The previous implementation forced `display:block !important` on every
   Spanish node, which collapsed flex and grid children into stacked blocks.
   `display: revert` restores each element's own UA default instead — span
   returns to inline, li to list-item, div to block — so layout survives the
   language swap. Opt-out helpers below cover the rare case where a translated
   node must itself be a flex/grid container.
   --------------------------------------------------------------------------- */
[data-lang-es] { display: none; }

html.lang-es [data-lang-en] { display: none; }
html.lang-es [data-lang-es] { display: revert; }

html.lang-es [data-lang-es].ax-flex        { display: flex; }
html.lang-es [data-lang-es].ax-inline-flex { display: inline-flex; }
html.lang-es [data-lang-es].ax-grid        { display: grid; }
html.lang-es [data-lang-es].ax-block       { display: block; }
html.lang-es [data-lang-es].ax-inline      { display: inline; }

/* ---------------------------------------------------------------------------
   3. SURFACES & DECORATION
   --------------------------------------------------------------------------- */
.ax-dark { background: #0A101C; color: #fff; }

/* Deep hero well with two spectrum blooms */
.ax-hero {
  position: relative;
  background: linear-gradient(165deg, #05080F 0%, #0A101C 42%, #111C30 100%);
  isolation: isolate;
}
.ax-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 55% at 18% 12%, rgba(34, 211, 238, 0.17), transparent 62%),
    radial-gradient(ellipse 55% 60% at 86% 78%, rgba(168, 85, 247, 0.16), transparent 62%),
    radial-gradient(ellipse 70% 40% at 50% 108%, rgba(59, 130, 246, 0.13), transparent 68%);
  pointer-events: none;
}

/* Faint engineering grid — signals "systems company", not "agency" */
.ax-grid-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(44, 62, 92, 0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 62, 92, 0.30) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 35%, transparent 78%);
  pointer-events: none;
}

.ax-band {
  background:
    radial-gradient(ellipse 70% 90% at 12% 50%, rgba(34, 211, 238, 0.10), transparent 60%),
    radial-gradient(ellipse 70% 90% at 88% 50%, rgba(168, 85, 247, 0.10), transparent 60%),
    linear-gradient(135deg, #0A101C 0%, #111C30 100%);
}

/* Top hairline that carries the brand spectrum */
.ax-rule-spectrum {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, #0EA5A5, #22D3EE, #3B82F6, #A855F7, transparent);
  opacity: 0.55;
}

/* ---------------------------------------------------------------------------
   4. TYPE HELPERS
   --------------------------------------------------------------------------- */
.ax-spectrum-text {
  background: linear-gradient(100deg, #22D3EE 0%, #3B82F6 45%, #A855F7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Section eyebrow: uppercase, tracked, with a leading spectrum tick */
.ax-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ax-eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #22D3EE, #A855F7);
}

/* ---------------------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------------------- */
.ax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  border-radius: 0.75rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease,
              background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}

.ax-btn-primary {
  color: #05080F;
  background: linear-gradient(100deg, #22D3EE 0%, #38BDF8 50%, #818CF8 100%);
  box-shadow: 0 10px 30px -12px rgba(34, 211, 238, 0.75);
}
.ax-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px -14px rgba(34, 211, 238, 0.9);
}

.ax-btn-ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
}
.ax-btn-ghost:hover {
  border-color: rgba(34, 211, 238, 0.65);
  background: rgba(34, 211, 238, 0.10);
  transform: translateY(-2px);
}

.ax-btn-solid {
  color: #fff;
  background: #0A101C;
}
.ax-btn-solid:hover { transform: translateY(-2px); background: #111C30; }

.ax-btn-outline {
  color: #0A101C;
  background: transparent;
  border: 1px solid rgba(10, 16, 28, 0.20);
}
.ax-btn-outline:hover { border-color: #3B82F6; color: #3B82F6; }

/* ---------------------------------------------------------------------------
   6. CARDS
   --------------------------------------------------------------------------- */
.ax-card {
  background: #fff;
  border: 1px solid rgba(10, 16, 28, 0.09);
  border-radius: 1rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.ax-card:hover {
  transform: translateY(-5px);
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 0 24px 60px -20px rgba(10, 16, 28, 0.35);
}

.ax-card-dark {
  background: linear-gradient(160deg, rgba(27, 41, 66, 0.85), rgba(17, 28, 48, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.ax-card-dark:hover {
  transform: translateY(-5px);
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 24px 60px -22px rgba(34, 211, 238, 0.35);
}

/* Gradient top-edge accent for the three solution pillars */
.ax-card-top {
  position: relative;
  overflow: hidden;
}
.ax-card-top::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--ax-accent, linear-gradient(90deg, #22D3EE, #A855F7));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ax-card-top:hover::before { transform: scaleX(1); }

/* ---------------------------------------------------------------------------
   7. BADGES & PILLS
   --------------------------------------------------------------------------- */
.ax-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}
.ax-pill-dark {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.ax-pill-cyan {
  color: #0E7490;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.30);
}

.ax-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

/* ---------------------------------------------------------------------------
   8. CODE / TERMINAL / DIAGRAM BLOCKS
   --------------------------------------------------------------------------- */
.ax-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-ligatures: none;
}

.ax-terminal {
  background: #05080F;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.875rem;
  overflow: hidden;
}
.ax-terminal-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ax-terminal-dot { width: 0.65rem; height: 0.65rem; border-radius: 9999px; }

/* Wide ASCII architecture diagrams: scroll inside their own box, never the page */
/* .ax-diagram and .ax-diagram pre lived here. They styled the ASCII box-art
   diagrams, which no page renders any more - see section 17 for what replaced
   them and why. Removed rather than left behind, so nothing tempts a future
   page back into a <pre> diagram. */
@media (min-width: 768px) {
  .ax-diagram pre { font-size: 0.78rem; }
}

/* Scrollbar treatment for dark scrollable regions */
.ax-scroll-dark::-webkit-scrollbar { height: 8px; width: 8px; }
.ax-scroll-dark::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 9999px; }
.ax-scroll-dark::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 9999px; }
.ax-scroll-dark::-webkit-scrollbar-thumb:hover { background: rgba(34, 211, 238, 0.45); }

/* ---------------------------------------------------------------------------
   9. TABLES
   --------------------------------------------------------------------------- */
.ax-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ax-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 34rem; }
.ax-table th {
  text-align: left;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 0.85rem 1rem;
  white-space: nowrap;
}
.ax-table td { padding: 0.85rem 1rem; vertical-align: top; }
.ax-table tbody tr { border-top: 1px solid rgba(10, 16, 28, 0.08); }
.ax-table-dark th { color: rgba(255, 255, 255, 0.55); }
.ax-table-dark td { color: rgba(255, 255, 255, 0.80); }
.ax-table-dark tbody tr { border-top: 1px solid rgba(255, 255, 255, 0.09); }
.ax-table-dark tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

/* ---------------------------------------------------------------------------
   10. NAVIGATION
   --------------------------------------------------------------------------- */
#ax-header {
  transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
  border-bottom: 1px solid transparent;
}
#ax-header.is-scrolled {
  background: rgba(5, 8, 15, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.09);
}

.ax-navlink { position: relative; }
.ax-navlink::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #22D3EE, #A855F7);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ax-navlink:hover::after,
.ax-navlink[aria-current="page"]::after { width: 100%; }

/* Mega-dropdowns. The default panel is centred on its trigger. */
.ax-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) translateX(-50%);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.ax-dropdown-host:hover .ax-dropdown,
.ax-dropdown-host:focus-within .ax-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) translateX(-50%);
}

/* Edge-anchored variants, for the first and last item in the bar. A 41rem
   panel centred on a trigger near the end of the nav runs off the viewport
   at the xl breakpoint, so those two anchor to the trigger's edge (left-0 /
   right-0 in the markup) and drop the centring translate. These must stay
   after the rules above — same specificity, so source order decides. */
.ax-dropdown.is-start,
.ax-dropdown.is-end { transform: translateY(10px); }
.ax-dropdown-host:hover .ax-dropdown.is-start,
.ax-dropdown-host:focus-within .ax-dropdown.is-start,
.ax-dropdown-host:hover .ax-dropdown.is-end,
.ax-dropdown-host:focus-within .ax-dropdown.is-end { transform: translateY(0); }

/* Mobile drawer */
.ax-drawer { transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.ax-drawer.is-open { transform: translateX(0); }

/* ---------------------------------------------------------------------------
   11. SCROLL-REVEAL
   --------------------------------------------------------------------------- */
.ax-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.ax-reveal.is-in { opacity: 1; transform: none; }

.ax-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.ax-stagger.is-in > * { opacity: 1; transform: none; }
.ax-stagger.is-in > *:nth-child(1) { transition-delay: 0.05s; }
.ax-stagger.is-in > *:nth-child(2) { transition-delay: 0.12s; }
.ax-stagger.is-in > *:nth-child(3) { transition-delay: 0.19s; }
.ax-stagger.is-in > *:nth-child(4) { transition-delay: 0.26s; }
.ax-stagger.is-in > *:nth-child(5) { transition-delay: 0.33s; }
.ax-stagger.is-in > *:nth-child(6) { transition-delay: 0.40s; }
.ax-stagger.is-in > *:nth-child(7) { transition-delay: 0.47s; }
.ax-stagger.is-in > *:nth-child(8) { transition-delay: 0.54s; }
.ax-stagger.is-in > *:nth-child(9) { transition-delay: 0.61s; }

/* ---------------------------------------------------------------------------
   12. ACCORDION (FAQ)
   --------------------------------------------------------------------------- */
.ax-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.ax-acc.is-open .ax-acc-panel { grid-template-rows: 1fr; }
.ax-acc-panel > div { overflow: hidden; }
.ax-acc-icon { transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.ax-acc.is-open .ax-acc-icon { transform: rotate(45deg); }

/* ---------------------------------------------------------------------------
   13. PIPELINE / STEPPER
   --------------------------------------------------------------------------- */
.ax-step { position: relative; padding-left: 3.25rem; }
.ax-step::before {
  content: '';
  position: absolute;
  left: 1.09rem;
  top: 2.4rem;
  bottom: -1.75rem;
  width: 2px;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.5), rgba(168, 85, 247, 0.12));
}
.ax-step:last-child::before { display: none; }
.ax-step-num {
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
}

/* The connector draws itself as the reader passes each step. Numbered stages
   with real week ranges are a genuine sequence, so a progress spine encodes
   something true about the content rather than decorating it.

   Scroll-driven, so the browser runs it off the compositor with no script and
   no scroll listener; where animation-timeline is unsupported the rule never
   applies and the static gradient below is what ships, unchanged. This lives in
   the shared stylesheet rather than the homepage one because it has the same
   specificity as the .ax-step::before rule above and so depends on following
   it — and because every page using the stepper should behave alike. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ax-step::before {
      transform-origin: top center;
      animation: axSpineDraw linear both;
      animation-timeline: view();
      animation-range: entry 22% cover 38%;
    }

    @keyframes axSpineDraw {
      from { transform: scaleY(0); }
      to   { transform: scaleY(1); }
    }
  }
}

/* ---------------------------------------------------------------------------
   14. FORMS (contact + ROI gate)
   --------------------------------------------------------------------------- */
.ax-input {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(10, 16, 28, 0.16);
  background: #fff;
  color: #0A101C;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ax-input:focus {
  outline: none;
  border-color: #22D3EE;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.16);
}
.ax-input-dark {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.ax-input-dark::placeholder { color: rgba(255, 255, 255, 0.38); }
.ax-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

/* Range sliders in the ROI calculator */
.ax-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}
.ax-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #22D3EE, #818CF8);
  border: 2px solid #05080F;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.20);
}
.ax-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #22D3EE, #818CF8);
  border: 2px solid #05080F;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   15. LOGO LOCKUP
   ---------------------------------------------------------------------------
   The mark is an image; the "axionalytics" wordmark is live text beside it, so
   it stays crisp at any size and inherits the heading font.

   assets/logo-mark-dark.png is trimmed tight to the artwork, so the negative
   margin the previous asset needed (to claw back its baked-in padding) is gone
   — spacing is now real spacing. Height is set below the old 3.25rem because
   the untrimmed file only filled about 60% of its own box; 2.25rem renders the
   mark at the same optical size the padded version did at 3.25rem.
   --------------------------------------------------------------------------- */
.ax-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.ax-logo img {
  height: 2.25rem;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .ax-logo img { height: 2.5rem; }
}

/* ---------------------------------------------------------------------------
   16. LONG-FORM PROSE
   ---------------------------------------------------------------------------
   Shared by the legal pages and the article pages. Styles bare tags so the
   content itself carries no utility classes — which is what lets an article
   body be authored (or migrated) as plain HTML.
   --------------------------------------------------------------------------- */
.ax-prose {
  color: rgba(10, 16, 28, 0.72);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.ax-prose > *:first-child { margin-top: 0; }
.ax-prose > *:last-child { margin-bottom: 0; }

.ax-prose h2 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #0A101C;
  margin: 3rem 0 1rem;
  scroll-margin-top: 6rem;
}

.ax-prose h3 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: #0A101C;
  margin: 2.5rem 0 0.85rem;
  scroll-margin-top: 6rem;
}

.ax-prose h4 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0A101C;
  margin: 1.75rem 0 0.6rem;
}

.ax-prose p { margin: 0 0 1.25rem; }

.ax-prose strong { color: #0A101C; font-weight: 700; }

.ax-prose a {
  color: #2563EB;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-weight: 500;
}
.ax-prose a:hover { color: #4F46E5; }

.ax-prose ul,
.ax-prose ol { margin: 0 0 1.25rem; padding-left: 1.35rem; }
.ax-prose ul { list-style: disc; }
.ax-prose ol { list-style: decimal; }
.ax-prose li { margin-bottom: 0.5rem; }
.ax-prose li::marker { color: #3B82F6; }

.ax-prose blockquote {
  margin: 1.75rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid #22D3EE;
  color: rgba(10, 16, 28, 0.62);
  font-style: italic;
}

.ax-prose hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid rgba(10, 16, 28, 0.10);
}

.ax-prose code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  border-radius: 0.3rem;
  background: rgba(10, 16, 28, 0.06);
  color: #0A101C;
}

/* Callouts carried over from the pre-2026 blog markup. Kept as class names so
   existing article bodies migrate without a find-and-replace pass. */
.ax-prose .highlight-box,
.ax-prose .pro-tip {
  margin: 2rem 0;
  padding: 1.4rem 1.5rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(10, 16, 28, 0.10);
  background: #F6F8FC;
}

.ax-prose .highlight-box {
  border-left: 3px solid #3B82F6;
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.20);
}

.ax-prose .pro-tip {
  border-left: 3px solid #22D3EE;
  background: rgba(34, 211, 238, 0.06);
  border-color: rgba(34, 211, 238, 0.24);
}

.ax-prose .highlight-box > *:first-child,
.ax-prose .pro-tip > *:first-child { margin-top: 0; }
.ax-prose .highlight-box > *:last-child,
.ax-prose .pro-tip > *:last-child { margin-bottom: 0; }

.ax-prose .highlight-box h4,
.ax-prose .pro-tip h4 { margin-top: 0; margin-bottom: 0.5rem; }

/* Numbered section headings on the legal pages */
.ax-legal h2 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1.4rem;
  margin: 2.75rem 0 0.9rem;
}

/* ---------------------------------------------------------------------------
   17. TABLE OF CONTENTS (sticky, article + legal pages)
   --------------------------------------------------------------------------- */
.ax-toc a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.85rem;
  border-left: 2px solid rgba(10, 16, 28, 0.10);
  color: rgba(10, 16, 28, 0.55);
  font-size: 0.875rem;
  line-height: 1.45;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ax-toc a:hover { color: #2563EB; border-left-color: #3B82F6; }

/* ---------------------------------------------------------------------------
   18. MISC
   --------------------------------------------------------------------------- */
.ax-marquee-track { display: flex; width: max-content; animation: axMarquee 38s linear infinite; }
.ax-marquee:hover .ax-marquee-track { animation-play-state: paused; }

.ax-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ax-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.ax-skip:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.75rem 1.25rem;
  background: #22D3EE;
  color: #05080F;
  font-weight: 700;
  border-radius: 0.5rem;
}

/* ---------------------------------------------------------------------------
   17. DIAGRAM COMPONENTS
   ---------------------------------------------------------------------------
   Replaces the ASCII box-art that used to live in <pre> blocks.

   WHY THE OLD ONES COULD NOT BE SAVED
   The site loads JetBrains Mono from Google Fonts, which serves it subsetted by
   unicode-range: latin, latin-ext, cyrillic, greek, vietnamese. Box drawing
   (U+2500-257F) and geometric shapes (U+25A0-25FF) are in none of those slices,
   so every corner, rule and arrowhead fell back to the system monospace while
   the labels rendered in JetBrains Mono. Two families, two advance widths, one
   <pre> block - the boxes could never line up with the text they enclosed, on
   any machine. It was not a spacing bug and no amount of respacing would have
   fixed it.

   WHAT THESE DO INSTEAD
   Nodes are real elements and their labels are real text, which buys four
   things the box-art could not have: the bilingual engine in section 2 can
   translate them, screen readers read words rather than line-drawing glyphs,
   the layout reflows on a phone instead of scrolling sideways, and search
   engines can index the content.

   Four archetypes cover all ten diagrams on the site:
     .ax-flow    linear pipeline        a sequence, one path through
     .ax-layer   nested containment     a boundary with things inside it
     .ax-branch  divergent outcomes     one state, several exits
     .ax-lanes   converge / diverge     parallel inputs into a shared core

   Every one is built from grid, gap, borders and pseudo-elements. No script, no
   font dependency, and nothing that animates a property that triggers layout.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   16b. LOGO TILE
   ---------------------------------------------------------------------------
   The mark has one correct form: the lifted hub, logo-mark-dark.png. A
   black-hub variant used to exist purely so the mark stayed legible on white
   surfaces, and it was used in the article byline block - which meant the site
   showed two different logos depending on the page section.

   That variant is retired. Where the mark has to sit on a light surface it now
   brings its own dark ground instead, which is the same reasoning already
   applied to the favicon and the social card: the artwork never changes, only
   what sits behind it.
   --------------------------------------------------------------------------- */
.ax-logo-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 0.7rem;
  background: #0A101C;
}

.ax-logo-tile img {
  display: block;
  width: 72%;
  height: 72%;
  object-fit: contain;
}

/* The panel these sit on, so connector labels can mask the rail behind them. */
.ax-dia {
  --ax-dia-bg: #05080F;
  --ax-dia-rail: rgba(34, 211, 238, 0.45);
  --ax-dia-edge: rgba(255, 255, 255, 0.11);
}

/* Articles render inside .ax-prose, which styles ol and ul at a specificity
   these components lose to - decimal markers, a blue ::marker and a 1.35rem
   indent were landing inside every diagram. Each reset below is a two-class
   selector so it wins on specificity rather than on source order, which would
   otherwise break the moment this section were moved. */
.ax-dia .ax-flow,
.ax-dia .ax-layer-items,
.ax-dia .ax-lane-steps,
.ax-dia .ax-branch-outs {
  list-style: none;
  padding-left: 0;
}
.ax-dia .ax-flow > li,
.ax-dia .ax-layer-items > li,
.ax-dia .ax-lane-steps > li { margin-bottom: 0; }
.ax-dia li::marker { color: transparent; }

.ax-dia figcaption {
  margin-top: 1.1rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.42);
  text-align: center;
}

/* --- shared node surface ------------------------------------------------- */
.ax-node {
  background: linear-gradient(160deg, rgba(27, 41, 66, 0.9), rgba(17, 28, 48, 0.9));
  border: 1px solid var(--ax-dia-edge);
  border-radius: 0.7rem;
  padding: 0.9rem 1.05rem;
}

.ax-node-idx {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #22D3EE;
  margin-bottom: 0.3rem;
}

.ax-node-name {
  display: block;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.28;
  color: #fff;
}

.ax-node-det {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.76rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.56);
}

/* Semantic variants. Amber is reserved for the human gate, because a person
   stopping the machine is the thing these diagrams exist to show. */
.ax-node-gate { border-color: rgba(245, 158, 11, 0.36); background: rgba(245, 158, 11, 0.06); }
.ax-node-gate .ax-node-idx { color: #F59E0B; }
.ax-node-stop { border-color: rgba(244, 63, 94, 0.34); background: rgba(244, 63, 94, 0.05); }
.ax-node-stop .ax-node-idx { color: #F43F5E; }
.ax-node-go { border-color: rgba(16, 185, 129, 0.32); background: rgba(16, 185, 129, 0.05); }
.ax-node-go .ax-node-idx { color: #10B981; }

/* Entry and exit points: not stages, so they are drawn as open terminals. */
.ax-term {
  display: block;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}
.ax-term-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
}

/* --- 1. LINEAR PIPELINE -------------------------------------------------- */
.ax-flow {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 2.2rem;
  max-width: 34rem;
}

/* The rail is drawn above each step rather than below, so the first step has no
   orphan tail and the last needs no special case. */
.ax-flow > li { position: relative; }

.ax-flow > li + li::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -2.2rem;
  height: 2.2rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.15), var(--ax-dia-rail));
}

/* The condition under which control reaches this step, sitting on its rail. */
.ax-flow-in {
  position: absolute;
  top: -1.1rem;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: var(--ax-dia-bg);
  padding: 0 0.55rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.63rem;
  white-space: nowrap;
  color: #10B981;
}
.ax-flow-in-warn { color: #F59E0B; }
.ax-flow-in-stop { color: #F43F5E; }

/* --- 2. NESTED CONTAINMENT ----------------------------------------------- */
.ax-layer {
  border: 1px solid var(--ax-dia-edge);
  border-radius: 0.85rem;
  padding: 1.1rem;
  background: rgba(255, 255, 255, 0.02);
}

/* The boundary between two planes carries the protocol that crosses it. */
.ax-layer-join {
  display: grid;
  gap: 0.15rem;
  justify-items: center;
  padding: 0.85rem 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.42);
  text-align: center;
  position: relative;
}
.ax-layer-join::before,
.ax-layer-join::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 1px;
  height: 0.7rem;
  background: var(--ax-dia-rail);
}
.ax-layer-join::before { top: 0; }
.ax-layer-join::after { bottom: 0; }

.ax-layer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--ax-dia-edge);
}
.ax-layer-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #22D3EE;
}
.ax-layer-note {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.38);
}
.ax-layer-owned .ax-layer-title { color: #A855F7; }

.ax-layer-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
.ax-layer-items > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
}
.ax-layer-items > li::before {
  content: '';
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 999px;
  background: #22D3EE;
  opacity: 0.7;
  margin-top: 0.5rem;
}
.ax-layer-items b { color: #fff; font-weight: 600; }

/* --- 3. DIVERGENT OUTCOMES ----------------------------------------------- */
.ax-branch-outs {
  display: grid;
  gap: 1rem;
  position: relative;
  padding-top: 2.4rem;
}

/* One horizontal rail across the outcomes with a drop into each, drawn with
   pseudo-elements rather than per-child borders so the geometry stays correct
   however many outcomes a given diagram has. */
.ax-branch-outs::before {
  content: '';
  position: absolute;
  top: 1.2rem;
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--ax-dia-rail);
}
.ax-branch-outs::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  height: 1.2rem;
  width: 1px;
  background: var(--ax-dia-rail);
}
.ax-branch-out { position: relative; }
.ax-branch-out::before {
  content: '';
  position: absolute;
  top: -1.2rem;
  left: 50%;
  height: 1.2rem;
  width: 1px;
  background: var(--ax-dia-rail);
}
@media (min-width: 640px) {
  .ax-branch-outs { grid-auto-flow: column; grid-auto-columns: 1fr; }
}

/* Stacked on a phone the shared rail is meaningless, so it is withdrawn and
   each outcome keeps only its own short drop. */
@media (max-width: 639px) {
  .ax-branch-outs::before,
  .ax-branch-outs::after { display: none; }
  .ax-branch-out::before { left: 1.25rem; }
}

.ax-branch-label {
  display: inline-block;
  margin-bottom: 0.45rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.63rem;
  color: #10B981;
}
.ax-branch-label-stop { color: #F43F5E; }
.ax-branch-label-warn { color: #F59E0B; }

/* --- 4. CONVERGE / DIVERGE ----------------------------------------------- */
.ax-lanes {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .ax-lanes { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}
.ax-lane-src {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.63rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.55rem;
}
.ax-lane-steps {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.28rem;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  counter-reset: axlane;
}
.ax-lane-steps > li {
  counter-increment: axlane;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
}
.ax-lane-steps > li::before {
  content: counter(axlane);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.28);
}
.ax-lane-human { color: #F59E0B; }

/* The shared core everything converges into. */
.ax-core {
  margin-top: 2.4rem;
  position: relative;
  border: 1px solid rgba(34, 211, 238, 0.3);
  border-radius: 0.85rem;
  background: rgba(34, 211, 238, 0.05);
  padding: 1.1rem 1.2rem;
}
.ax-core::before {
  content: '';
  position: absolute;
  top: -2.4rem;
  left: 50%;
  height: 2.4rem;
  width: 1px;
  background: var(--ax-dia-rail);
}

/* The old <pre> diagrams carried min-width: max-content, which forced a
   sideways scroll on every phone. These have no minimum width at all, so the
   scroll container around them never engages - it stays only as a safety net
   for genuinely wide tables. */
.ax-dia .ax-node,
.ax-dia .ax-layer { min-width: 0; }

/* ---------------------------------------------------------------------------
   18. INSTRUMENTS
   ---------------------------------------------------------------------------
   Six devices that show a claim the prose already makes. They exist because the
   site's graphic vocabulary had collapsed to four generic devices - an eyebrow,
   an icon-card trio, a table, a flow diagram - and the things that are actually
   ours were used once each.

   The rule they follow: a graphic here must tell a reader something the
   sentence next to it cannot. Decoration was the easy answer to "our graphics
   are repetitive" and it would have made the site look like every other AI
   vendor while saying nothing new.

   Three are static markup (.ax-spec, .ax-trace, .ax-diff) and three are
   operable (.ax-eg, .ax-rc, .ax-cls), driven by axio-instruments.js. Every one
   degrades: with scripting off the operable three render their default state as
   plain content rather than an empty frame.
   --------------------------------------------------------------------------- */

/* --- shared shell -------------------------------------------------------- */
.ax-inst {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.8rem;
  background: #070B14;
  overflow: hidden;
  font-size: 0.95rem;
}
.ax-inst-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.95rem;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.ax-inst-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.6);
}

/* --- 1. specimen --------------------------------------------------------- */
.ax-spec-tab {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.55);
}
.ax-spec-tab .ax-spec-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #10B981;
  flex: none;
}
.ax-spec-tab .ax-spec-meta { margin-left: auto; color: rgba(255, 255, 255, 0.28); }
.ax-spec pre {
  margin: 0;
  padding: 0.9rem 1rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
  overflow-x: auto;
}
.ax-tok-k { color: #A855F7; }
.ax-tok-s { color: #10B981; }
.ax-tok-n { color: #22D3EE; }
.ax-tok-c { color: rgba(255, 255, 255, 0.28); }

/* --- 2. trace waterfall -------------------------------------------------- */
.ax-trace { display: grid; gap: 0.4rem; padding: 1rem 0.95rem; }
.ax-trace-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr 3.6rem;
  gap: 0.7rem;
  align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.64rem;
  color: rgba(255, 255, 255, 0.5);
}
.ax-trace-track {
  position: relative;
  height: 1.05rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0.25rem;
}
.ax-trace-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 0.25rem;
  background: #22D3EE;
  opacity: 0.75;
}
.ax-trace-bar.is-gate { background: #F59E0B; opacity: 0.85; }
.ax-trace-bar.is-write { background: #10B981; opacity: 0.8; }
.ax-trace-ms { text-align: right; color: rgba(255, 255, 255, 0.35); }
.ax-trace-row.is-gate .ax-trace-label,
.ax-trace-row.is-gate .ax-trace-ms { color: #F59E0B; }
.ax-trace-key {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: 0 0.95rem 0.9rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.4);
}
.ax-trace-key i {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 2px;
  margin-right: 0.35rem;
}

/* --- 3. blast-radius diff ------------------------------------------------ */
.ax-diff {
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: 0.7rem;
  background: rgba(245, 158, 11, 0.05);
  overflow: hidden;
}
.ax-diff-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(245, 158, 11, 0.22);
}
.ax-diff-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #F59E0B;
}
.ax-diff-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.64rem;
  color: rgba(255, 255, 255, 0.5);
}
.ax-diff-rows { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.66rem; }
.ax-diff-row {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.5rem;
  padding: 0.3rem 1rem;
  color: rgba(255, 255, 255, 0.6);
}
.ax-diff-row.is-rm { background: rgba(244, 63, 94, 0.07); color: rgba(255, 255, 255, 0.5); }
.ax-diff-row.is-add { background: rgba(16, 185, 129, 0.07); color: rgba(255, 255, 255, 0.72); }
.ax-diff-sign { color: rgba(255, 255, 255, 0.35); }
.ax-diff-row.is-rm .ax-diff-sign { color: #F43F5E; }
.ax-diff-row.is-add .ax-diff-sign { color: #10B981; }
.ax-diff-more {
  padding: 0.35rem 1rem 0.6rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.3);
}
.ax-diff-foot {
  padding: 0.7rem 1rem;
  border-top: 1px solid rgba(245, 158, 11, 0.22);
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}
.ax-diff-chip {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}
.ax-diff-chip.is-go { background: rgba(16, 185, 129, 0.16); color: #10B981; }
.ax-diff-pin {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
}

/* --- 4. egress inspector ------------------------------------------------- */
.ax-eg-sw {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  border: 1px solid rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.ax-eg-sw[aria-checked="false"] {
  border-color: rgba(244, 63, 94, 0.5);
  background: rgba(244, 63, 94, 0.12);
  color: #F43F5E;
}
.ax-eg-sw .ax-led { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: currentColor; }
.ax-eg-row {
  display: grid;
  grid-template-columns: 1fr 8.5rem 5.4rem;
  gap: 0.8rem;
  align-items: center;
  padding: 0.5rem 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.64rem;
}
.ax-eg-row:last-child { border-bottom: 0; }
.ax-eg-dest { color: rgba(255, 255, 255, 0.72); display: block; }
.ax-eg-payload { color: rgba(255, 255, 255, 0.3); display: block; font-size: 0.6rem; margin-top: 0.1rem; }
.ax-eg-track {
  position: relative;
  height: 1.5rem;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}
.ax-eg-wall { position: absolute; top: 0; bottom: 0; right: 2.6rem; width: 2px; background: #F59E0B; opacity: 0.75; }
.ax-eg-pkt {
  position: absolute;
  top: 0.35rem;
  left: 0;
  height: 0.8rem;
  width: 1.6rem;
  border-radius: 0.15rem;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.2), #22D3EE);
  transition: left 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.ax-eg-verdict {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: right;
}
.ax-eg-row.is-allow .ax-eg-verdict { color: #10B981; }
.ax-eg-row.is-deny .ax-eg-verdict { color: #F43F5E; }
.ax-eg-row.is-leak .ax-eg-verdict { color: #F59E0B; }
.ax-eg-row.is-deny .ax-eg-pkt { background: linear-gradient(90deg, rgba(244, 63, 94, 0.2), #F43F5E); }
.ax-eg-row.is-leak .ax-eg-pkt { background: linear-gradient(90deg, rgba(245, 158, 11, 0.2), #F59E0B); }
.ax-eg-foot {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.8rem 0.95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.02);
}
.ax-eg-lab { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.64rem; color: rgba(255, 255, 255, 0.35); }
.ax-eg-total {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.35rem;
  font-weight: 700;
  color: #10B981;
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}
.ax-eg-total.is-hot { color: #F43F5E; }
.ax-eg-note {
  padding: 0 0.95rem 0.8rem;
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.28);
}

/* --- 5. roster compiler -------------------------------------------------- */
.ax-rc-roles { margin-left: auto; display: flex; gap: 0.3rem; flex-wrap: wrap; }
.ax-rc-role {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.ax-rc-role[aria-pressed="true"] {
  border-color: rgba(168, 85, 247, 0.6);
  background: rgba(168, 85, 247, 0.16);
  color: #C4B5FD;
}
.ax-rc-legend,
.ax-rc-tool {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 0.6rem;
  align-items: center;
}
.ax-rc-legend {
  padding: 0.6rem 0.95rem 0.2rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.05em;
}
.ax-rc-legend span:not(:first-child) { width: 1.5rem; text-align: center; }
.ax-rc-grid { display: grid; gap: 0.35rem; padding: 0.4rem 0.95rem 0.9rem; }
.ax-rc-tool {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.64rem;
  padding: 0.28rem 0;
  transition: opacity 0.22s ease;
}
.ax-rc-name { color: rgba(255, 255, 255, 0.72); }
.ax-rc-tool.is-out { opacity: 0.32; }
.ax-rc-tool.is-out .ax-rc-name { color: rgba(255, 255, 255, 0.45); }
.ax-rc-f {
  width: 1.5rem;
  text-align: center;
  font-size: 0.58rem;
  font-weight: 700;
  border-radius: 0.2rem;
  padding: 0.1rem 0;
}
.ax-rc-f.is-p { background: rgba(34, 211, 238, 0.16); color: #22D3EE; }
.ax-rc-f.is-t { background: rgba(59, 130, 246, 0.16); color: #3B82F6; }
.ax-rc-f.is-r { background: rgba(168, 85, 247, 0.18); color: #A855F7; }
.ax-rc-f.is-off { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.22); }
.ax-rc-out {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(16, 185, 129, 0.05);
  padding: 0.8rem 0.95rem;
}
.ax-rc-out-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  color: #10B981;
  font-weight: 700;
  letter-spacing: 0.07em;
}
.ax-rc-count { margin-left: auto; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.ax-rc-list {
  margin: 0.5rem 0 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.75;
  word-break: break-word;
}
.ax-rc-why {
  padding: 0.7rem 0.95rem;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.32);
}

/* --- 6. classifier console ----------------------------------------------- */
/* The router's four states, operable. Picking an utterance routes it, and the
   fourth state is the one the device exists to show: a classifier with an
   explicit AMBIGUOUS branch was designed to be wrong safely. */
.ax-cls-asks { display: grid; gap: 0.4rem; padding: 0.9rem 0.95rem 0.6rem; }
.ax-cls-ask {
  text-align: left;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.45rem;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.ax-cls-ask:hover { border-color: rgba(34, 211, 238, 0.4); color: rgba(255, 255, 255, 0.8); }
.ax-cls-ask[aria-pressed="true"] {
  border-color: rgba(34, 211, 238, 0.6);
  background: rgba(34, 211, 238, 0.09);
  color: #fff;
}
.ax-cls-ask::before {
  content: '\203A';
  color: #22D3EE;
  margin-right: 0.5rem;
  font-weight: 700;
}

.ax-cls-states {
  display: grid;
  gap: 0.4rem;
  padding: 0.6rem 0.95rem 0.9rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .ax-cls-states { grid-template-columns: repeat(4, 1fr); } }
.ax-cls-state {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.5rem;
  padding: 0.6rem 0.65rem;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
  opacity: 0.42;
}
.ax-cls-state.is-on { opacity: 1; border-color: rgba(16, 185, 129, 0.55); background: rgba(16, 185, 129, 0.09); }
.ax-cls-state.is-on.is-halt { border-color: rgba(245, 158, 11, 0.6); background: rgba(245, 158, 11, 0.1); }
.ax-cls-code {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.25rem;
}
.ax-cls-state.is-on .ax-cls-code { color: #10B981; }
.ax-cls-state.is-on.is-halt .ax-cls-code { color: #F59E0B; }
.ax-cls-what { display: block; font-size: 0.66rem; line-height: 1.45; color: rgba(255, 255, 255, 0.55); }

.ax-cls-out {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding: 0.85rem 0.95rem;
  background: rgba(255, 255, 255, 0.02);
}
.ax-cls-verdict {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #10B981;
  margin-bottom: 0.35rem;
}
.ax-cls-out.is-halt .ax-cls-verdict { color: #F59E0B; }
.ax-cls-detail { margin: 0; font-size: 0.72rem; line-height: 1.6; color: rgba(255, 255, 255, 0.62); }
.ax-cls-reply {
  display: block;
  margin-top: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-left: 2px solid #F59E0B;
  background: rgba(245, 158, 11, 0.07);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.64rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

/* --- caption shared across all six --------------------------------------- */
.ax-inst-cap {
  margin-top: 1.1rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.42);
  text-align: center;
}