/* ==========================================================================
   Self-hosted faces. Latin subsets, variable, served from static/fonts/.
   Replaces the chained @import that used to sit in custom.css.
   ========================================================================== */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/archivo-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* ── Grounds. Graded, so a section boundary is legible without a rule ──── */
  --ax-bg-0: #0a0f1c;                     /* page ground, hero, footer */
  --ax-bg-1: #0d1424;                     /* alternate section ground */
  --ax-bg-2: #141b2d;                     /* raised panel, sticky header */
  --ax-bg-3: #1a2233;                     /* card surface */
  --ax-bg-console: #060a13;               /* darkest: console and trust panels */
  --ax-bg-inset: rgba(0, 0, 0, 0.28);     /* code block inside a card */

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --ax-hairline: #18202e;                 /* row dividers inside a panel */
  --ax-border: #2a3544;                   /* card and panel edge */
  --ax-border-strong: #38465a;            /* interactive edge, hover, focus */

  /* ── Text. Ratios measured against --ax-bg-0 ──────────────────────────── */
  --ax-text: #ffffff;                     /* headlines */
  --ax-text-body: #cbd5e1;                /* long-form body copy, 13.0:1 */
  --ax-text-muted: #94a3b8;               /* secondary copy, sublines, 7.48:1 */
  --ax-text-dim: #6f7f97;                 /* captions, meta, 4.71:1 */
  --ax-text-faint: #64748b;               /* NON-TEXT ONLY: glyphs, rules */

  /* ── Accent. Six permitted roles, listed in the design spec ───────────── */
  --ax-accent: #22d3ee;                   /* 10.6:1, the one attention colour */
  --ax-accent-deep: #06b6d4;              /* 7.91:1, fills and pressed states */
  --ax-accent-ink: #061019;               /* text sitting on an accent fill */
  --ax-accent-soft: rgba(34, 211, 238, 0.1);
  --ax-accent-line: rgba(34, 211, 238, 0.32);
  --ax-accent-halo: rgba(34, 211, 238, 0.16);  /* max glow alpha, do not exceed */

  /* ── Semantic ─────────────────────────────────────────────────────────── */
  --ax-ok: #10b981;                       /* done, gate passed, 7.56:1 */
  --ax-warn: #f59e0b;                     /* blocked, needs a human */
  --ax-danger: #f87171;                   /* cannot, denied */

  /* ── Type families ────────────────────────────────────────────────────── */
  --ax-font-display: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ax-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ax-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Type scale. Fluid where it matters, fixed elsewhere ──────────────── */
  --ax-t-display: clamp(2.5rem, 1.6rem + 3.4vw, 3.75rem);
  --ax-t-h1: clamp(2.25rem, 1.7rem + 2.2vw, 3rem);
  --ax-t-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.375rem);
  --ax-t-h3: 1.25rem;
  --ax-t-h4: 1rem;
  --ax-t-lead: 1.1875rem;
  --ax-t-body: 1rem;
  --ax-t-sm: 0.875rem;
  --ax-t-xs: 0.8125rem;
  --ax-t-eyebrow: 0.75rem;
  --ax-t-microlabel: 0.6875rem;
  --ax-t-code: 0.875rem;
  --ax-t-code-inline: 0.875em;
  --ax-t-stat: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);

  /* ── Spacing. 4px base, 8px rhythm ────────────────────────────────────── */
  --ax-s-1: 0.25rem;  --ax-s-2: 0.5rem;   --ax-s-3: 0.75rem;  --ax-s-4: 1rem;
  --ax-s-5: 1.5rem;   --ax-s-6: 2rem;     --ax-s-7: 2.5rem;   --ax-s-8: 3rem;
  --ax-s-9: 4rem;     --ax-s-10: 5rem;    --ax-s-11: 7rem;    --ax-s-12: 9rem;

  /* ── Section rhythm. Two values, no exceptions ────────────────────────── */
  --ax-section-y: 7rem;
  --ax-section-y-sm: 4rem;
  --ax-block-gap: 3rem;
  --ax-card-gap: 1.25rem;

  /* ── Measure ──────────────────────────────────────────────────────────── */
  --ax-wrap: 78rem;
  --ax-wrap-pad: 1.25rem;
  --ax-measure: 34rem;
  --ax-measure-lead: 42rem;

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --ax-r-xs: 3px;
  --ax-r-sm: 6px;
  --ax-r-md: 10px;
  --ax-r-lg: 14px;
  --ax-r-xl: 18px;

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --ax-bw: 1px;
  --ax-bw-accent: 3px;
  --ax-bw-bracket: 2px;

  /* ── Elevation. On a dark UI that is a lighter ground plus a long shadow ─ */
  --ax-e-0: none;
  --ax-e-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ax-e-2: 0 8px 24px -12px rgba(0, 0, 0, 0.65);
  --ax-e-3: 0 40px 80px -40px rgba(0, 0, 0, 0.85);
  --ax-glow-accent: 0 0 0 1px var(--ax-accent-line), 0 8px 28px -10px var(--ax-accent-halo);
  --ax-focus: 0 0 0 2px var(--ax-bg-0), 0 0 0 4px var(--ax-accent);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ax-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ax-dur-1: 120ms;
  --ax-dur-2: 180ms;
  --ax-dur-3: 420ms;
  --ax-lift: -2px;

  /* ── Legacy aliases. Retire once the polish pass finishes ─────────────── */
  --color-bg: var(--ax-bg-0);
  --color-bg-light: var(--ax-bg-2);
  --color-bg-card: var(--ax-bg-3);
  --color-border: var(--ax-border);
  --color-cyan: var(--ax-accent);
  --color-cyan-dark: var(--ax-accent-deep);
  --color-text: var(--ax-text);
  --color-text-muted: var(--ax-text-muted);
  --color-text-dim: var(--ax-text-dim);

  /* Typography */
  --font-sans: var(--ax-font-sans);
  --font-mono: var(--ax-font-mono);

  /* Font sizes - balanced modular scale */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 2.75rem;    /* 44px */
  --text-6xl: 3.5rem;     /* 56px */

  /* Font weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Line heights */
  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tight: -0.035em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;

  /* Spacing system (8px base unit) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-20: 10rem;

  /* Container widths */
  --container-xs: 640px;
  --container-sm: 768px;
  --container-md: 1024px;
  --container-lg: 1280px;
  --container-xl: 1400px;
}

/* ==========================================================================
   Aixgo primitives. Every bespoke section is assembled from these seven.
   ========================================================================== */

/* 1. Eyebrow: numbered index chip plus letter-spaced mono caps. */
.ax-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ax-accent);
}

.ax-eyebrow__num {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  border-radius: var(--ax-r-xs);
  background: var(--ax-accent);
  color: var(--ax-accent-ink);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.ax-eyebrow--quiet { color: var(--ax-text-muted); }

/* 2. Micro-label: the structural mono caps line. Column heads, sub-sections. */
.ax-microlabel {
  font-family: var(--ax-font-mono);
  font-size: var(--ax-t-microlabel);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ax-text-dim);
}

/* 3. Accent underline rule: the headline underscore. */
.ax-rule {
  display: block;
  width: 88px;
  height: 4px;
  border-radius: 2px;
  background: var(--ax-accent);
  margin-top: var(--ax-s-5);
}

.ax-rule--wide { width: 140px; }

/* 4. Left edge bar: the accent edge, and the callout marker. */
.ax-edge {
  position: relative;
  padding-left: var(--ax-s-5);
}

.ax-edge::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--ax-bw-accent);
  border-radius: 2px;
  background: var(--ax-accent);
}

.ax-edge--section::before {
  top: 0;
  bottom: auto;
  height: 190px;
}

/* 5. Dot grid: the banner texture. */
.ax-dotgrid {
  background-image: radial-gradient(rgba(148, 163, 184, 0.11) 1px, transparent 1.4px);
  background-size: 24px 24px;
}

.ax-dotgrid--fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
}

/* 6. Console framing: corner brackets. */
.ax-console { position: relative; }

.ax-console::before,
.ax-console::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: var(--ax-bw-bracket) solid var(--ax-accent);
  z-index: 2;
}

.ax-console::before {
  top: -5px;
  left: -5px;
  border-right: 0;
  border-bottom: 0;
}

.ax-console::after {
  bottom: -5px;
  right: -5px;
  border-left: 0;
  border-top: 0;
}

/* 7. Accent halo: replaces the 50px button glow and the 15% hero ellipse. */
.ax-halo {
  background: radial-gradient(58% 62% at 50% 0%, var(--ax-accent-halo), transparent 70%);
}

/* Shared section shell. The ground change is the divider. */
.ax-section {
  position: relative;
  padding-block: var(--ax-section-y);
  border-top: 1px solid var(--ax-hairline);
  background: var(--ax-bg-0);
}

.ax-section--alt { background: var(--ax-bg-1); }
.ax-section--deep { background: var(--ax-bg-console); }

.ax-wrap {
  position: relative;
  max-width: var(--ax-wrap);
  margin: 0 auto;
  padding-inline: var(--ax-s-6);
  z-index: 1;
}

.ax-section__intro { max-width: var(--ax-measure-lead); }

.ax-section__intro h2 {
  margin-top: var(--ax-s-4);
  font-family: var(--ax-font-display);
  font-size: var(--ax-t-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ax-text);
}

.ax-section__intro p {
  margin-top: var(--ax-s-4);
  font-size: var(--ax-t-lead);
  line-height: 1.62;
  color: var(--ax-text-muted);
}

/* One code-block component, with a filename bar. */
.ax-codeblock {
  position: relative;
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-md);
  background: var(--ax-bg-console);
  overflow: hidden;
}

.ax-codeblock__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ax-s-3);
  padding: 0.5rem 0.875rem;
  background: var(--ax-bg-2);
  border-bottom: 1px solid var(--ax-border);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-t-microlabel);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ax-text-dim);
}

.ax-codeblock pre {
  margin: 0;
  padding: 1.125rem 1.25rem;
  overflow-x: auto;
  background: none;
  border: 0;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-t-code);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ax-text-body);
  scrollbar-width: thin;
}

.ax-codeblock__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--ax-border-strong);
  border-radius: var(--ax-r-sm);
  background: transparent;
  color: var(--ax-text-muted);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-t-microlabel);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--ax-dur-1) var(--ax-ease), border-color var(--ax-dur-1) var(--ax-ease);
}

.ax-codeblock__copy:hover {
  color: var(--ax-accent);
  border-color: var(--ax-accent);
}

.ax-codeblock__copy[data-copied="true"] {
  color: var(--ax-ok);
  border-color: var(--ax-ok);
}

/* One card component, with real elevation. Hover never turns the edge cyan. */
.ax-card {
  background: var(--ax-bg-3);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-lg);
  padding: var(--ax-s-5);
  box-shadow: var(--ax-e-1);
  transition:
    border-color var(--ax-dur-1) var(--ax-ease),
    box-shadow var(--ax-dur-2) var(--ax-ease),
    transform var(--ax-dur-2) var(--ax-ease);
}

.ax-card:hover {
  border-color: var(--ax-border-strong);
  box-shadow: var(--ax-e-2);
  transform: translateY(var(--ax-lift));
}

.ax-card :where(h2, h3) {
  font-family: var(--ax-font-display);
  font-size: var(--ax-t-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ax-text);
}

.ax-card p {
  margin-top: var(--ax-s-2);
  font-size: var(--ax-t-sm);
  line-height: 1.55;
  color: var(--ax-text-muted);
}

/* Buttons. */
.ax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.375rem;
  border-radius: var(--ax-r-md);
  border: 1px solid transparent;
  font-family: var(--ax-font-sans);
  font-size: var(--ax-t-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--ax-dur-1) var(--ax-ease),
    border-color var(--ax-dur-1) var(--ax-ease),
    color var(--ax-dur-1) var(--ax-ease),
    box-shadow var(--ax-dur-2) var(--ax-ease),
    transform var(--ax-dur-2) var(--ax-ease);
}

.ax-btn--primary {
  background: var(--ax-accent);
  color: var(--ax-accent-ink);
  box-shadow: var(--ax-e-1);
}

.ax-btn--primary:hover {
  background: var(--ax-accent-deep);
  color: var(--ax-accent-ink);
  transform: translateY(var(--ax-lift));
  box-shadow: var(--ax-glow-accent);
}

.ax-btn--secondary {
  background: transparent;
  border-color: var(--ax-border-strong);
  color: var(--ax-text);
}

.ax-btn--secondary:hover {
  border-color: var(--ax-accent);
  color: var(--ax-accent);
  transform: translateY(var(--ax-lift));
}

.ax-btn:active { transform: none; }

/* Focus. The double ring survives on every ground, including bg-console. */
:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ax-focus);
  border-radius: var(--ax-r-sm);
}

/* Screen-reader-only text. Used for "(opens in a new tab)" and column heads
   that are hidden visually on narrow viewports. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Headline ragging. The cheapest typographic upgrade available. */
:where(h1, h2, h3, h4) { text-wrap: balance; }
p { text-wrap: pretty; }

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

@media (max-width: 768px) {
  .ax-section { padding-block: var(--ax-section-y-sm); }
  .ax-wrap { padding-inline: var(--ax-wrap-pad); }
}

html {
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
  position: relative;
  width: 100%;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Wide container for feature tables - supports 4 columns */
.container-narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Header. One row, 64px, translucent over whatever ground scrolls under it. */
header {
  position: sticky;
  top: 0;
  background-color: color-mix(in srgb, var(--ax-bg-0) 82%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--ax-hairline);
  z-index: 100;
}

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  margin-right: 1.5rem;
}

.logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}

.logo img {
  height: 2rem;
  width: auto;
  max-width: 200px;
  display: block;
  transition: opacity var(--ax-dur-1) var(--ax-ease);
}

.logo a:hover img { opacity: 0.85; }

.nav-menu {
  display: flex;
  list-style: none;
  gap: 2rem;
  align-items: center;
}

.nav-menu a {
  position: relative;
  display: block;
  padding-block: 1.25rem;
  color: var(--ax-text-muted);
  text-decoration: none;
  transition: color var(--ax-dur-1) var(--ax-ease);
  font-size: var(--ax-t-sm);
  font-weight: 500;
  /* Two-word labels wrap to two lines and push the header to three rows in the
     band between the hamburger breakpoint and 1024px. */
  white-space: nowrap;
}

.nav-menu a:hover { color: var(--ax-text); }

/* Current section. The underline is the only place the accent appears in the
   header, so the page you are on is the one thing it points at. */
.nav-menu a[aria-current] {
  color: var(--ax-text);
}

.nav-menu a[aria-current]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--ax-accent);
}

/* Between the hamburger at 768px and 1024px, five labels plus the logo and the
   call to action no longer fit at a 2rem gap. Tighten the gap rather than let
   the row wrap or overflow. */
@media (max-width: 1023px) {
  .nav-menu { gap: 1.125rem; }
}

/* Navigation GitHub Icon (desktop: icon-only ghost; mobile: labeled full-width) */
.nav-github-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding-block: 0;
  border: 1px solid transparent;
  border-radius: var(--ax-r-sm);
  transition:
    border-color var(--ax-dur-1) var(--ax-ease),
    color var(--ax-dur-1) var(--ax-ease);
  color: var(--ax-text-muted);
}

.nav-github-icon:hover {
  border-color: var(--ax-border-strong);
  color: var(--ax-text);
}

.nav-github-icon svg {
  flex-shrink: 0;
}

.nav-github-icon .nav-label {
  display: none;
}

/* Get Started CTA Button */
.nav-cta {
  margin-left: 0.5rem;
}

/* The header call to action takes the secondary treatment. It is persistent
   and the hero call to action is not, so filling both meant two equally loud
   primaries competed above the fold on every page. */
.btn-get-started {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  padding-block: 0.5rem;
  background: transparent;
  border: 1px solid var(--ax-border-strong);
  border-radius: var(--ax-r-sm);
  color: var(--ax-text);
  font-weight: 600;
  transition:
    border-color var(--ax-dur-1) var(--ax-ease),
    color var(--ax-dur-1) var(--ax-ease);
}

.btn-get-started:hover {
  border-color: var(--ax-accent);
  color: var(--ax-accent);
}

/* Footer. Its own ground and a hairline, so it reads as the end of the page
   rather than one more section. The 8rem top margin it used to carry was
   compensating for sections that had no bottom padding of their own. */
footer {
  padding: 4rem 0 2rem;
  border-top: 1px solid var(--ax-hairline);
  background: var(--ax-bg-1);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Brand Column */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-logo {
  margin-bottom: 0.75rem;
}

.footer-logo img {
  height: 1.75rem;
  width: auto;
  max-width: 170px;
  display: block;
  opacity: 0.8;
  transition: opacity var(--ax-dur-1) var(--ax-ease);
}

.footer-logo img:hover { opacity: 1; }

/* The descriptor after a product name in the Products column. Its own
   line, dim rather than translucent: opacity computed to ~3.4:1 on this
   ground, below AA for text this small. */
.footer-note {
  display: block;
  font-size: var(--ax-t-eyebrow);
  color: var(--ax-text-dim);
  margin-top: var(--ax-s-1);
}

.footer-tagline {
  font-size: var(--ax-t-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.footer-copyright {
  font-size: 0.875rem;
  color: var(--color-text-dim);
  margin: 0.5rem 0 0.25rem 0;
}

.footer-license {
  margin-top: var(--ax-s-2);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-t-microlabel);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ax-text-dim);
}

/* Footer Columns */
.footer-column {
  display: flex;
  flex-direction: column;
  /* Tighter than the link pitch below it, so the column label binds to its
     list instead of reading as the first item of it. */
  gap: 0.625rem;
}

.footer-heading {
  margin: 0;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-t-microlabel);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ax-text-dim);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer-links a {
  color: var(--ax-text-muted);
  text-decoration: none;
  font-size: var(--ax-t-sm);
  transition: color 0.2s;
  display: inline-block;
}

.footer-links a:hover .footer-note {
  color: var(--ax-text-muted);
}

.footer-links a:hover {
  color: var(--ax-text);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 700;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.7125rem 1.425rem;
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-primary:hover {
  background-color: var(--color-cyan);
  color: var(--color-bg);
  border-color: var(--color-cyan);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 211, 238, 0.3);
}

.btn-secondary {
  background: linear-gradient(135deg, var(--color-cyan) 0%, #06b6d4 100%);
  color: var(--color-bg);
  border: none;
  box-shadow: 0 2px 8px rgba(34, 211, 238, 0.2);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 211, 238, 0.3);
  color: var(--color-bg);
}

/* The homepage sections that used to live here are gone. layouts/index.html
   is now assembled from the shared section primitives in sections.css: the
   hero, the stat rail, the step spine, the comparison card, the table, the
   icon card and the release card. What sat here was a parallel set of
   one-page-only components for the same jobs. */

/* The index and article page chrome that used to live here is gone with it.
   _default/list.html and _default/single.html are built from the shared
   section shell now: the compact hero, the card, the micro-label meta line
   and the tag chip, all in sections.css. Prose tables live in custom.css. */

/* ==========================================================================
   Hamburger Menu Base Styles
   Hidden on desktop, shown on mobile via media query
   ========================================================================== */

/* Hidden without `display: none`, which would drop it out of the tab order and
   leave the drawer openable by pointer only. Above the hamburger breakpoint
   there is no drawer, so it goes back to `display: none` rather than sitting
   in the tab order as an invisible stop. */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 769px) {
  .nav-toggle { display: none; }
}

/* 44x44 is the smallest target a thumb reliably hits. The bars are 24px wide;
   the rest is padding, which is why the box is sized rather than the glyph. */
.nav-hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 5px;
  z-index: 101;
  width: 44px;
  height: 44px;
  margin-right: -10px;
}

.nav-hamburger span {
  width: 24px;
  height: 2px;
  background-color: var(--ax-text);
  transition: transform var(--ax-dur-2) var(--ax-ease), opacity var(--ax-dur-1) var(--ax-ease);
  border-radius: 2px;
}

/* The checkbox is the drawer's state. Keeping it focusable, and giving the
   label a focus ring through it, is what makes the drawer keyboard-operable
   without any JavaScript. */
.nav-toggle:focus-visible ~ .nav-hamburger {
  box-shadow: var(--ax-focus);
  border-radius: var(--ax-r-sm);
}

/* ==========================================================================
   Feature Grid - Features Page
   Desktop: Table-like layout, Mobile: Card-based layout
   ========================================================================== */

/* Wide container for feature grid to support 4 columns */
.feature-grid {
  max-width: 1400px;
  margin: 0 auto;
}

.feature-grid h3 {
  font-size: 2rem;
  margin-bottom: 2rem;
  margin-top: 4rem;
  color: var(--color-cyan);
  font-weight: 700;
}

.feature-grid h3:first-of-type {
  margin-top: 0;
}

/* Desktop: Table-like layout */
@media (min-width: 1024px) {
  .feature-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    margin-bottom: 4rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    overflow: visible;
    background: rgba(26, 34, 51, 0.3);
  }

  .feature-column {
    background: transparent;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    padding: 0;
    transition: background-color 0.2s ease;
    overflow: visible;
  }

  .feature-column:last-child {
    border-right: none;
  }

  .feature-column:hover {
    background: rgba(34, 211, 238, 0.03);
  }

  .feature-column h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-cyan);
    margin: 0;
    padding: 1.25rem 1rem;
    border-bottom: 2px solid rgba(34, 211, 238, 0.3);
    background: rgba(34, 211, 238, 0.05);
    text-align: center;
  }

  .feature-item {
    position: relative;
    padding: 0.875rem 1rem;
    margin: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0;
    font-size: 0.9rem;
    color: var(--color-text);
    transition: background-color 0.2s ease;
    overflow: visible;
  }

  .feature-item-empty {
    opacity: 0.3;
  }

  .feature-item:hover {
    background: rgba(34, 211, 238, 0.08);
  }
}

/* Tablet & Mobile: Card-based layout */
@media (max-width: 1023px) {
  /* Hide empty placeholder cells on mobile */
  .feature-item-empty {
    display: none !important;
  }

  .feature-table {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
    overflow: visible;
  }

  .feature-column {
    background: rgba(26, 34, 51, 0.4);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: border-color 0.2s ease;
    overflow: visible;
  }

  .feature-column:hover {
    border-color: rgba(34, 211, 238, 0.3);
  }

  .feature-column h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-cyan);
    margin: 0 0 1.25rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(34, 211, 238, 0.2);
  }

  .feature-item {
    position: relative;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 0.9375rem;
    color: var(--color-text);
    transition: all 0.2s ease;
    overflow: visible;
  }

  .feature-item:last-child {
    margin-bottom: 0;
  }

  .feature-item:hover {
    background: rgba(34, 211, 238, 0.05);
    border-color: rgba(34, 211, 238, 0.2);
  }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .logo img { height: 1.75rem; max-width: 160px; }
  .footer-logo img { height: 1.5rem; max-width: 140px; }

  /* Show hamburger on mobile */
  .nav-hamburger {
    display: flex;
  }

  /* Slide-out drawer. 100dvh, not 100vh: on iOS Safari the visual viewport
     shrinks when the toolbars are showing, and 100vh leaves the last menu item
     under the browser chrome with nothing to scroll to. */
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100dvh;
    width: 78%;
    max-width: 320px;
    background-color: var(--ax-bg-2);
    border-left: 1px solid var(--ax-border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5rem 1.25rem 2rem;
    transition: right var(--ax-dur-3) var(--ax-ease);
    box-shadow: -24px 0 48px -24px rgba(0, 0, 0, 0.8);
    z-index: 100;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav-menu li {
    width: 100%;
    border-bottom: 1px solid var(--ax-hairline);
  }

  .nav-menu a {
    display: block;
    padding: 0.875rem 0;
    font-size: 1rem;
    color: var(--ax-text-muted);
  }

  /* The underline marker is a desktop device; in the drawer the row itself
     carries the state. */
  .nav-menu a[aria-current] { color: var(--ax-text); }
  .nav-menu a[aria-current]::after { display: none; }
  .nav-menu li:has(a[aria-current]) {
    box-shadow: inset 2px 0 0 var(--ax-accent);
    padding-left: 0.75rem;
  }

  /* Mobile GitHub: show label, full-width like other items */
  .nav-github-icon {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    height: auto !important;
    padding: 0.875rem 1rem !important;
    margin: 0 !important;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    gap: 0.5rem;
  }

  .nav-github-icon .nav-label {
    display: inline;
  }

  /* Mobile Get Started CTA */
  .nav-cta {
    margin-left: 0 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem;
    border-bottom: none !important;
    padding: 0 !important;
  }

  .btn-get-started {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    padding: 1rem 1.25rem !important;
    font-size: 1rem;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* Show menu when checkbox is checked */
  .nav-toggle:checked ~ .nav-menu {
    right: 0;
  }

  /* Hamburger animation when menu is open */
  .nav-toggle:checked ~ .nav-hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
  }

  .nav-toggle:checked ~ .nav-hamburger span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle:checked ~ .nav-hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }

  /* Backdrop. It covers the whole viewport, not the strip beside the drawer,
     so the page behind reads as inert rather than half-dimmed. The label is
     also the dismiss target, which is why it sits above the backdrop. */
  .nav-toggle:checked ~ .nav-menu::before {
    content: '';
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: -1;
  }

  /* Scroll lock. Without it the page keeps scrolling under the open drawer and
     closing it drops the reader somewhere they never navigated to. */
  body:has(.nav-toggle:checked) {
    overflow: hidden;
  }

  /* The Go Advantage table, the code steps and the hero all had mobile
     rules here. Their components are gone; the shared table scrolls inside
     its own wrapper and the hero sizes itself off a clamp. */

  /* Mobile Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }

  .footer-brand {
    align-items: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(42, 53, 68, 0.3);
  }

  .footer-column {
    align-items: center;
  }

  .footer-links {
    align-items: center;
  }

  .footer-links a {
    font-size: 0.875rem;
    padding: 0.5rem 0;
    min-height: 44px;
  }

  /* Feature Grid - Mobile responsive adjustments */
  .feature-grid h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    margin-top: 2.5rem;
  }

  .feature-grid h3:first-of-type {
    margin-top: 0;
  }
}

/* ==========================================================================
   Custom Tooltip for Feature Tables
   Provides instant-response, readable tooltips for feature explanations
   ========================================================================== */

.info-tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.info-tooltip:hover {
  opacity: 1;
}

.info-tooltip .tooltip-text {
  visibility: hidden;
  opacity: 0;
  /* Larger, readable text */
  font-size: 0.9375rem;  /* 15px */
  line-height: 1.5;
  font-weight: 400;
  /* Better contrast */
  background-color: rgba(20, 27, 45, 0.98);
  color: rgba(255, 255, 255, 0.95);
  /* Generous spacing */
  padding: 12px 16px;
  border-radius: 8px;
  /* Positioning - appears above the icon */
  position: absolute;
  bottom: calc(100% + 8px);  /* 8px gap above icon */
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  /* Width control - increased max-width and added min-width */
  width: max-content;
  min-width: 200px;
  max-width: 400px;  /* Increased from 280px to accommodate longer text */
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  /* Styling */
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  /* Instant response - minimal delay */
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  transition-delay: 0s;
  z-index: 10000;  /* Very high z-index to ensure it appears above everything */
  pointer-events: none;
}

/* Tooltip arrow */
.info-tooltip .tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: rgba(20, 27, 45, 0.98) transparent transparent transparent;
}

/* Show on hover with instant response */
.info-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) scale(1);
  transition-delay: 0.05s;  /* Very short 50ms delay for instant feel */
}

/* Mobile touch support */
@media (hover: none) {
  .info-tooltip .tooltip-text {
    display: none;
  }

  .info-tooltip:active .tooltip-text {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

/* Responsive tooltip on small screens */
@media (max-width: 768px) {
  .info-tooltip .tooltip-text {
    min-width: 180px;
    max-width: 300px;  /* Increased from 220px for better mobile readability */
    font-size: 0.875rem;  /* 14px on mobile */
    padding: 10px 14px;
  }
}

/* ==========================================================================
   /why-aixgo blocks. The markdown wraps three regions in divs; these give
   those regions a panel, a section rule and a card grid built from the same
   tokens as the rest of the site. They introduce no list, table or card
   implementation of their own.
   ========================================================================== */

.philosophy-metrics {
  margin: var(--ax-s-8) 0;
  padding: var(--ax-s-6);
  background: var(--ax-bg-1);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-xl);
  overflow-x: auto;
}

.philosophy-metrics h2 {
  margin-top: 0;
  margin-bottom: var(--ax-s-5);
  color: var(--ax-text);
}

.philosophy-metrics table { margin-top: 0; }

/* The Aixgo column is the comparison's answer, so it carries the emphasis. */
.philosophy-metrics table td:nth-child(3) {
  color: var(--ax-text);
  font-weight: 700;
}

.philosophy-metrics table td:nth-child(4) { color: var(--ax-text-dim); }

.decision-section { margin: var(--ax-s-8) 0; }

.decision-section h3 {
  padding-bottom: var(--ax-s-3);
  border-bottom: 1px solid var(--ax-border);
}

.decision-section > div { margin-top: var(--ax-s-6); }

.decision-section strong {
  display: block;
  margin-top: var(--ax-s-5);
  margin-bottom: var(--ax-s-2);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-t-microlabel);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ax-text-dim);
}

.philosophy-cta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ax-card-gap);
  margin: var(--ax-s-7) 0;
}

.philosophy-cta-grid > * { min-width: 0; }

.philosophy-cta-grid > div {
  padding: var(--ax-s-5);
  background: var(--ax-bg-3);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-lg);
  box-shadow: var(--ax-e-1);
}

.philosophy-cta-grid strong {
  display: block;
  margin-bottom: var(--ax-s-3);
  font-family: var(--ax-font-display);
  font-size: var(--ax-t-h3);
  color: var(--ax-text);
}

@media (max-width: 768px) {
  .philosophy-metrics { padding: var(--ax-s-4); margin: var(--ax-s-6) 0; }
  .philosophy-cta-grid { grid-template-columns: 1fr; }
}

/* Very narrow phones: the wordmark is the first thing to give up width. */
@media (max-width: 480px) {
  .logo { margin-right: 1rem; }
  .logo img { height: 1.5rem; max-width: 140px; }
  .footer-logo img { height: 1.5rem; max-width: 140px; }
}