/* =========================================================================
   Ductile AI - www.ductileai.com
   =========================================================================

   The design system is ported from the web console's taskflow creator
   (ductileai/webconsole, apps/console-web/src/app/globals.css): the same 4px
   spacing rhythm, the same type scale used by size and never by weight alone,
   the same radii and elevation ramp, and the same card language as the canvas
   node - compact, bordered with a colour that actually reads as an edge, and
   sitting on a dotted canvas.

   What changed is the palette. The console is blue; the brand here is
   green / black / orange / grey:

     green   the accent and the "verified / engine-validated" colour
     black   the ink, and the ground of every hero and footer band
     orange  the second accent - CTAs, the human-approval gate, highlights
     grey    every surface, line and text step in between

   Layers, in the console's order:
     1. primitives   - space, type, radius, elevation, motion
     2. semantics    - surface / line / text / accent / status
     3. dark theme   - the same semantic names, re-pointed
     4. components   - nav, hero, node cards, catalog, roles, footer
   ========================================================================= */

/* -- 1. Primitives ------------------------------------------------------ */
:root {
  /* Space: a 4px rhythm with two half-steps for dense chrome. */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 56px;
  --space-12: 80px;
  --space-13: 112px;

  /* Type: one scale, used by size and never by weight alone. */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 13.5px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 19px;
  --text-2xl: 23px;
  --text-3xl: 28px;
  --text-4xl: 34px;
  --text-hero: clamp(34px, 5.2vw, 60px);
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --font-sans:
    Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Radius */
  --radius-xs: 5px;
  --radius-sm: 7px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(10, 20, 15, 0.05);
  --shadow-sm: 0 1px 2px rgba(10, 20, 15, 0.05), 0 2px 6px rgba(10, 20, 15, 0.05);
  --shadow-md: 0 1px 2px rgba(10, 20, 15, 0.05), 0 4px 12px rgba(10, 20, 15, 0.07);
  --shadow-lg: 0 8px 28px rgba(10, 20, 15, 0.12);
  --shadow-xl: 0 18px 48px rgba(10, 20, 15, 0.16);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-slow: 220ms;

  /* Layout */
  --page-max: 1240px;
  --rail-width: 268px;
  --nav-height: 62px;
}

/* -- 2. Semantic colour (light) ----------------------------------------- */
:root {
  /* Surfaces: raised (cards, bars), sunken (rails), wash (hover). */
  --surface: #ffffff;
  --surface-2: #f8faf9;
  --surface-3: #eef1f0;
  --canvas: #fafcfb;
  --canvas-dot: #d3dbd7;

  --line: #e6eae8;
  --line-strong: #d2d9d6;

  /* Text steps all clear WCAG AA (4.5:1) on --surface. */
  --text: #0b1210;
  --text-muted: #566360;
  --text-faint: #69766f;
  --text-inverse: #ffffff;

  /* Green - the accent, and the colour of an engine-validated result. */
  --accent: #12864a;
  --accent-hover: #0e6c3b;
  --accent-soft: #34c07a;
  --accent-tint: #ecfaf1;
  --accent-tint-2: #d8f4e5;
  --accent-border: #b4e7cd;
  --accent-contrast: #ffffff;
  --accent-glow: rgba(18, 134, 74, 0.32);

  /* Orange - the second accent: CTAs, and the human-approval gate. */
  --ember: #d4550f;
  --ember-hover: #b3450b;
  --ember-soft: #f97c3c;
  --ember-tint: #fff3ec;
  --ember-border: #fcd2b6;
  --ember-contrast: #ffffff;
  --ember-text: #9a3d0c;

  /* Status. The -text step is the AA-safe one for words; the plain step is
     for marks (dots, meter fills, borders) where contrast is not text. */
  --success: #12864a;
  --success-text: #0a6338;
  --success-tint: #ecfaf1;
  --success-border: #b4e7cd;
  --warning: #d4550f;
  --warning-text: #9a3d0c;
  --warning-tint: #fff3ec;
  --warning-border: #fcd2b6;
  --danger: #c0392b;
  --danger-text: #9b2c20;
  --danger-tint: #fdf1f0;
  --danger-border: #f3c9c4;

  --ink: #0b1210;
  --ink-2: #131b18;
  --ink-3: #1c2622;
  --ink-line: #2a3733;
  --ink-text: #cdd7d3;
  --ink-muted: #8d9a95;

  --scrim: rgba(11, 18, 16, 0.46);
  --kbd-bg: #f7f9f8;

  /* Focus: one ring, used by every interactive element. */
  --focus: var(--accent);
  --focus-ring: 0 0 0 3px rgba(18, 134, 74, 0.32);
  --field-ring: 0 0 0 3px rgba(18, 134, 74, 0.14);

  --control-bg: #f4f7f5;
  --control-border: #8b9691;

  color-scheme: light;
}

/* -- 3. Dark theme ------------------------------------------------------
   Same semantic names, re-pointed. Black is the ground, green and orange
   keep their jobs, and every text step is lifted to clear AA on the darker
   surface. Driven by an explicit data-theme, and by the system preference
   when the visitor has not chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --surface: #0d1412;
    --surface-2: #121a17;
    --surface-3: #1a2420;
    --canvas: #0a100e;
    --canvas-dot: #26332e;

    --line: #222e29;
    --line-strong: #33423c;

    --text: #e8efec;
    --text-muted: #a3b0ab;
    --text-faint: #8b9a94;
    --text-inverse: #0b1210;

    --accent: #35c47e;
    --accent-hover: #4ad38f;
    --accent-soft: #1e8b56;
    --accent-tint: #10241a;
    --accent-tint-2: #163123;
    --accent-border: #1f4a33;
    --accent-contrast: #04120a;
    --accent-glow: rgba(53, 196, 126, 0.34);

    --ember: #f9803f;
    --ember-hover: #fb9058;
    --ember-soft: #c05a22;
    --ember-tint: #241409;
    --ember-border: #4d2a12;
    --ember-contrast: #1a0c03;
    --ember-text: #f9a678;

    --success: #35c47e;
    --success-text: #6bd9a2;
    --success-tint: #10241a;
    --success-border: #1f4a33;
    --warning: #f9803f;
    --warning-text: #f9a678;
    --warning-tint: #241409;
    --warning-border: #4d2a12;
    --danger: #e5695a;
    --danger-text: #f0938a;
    --danger-tint: #2a1412;
    --danger-border: #5c2a24;

    --ink: #070c0a;
    --ink-2: #0d1412;
    --ink-3: #151e1a;
    --ink-line: #26332e;
    --ink-text: #cdd7d3;
    --ink-muted: #8b9a94;

    --scrim: rgba(0, 0, 0, 0.62);
    --kbd-bg: #151e1a;

    --focus-ring: 0 0 0 3px rgba(53, 196, 126, 0.34);
    --field-ring: 0 0 0 3px rgba(53, 196, 126, 0.16);

    --control-bg: #151e1a;
    --control-border: #55635d;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.32);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.36);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 18px 48px rgba(0, 0, 0, 0.58);

    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --surface: #0d1412;
  --surface-2: #121a17;
  --surface-3: #1a2420;
  --canvas: #0a100e;
  --canvas-dot: #26332e;

  --line: #222e29;
  --line-strong: #33423c;

  --text: #e8efec;
  --text-muted: #a3b0ab;
  --text-faint: #8b9a94;
  --text-inverse: #0b1210;

  --accent: #35c47e;
  --accent-hover: #4ad38f;
  --accent-soft: #1e8b56;
  --accent-tint: #10241a;
  --accent-tint-2: #163123;
  --accent-border: #1f4a33;
  --accent-contrast: #04120a;
  --accent-glow: rgba(53, 196, 126, 0.34);

  --ember: #f9803f;
  --ember-hover: #fb9058;
  --ember-soft: #c05a22;
  --ember-tint: #241409;
  --ember-border: #4d2a12;
  --ember-contrast: #1a0c03;
  --ember-text: #f9a678;

  --success: #35c47e;
  --success-text: #6bd9a2;
  --success-tint: #10241a;
  --success-border: #1f4a33;
  --warning: #f9803f;
  --warning-text: #f9a678;
  --warning-tint: #241409;
  --warning-border: #4d2a12;
  --danger: #e5695a;
  --danger-text: #f0938a;
  --danger-tint: #2a1412;
  --danger-border: #5c2a24;

  --ink: #070c0a;
  --ink-2: #0d1412;
  --ink-3: #151e1a;
  --ink-line: #26332e;
  --ink-text: #cdd7d3;
  --ink-muted: #8b9a94;

  --scrim: rgba(0, 0, 0, 0.62);
  --kbd-bg: #151e1a;

  --focus-ring: 0 0 0 3px rgba(53, 196, 126, 0.34);
  --field-ring: 0 0 0 3px rgba(53, 196, 126, 0.16);

  --control-bg: #151e1a;
  --control-border: #55635d;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 18px 48px rgba(0, 0, 0, 0.58);

  color-scheme: dark;
}

/* -- 4. Base ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The [hidden] attribute is how the catalog script hides a tile, but the UA
   rule behind it ([hidden]{display:none}) is a plain type-less selector - any
   class that sets display, like .tile{display:flex}, out-specifies it and the
   element stays on screen. Make hidden mean hidden. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  min-height: 100%;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: var(--leading-tight);
  letter-spacing: -0.018em;
  font-weight: var(--weight-semibold);
}

p {
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

code,
kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-4) var(--space-6);
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: var(--weight-semibold);
}

.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

/* -- 5. Navigation ------------------------------------------------------ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-height);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  flex: none;
}

.brand:hover {
  text-decoration: none;
}

.brand__mark {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--ink);
  /* The mark sits on black, so it has to carry its own colour - inheriting
     --text would paint it near-black on near-black. */
  color: var(--accent-soft);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--ink-line);
}

.brand__mark svg {
  width: 18px;
  height: 18px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-4);
}

.nav__link {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.nav__link:hover {
  background: var(--surface-3);
  color: var(--text);
  text-decoration: none;
}

.nav__link[aria-current='page'] {
  color: var(--accent);
  background: var(--accent-tint);
}

.nav__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.theme-toggle {
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.theme-toggle:hover {
  background: var(--surface-3);
  color: var(--text);
}

.nav__burger {
  display: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  place-items: center;
}

/* -- 6. Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-7);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.btn:hover {
  text-decoration: none;
}

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

.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
}

.btn--primary:hover {
  background: var(--accent-hover);
}

/* Orange is the "start here" colour - one per page, so it stays a signal. */
.btn--ember {
  background: var(--ember);
  color: var(--ember-contrast);
}

.btn--ember:hover {
  background: var(--ember-hover);
}

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-strong);
}

.btn--ghost:hover {
  background: var(--surface-3);
}

/* On the black hero band the ghost button needs the inverse treatment. */
.btn--onink {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}

.btn--onink:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.45);
}

.btn--sm {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
}

.btn--lg {
  padding: var(--space-6) var(--space-9);
  font-size: var(--text-base);
}

/* -- 7. Chips, pills, badges -------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--kbd-bg);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.chip--accent {
  background: var(--accent-tint);
  border-color: var(--accent-border);
  color: var(--success-text);
}

.chip--ember {
  background: var(--ember-tint);
  border-color: var(--ember-border);
  color: var(--ember-text);
}

.chip--onink {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: #d7e2dd;
}

.chip--mono {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}

.chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow--onink {
  color: var(--accent-soft);
}

/* -- 8. Hero ------------------------------------------------------------
   Black ground with the canvas dot grid from the taskflow creator, so the
   marketing front door and the product it sells look like one system. */
.hero {
  position: relative;
  background: var(--ink);
  color: #ffffff;
  overflow: hidden;
  border-bottom: 1px solid var(--ink-line);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.11) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 35%, transparent 78%);
  pointer-events: none;
}

/* A soft green and orange bloom - the two brand accents, used as light. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(560px 320px at 16% 8%, rgba(53, 196, 126, 0.2), transparent 68%),
    radial-gradient(520px 320px at 88% 82%, rgba(249, 128, 63, 0.15), transparent 68%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  /* Tight on purpose: a visitor decides in the first screen. Centring the two
     columns against the tall panel left a band of empty ink under the
     headline, and 112px of padding pushed the proof below the fold. */
  gap: var(--space-9) var(--space-11);
  align-items: start;
  padding: var(--space-10) 0 var(--space-11);
}

.hero h1 {
  margin-top: var(--space-6);
  /* Two lines, one sentence each. The hero column is about half the page, so
     the shared --text-hero (60px) left "Deterministic agents do it." needing
     ~780px in ~620px of column, and the browser broke it after "do" - an
     orphaned "it." on line three. Capped at 50px, which fits, with balance as
     the safety net if the words ever change. */
  /* One line, the whole sentence: the headline spans both hero columns, so it
     has the full width rather than the ~620px the left column gave it. 46px
     is what 49 characters need in that width; below ~900px the clamp lets it
     wrap rather than overflow. */
  font-size: clamp(28px, 3.4vw, 46px);
  text-wrap: balance;
  font-weight: var(--weight-bold);
  letter-spacing: -0.032em;
  color: #ffffff;
}

/* Four facts in the space the left column was wasting: a visitor who reads
   nothing else should still leave knowing the size of the catalogue and the
   price. */
.herofacts {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-7);
  max-width: 34rem;
}
.herofacts li {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-md);
  padding-left: var(--space-5);
  border-left: 2px solid var(--accent);
  line-height: 1.35;
}
.herofacts b {
  display: block;
  color: #ffffff;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}

.hero__head {
  grid-column: 1 / -1;
  margin-bottom: var(--space-6);
}

.hero h1 em {
  font-style: normal;
  color: var(--accent-soft);
}

.hero__lede {
  margin-top: var(--space-7);
  max-width: 56ch;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: #c3d0cb;
}

.hero__cta {
  margin-top: var(--space-9);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.hero__note {
  margin-top: var(--space-7);
  font-size: var(--text-sm);
  color: #93a39d;
}

/* -- 9. The taskflow card - the console's node, on the marketing site ---
   Ported from .node in the console stylesheet: compact, one icon, a title
   and a single line of subtitle, on a border colour strong enough to read
   as an edge. */
.flowcard {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  box-shadow: var(--shadow-md);
}

.flowcard--onink {
  background: var(--ink-2);
  border-color: var(--ink-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.flowcard--engine {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), 0 10px 30px rgba(0, 0, 0, 0.45);
}

.flowcard--gate {
  border-color: var(--ember);
}

.flowcard__icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--surface-3);
  color: var(--text-muted);
}

.flowcard--onink .flowcard__icon {
  background: var(--ink-3);
  color: var(--accent-soft);
}

.flowcard--gate .flowcard__icon {
  color: var(--ember-soft);
}

.flowcard__icon svg {
  width: 16px;
  height: 16px;
}

.flowcard__text {
  min-width: 0;
}

.flowcard__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  color: var(--text);
}

.flowcard--onink .flowcard__title {
  color: #ffffff;
}

.flowcard__sub {
  margin-top: 1px;
  font-size: var(--text-2xs);
  line-height: 1.35;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowcard--onink .flowcard__sub {
  color: var(--ink-muted);
}

.flowcard__tag {
  margin-left: auto;
  flex: none;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-muted);
}

.flowcard--engine .flowcard__tag {
  background: rgba(53, 196, 126, 0.16);
  color: var(--accent-soft);
}

.flowcard--gate .flowcard__tag {
  background: rgba(249, 128, 63, 0.16);
  color: var(--ember-soft);
}

/* The wire between two cards. */
.flowwire {
  height: 22px;
  margin-left: 30px;
  border-left: 2px solid var(--ink-line);
  position: relative;
}

.flowwire::after {
  content: '';
  position: absolute;
  left: -4px;
  bottom: -1px;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--ink-line);
  border-bottom: 2px solid var(--ink-line);
  transform: rotate(45deg);
}

.flowwire--verdict {
  border-color: var(--accent-soft);
}

.flowwire--verdict::after {
  border-color: var(--accent-soft);
}

.flowstack {
  display: flex;
  flex-direction: column;
}

.flowpanel {
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-xl);
}

.flowpanel__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.flowpanel__dots {
  display: flex;
  gap: var(--space-3);
}

.flowpanel__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.flowpanel__name {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--ink-muted);
}

/* -- 10. Sections ------------------------------------------------------- */
.section {
  padding: var(--space-13) 0;
}

.section--tight {
  padding: var(--space-12) 0;
}

.section--wash {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section--ink {
  background: var(--ink);
  color: #ffffff;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}

.section__head {
  max-width: 66ch;
  margin-bottom: var(--space-10);
}

.section__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section__head h2 {
  margin-top: var(--space-5);
  font-size: var(--text-3xl);
  letter-spacing: -0.026em;
}

.section--ink .section__head h2 {
  color: #ffffff;
}

.section__head p {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.section--ink .section__head p {
  color: #b6c4be;
}

.section__foot {
  margin-top: var(--space-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
}

/* -- 11. Stat strip ----------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.stat {
  background: var(--surface);
  padding: var(--space-8) var(--space-7);
}

.stat__value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

/* -- 12. Generic card grid ---------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Cards keep their natural height instead of stretching to the tallest in the
   row. Used by the role grid, where a stretched card pushes its worker box
   down and opens a hole in the middle. */
.grid--start {
  align-items: start;
}

.grid--4 {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.card {
  display: block;
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

a.card:hover {
  text-decoration: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.card__body {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.card__meta {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.card__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--accent-tint);
  color: var(--accent);
  margin-bottom: var(--space-6);
}

.card__icon svg {
  width: 19px;
  height: 19px;
}

.card__icon--ember {
  background: var(--ember-tint);
  color: var(--ember);
}

/* -- 13. Catalog layout: left rail + results ---------------------------- */
.catalog {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
  padding: var(--space-10) 0 var(--space-13);
}

.rail {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
  max-height: calc(100vh - var(--nav-height) - var(--space-10));
  overflow-y: auto;
  padding-right: var(--space-4);
  scrollbar-width: thin;
}

.rail__title {
  margin: var(--space-8) 0 var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.rail__title:first-child {
  margin-top: 0;
}

/* A flat row in the rail (the sort options, "All connectors"). */
.rail__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-md);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.rail__row:hover {
  background: var(--surface-3);
  text-decoration: none;
}

.rail__row[aria-selected='true'],
.rail__row[aria-current='page'] {
  background: var(--accent-tint);
  color: var(--success-text);
  font-weight: var(--weight-semibold);
}

.rail__count {
  margin-left: auto;
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

.rail__row[aria-selected='true'] .rail__count {
  color: var(--success-text);
}

/* The collapsible group: a disclosure button plus its nested category list,
   the two-level shape the console's page navigation uses. */
.railgroup__btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  text-align: left;
  cursor: pointer;
}

.railgroup__btn:hover {
  background: var(--surface-3);
}

.railgroup__caret {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-faint);
  transition: transform var(--dur-fast) var(--ease);
}

.railgroup__btn[aria-expanded='true'] .railgroup__caret {
  transform: rotate(0deg);
}

.railgroup__btn[aria-expanded='false'] .railgroup__caret {
  transform: rotate(-90deg);
}

.railgroup__list {
  margin: var(--space-1) 0 var(--space-3);
  padding-left: var(--space-7);
  border-left: 1px solid var(--line);
  margin-left: var(--space-6);
}

.railgroup__list[hidden] {
  display: none;
}

.railgroup__list .rail__row {
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-5);
  color: var(--text-muted);
}

.railgroup__list .rail__row[aria-selected='true'] {
  color: var(--success-text);
}

/* -- 14. Results pane --------------------------------------------------- */
.results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.results__head h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.026em;
}

.results__lede {
  margin-top: var(--space-5);
  max-width: 70ch;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.results__count {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.search {
  position: relative;
  margin-bottom: var(--space-8);
}

.search__icon {
  position: absolute;
  left: var(--space-6);
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--text-faint);
  pointer-events: none;
}

.search input {
  width: 100%;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-11);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-base);
}

.search input::placeholder {
  color: var(--text-faint);
}

.search input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: var(--field-ring);
}

.activefilters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.filterpill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent-border);
  background: var(--accent-tint);
  color: var(--success-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.filterpill button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

/* The connector tile - the node card, at catalog scale. */
.tile {
  display: flex;
  flex-direction: column;
  padding: var(--space-7);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  box-shadow: var(--shadow-xs);
  color: inherit;
  height: 100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

a.tile:hover {
  text-decoration: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.tile__top {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
}

/* A monogram stands in for a vendor logo: no third-party marks are bundled,
   and the tile still reads as "an app" at a glance. */
.tile__mark {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  background: var(--accent-tint);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

.tile__name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile__vendor {
  margin-top: 1px;
  font-size: var(--text-2xs);
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile__summary {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tile__foot {
  margin-top: auto;
  padding-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.verified {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  color: var(--success-text);
}

.verified svg {
  width: 13px;
  height: 13px;
}

.empty {
  padding: var(--space-12) var(--space-8);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}

.empty strong {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--text);
  font-size: var(--text-lg);
}

/* -- 15. Detail pages --------------------------------------------------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) 0 0;
  font-size: var(--text-sm);
  color: var(--text-faint);
}

.crumbs a {
  color: var(--text-muted);
}

.crumbs span {
  color: var(--text-faint);
}

.detailhead {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: flex-start;
  padding: var(--space-8) 0 var(--space-10);
  border-bottom: 1px solid var(--line);
}

.detailhead__mark {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  background: var(--accent-tint);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

.detailhead__text {
  flex: 1 1 320px;
  min-width: 0;
}

.detailhead h1 {
  font-size: var(--text-4xl);
  letter-spacing: -0.03em;
}

.detailhead__vendor {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  color: var(--text-muted);
}

.detailhead__summary {
  margin-top: var(--space-6);
  max-width: 72ch;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.detailhead__meta {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.detailhead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.detailbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-11);
  align-items: start;
  padding: var(--space-10) 0 var(--space-13);
}

.panel {
  padding: var(--space-8);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.panel + .panel {
  margin-top: var(--space-7);
}

.panel__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-6);
}

.panel--aside {
  background: var(--surface-2);
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
}

.panel--aside .panel__title {
  font-size: var(--text-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: var(--weight-semibold);
}

.deflist {
  display: grid;
  gap: var(--space-6);
}

.deflist div {
  display: grid;
  gap: var(--space-2);
}

.deflist dt {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.deflist dd {
  margin: 0;
  font-size: var(--text-md);
  color: var(--text);
  overflow-wrap: anywhere;
}

.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 560px;
}

th,
td {
  padding: var(--space-5) var(--space-6);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

th {
  background: var(--surface-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: 0;
}

td .chip {
  margin: 0 var(--space-2) var(--space-2) 0;
}

.note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--text-faint);
}

.prose p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.prose p + p {
  margin-top: var(--space-6);
}

.prose strong {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

/* -- 16. Role cards ----------------------------------------------------- */
/* No height:100% here. It would resolve against the grid AREA - which is as
   tall as the tallest card in the row - and so re-stretch the card that
   .grid--start just let size to its own content, reopening the hole above
   the worker box. */
.role {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  box-shadow: var(--shadow-xs);
}

/* Role cards carry a lot more than a connector tile - responsibilities, a
   meter, a charter - so they get a wider minimum than .grid--3. */
.grid--roles {
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  align-items: start;
}

.role__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.role__index {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.role__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  color: var(--text);
}

.role__function {
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  font-family: var(--font-mono);
  color: var(--text-faint);
}

.role__section {
  margin-top: var(--space-7);
}

.role__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-4);
}

.role__resp li {
  position: relative;
  padding-left: var(--space-7);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.role__resp li + li {
  margin-top: var(--space-3);
}

.role__resp li::before {
  content: '';
  position: absolute;
  left: var(--space-2);
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* The toil meter: the share of the role an AI worker absorbs, drawn as one
   ramp rather than a bar on grey. */
.meter {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.meter__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}

.meter__legend {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-4);
  font-size: var(--text-2xs);
  color: var(--text-faint);
}

.meter__legend b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.role__worker {
  margin-top: auto;
  padding-top: var(--space-7);
}

.workerbox {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.workerbox__name {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.workerbox__name svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex: none;
}

.workerbox__charter {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.gates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.gate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  border: 1px solid;
}

.gate--allow {
  background: var(--accent-tint);
  border-color: var(--accent-border);
  color: var(--success-text);
}

.gate--approval {
  background: var(--ember-tint);
  border-color: var(--ember-border);
  color: var(--ember-text);
}

.gate--deny {
  background: var(--danger-tint);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

/* -- 17. Vertical header ------------------------------------------------ */
.verticalhead {
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--line);
}

.verticalhead h1 {
  margin-top: var(--space-5);
  font-size: var(--text-4xl);
  letter-spacing: -0.03em;
}

.verticalhead__lede {
  margin-top: var(--space-6);
  max-width: 74ch;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.verticalhead__meta {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-7);
}

.metablock__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-4);
}

.metablock__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.metablock__text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

/* -- 18. Split feature (role grammar) ----------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-7);
}

.rolecard {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-line);
  background: var(--ink-2);
}

.rolecard--verdict {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(53, 196, 126, 0.09), transparent 60%), var(--ink-2);
}

.rolecard__tag {
  display: inline-flex;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-muted);
}

.rolecard--verdict .rolecard__tag {
  background: rgba(53, 196, 126, 0.18);
  color: var(--accent-soft);
}

.rolecard--human .rolecard__tag {
  background: rgba(249, 128, 63, 0.18);
  color: var(--ember-soft);
}

.rolecard h3 {
  margin-top: var(--space-6);
  font-size: var(--text-xl);
  color: #ffffff;
}

.rolecard p {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: #b6c4be;
}

/* -- 19. Steps ---------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-8);
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: var(--space-8);
  border-top: 2px solid var(--line-strong);
}

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: calc(-1 * var(--space-5));
  left: 0;
  padding-right: var(--space-4);
  background: var(--surface-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-family: var(--font-mono);
  color: var(--accent);
}

.step h3 {
  font-size: var(--text-lg);
}

.step p {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

/* -- 20. CTA band ------------------------------------------------------- */
.ctaband {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #ffffff;
  border-radius: var(--radius-2xl);
  padding: var(--space-12) var(--space-10);
  text-align: center;
}

.ctaband::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 75%);
}

.ctaband > * {
  position: relative;
}

.ctaband h2 {
  font-size: var(--text-3xl);
  letter-spacing: -0.026em;
  color: #ffffff;
}

.ctaband p {
  margin: var(--space-6) auto 0;
  max-width: 60ch;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: #b6c4be;
}

.ctaband__actions {
  margin-top: var(--space-9);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: center;
}

/* -- 21. Footer --------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: var(--ink-text);
  border-top: 1px solid var(--ink-line);
  padding: var(--space-12) 0 var(--space-9);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-10);
}

.footer__brand .brand {
  color: #ffffff;
}

.footer__brand .brand__mark {
  background: var(--ink-3);
}

.footer__blurb {
  margin-top: var(--space-6);
  max-width: 42ch;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ink-muted);
}

.footer__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: var(--space-6);
}

.footer__list li + li {
  margin-top: var(--space-4);
}

.footer__list a {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.footer__list a:hover {
  color: #ffffff;
}

.footer__bar {
  margin-top: var(--space-10);
  padding-top: var(--space-7);
  border-top: 1px solid var(--ink-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

/* -- 22. Responsive ----------------------------------------------------- */
@media (max-width: 1080px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    padding: var(--space-12) 0;
  }

  .detailbody {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .panel--aside {
    position: static;
  }
}

@media (max-width: 900px) {
  .catalog {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .rail {
    position: static;
    max-height: none;
    overflow: visible;
    padding: var(--space-7);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
  }
}

@media (max-width: 780px) {
  :root {
    --nav-height: 58px;
  }

  .wrap {
    padding: 0 var(--space-6);
  }

  .nav__links {
    display: none;
  }

  .nav__burger {
    display: grid;
  }

  .nav--open .nav__links {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-6);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }

  .section,
  .section--tight {
    padding: var(--space-11) 0;
  }

  .detailhead h1,
  .verticalhead h1 {
    font-size: var(--text-3xl);
  }

  .section__head h2,
  .ctaband h2,
  .results__head h1 {
    font-size: var(--text-2xl);
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .ctaband {
    padding: var(--space-10) var(--space-7);
  }
}

/* -- 23. Print ---------------------------------------------------------- */
@media print {
  .nav,
  .footer,
  .rail,
  .ctaband,
  .search {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* -- 24. Monogram variants ----------------------------------------------
   The catalog grid needs visual rhythm, which app directories usually get
   from vendor logos.
   No third-party marks are bundled here, so the monogram cycles through the
   three brand grounds - green, black, orange - picked deterministically from
   the connector id, so a given app always wears the same colour. */
.tile__mark--ink,
.detailhead__mark--ink {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink-line);
}

.tile__mark--ember,
.detailhead__mark--ember {
  background: var(--ember-tint);
  color: var(--ember-text);
  border-color: var(--ember-border);
}

/* -- 25. Inline link-out ------------------------------------------------
   An icon inside a table cell or a small label has to stay on the baseline
   next to its text. The icon() helper emits a 24px block SVG, so anywhere it
   sits inline it needs to be sized and made inline explicitly - otherwise it
   drops onto its own line and the link reads as two rows. */
.linkout {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  font-weight: var(--weight-medium);
}

.linkout svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.verified svg,
.chip svg,
.workerbox__name svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.btn svg,
.eyebrow svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.card__icon svg,
.flowcard__icon svg {
  width: 18px;
  height: 18px;
}

/* -- 26. Small-screen corrections ---------------------------------------
   Found by measuring, not by eye: at 390px the nav button cluster and the
   catalog rail were each pushing the page wider than the viewport, which
   turns every page into a horizontal scroller. */
@media (max-width: 780px) {
  /* Two CTAs plus a toggle plus a burger do not fit. "Sign in" is the one
     that has to stay reachable; "Get started" lives in the menu below. */
  .nav__right .btn--ember {
    display: none;
  }

  .nav__right {
    gap: var(--space-3);
  }

  /* A grid item defaults to min-width:auto, so the rail's content sets the
     track's minimum and the single-column catalog grew past the viewport. */
  .catalog {
    grid-template-columns: minmax(0, 1fr);
  }

  .rail,
  .results {
    min-width: 0;
    max-width: 100%;
  }

  /* The menu's own copy of the primary CTA, shown only once the menu is
     open. */
  .nav--open .nav__cta-mobile {
    display: block;
    margin-top: var(--space-3);
  }

  .nav--open .nav__cta-mobile .btn {
    width: 100%;
  }
}

.nav__cta-mobile {
  display: none;
}

/* -- 27. Ellipsis needs a block box -------------------------------------
   These are <span> elements in the markup, and overflow / text-overflow do
   not apply to a non-replaced inline box. Left inline, `white-space: nowrap`
   made each one's min-content width the width of the whole untruncated
   string, which is what pushed the catalog grid past the viewport on a
   phone. Making them block boxes lets the ellipsis actually engage. */
.tile__name,
.tile__vendor,
.flowcard__title,
.flowcard__sub,
.node__sub {
  display: block;
}

/* The flex child holding them must also be allowed to shrink below its
   content, or the block box never gets a chance to truncate. */
.tile__top > span,
.flowcard__text {
  min-width: 0;
  overflow: hidden;
}

/* -- 28. Grid items must be allowed to shrink ---------------------------
   A grid (or flex) item's automatic minimum size is its min-content width,
   and that only stops applying when min-width is set explicitly. The tile's
   min-content is large because .tile__summary is a -webkit-box line-clamp,
   whose min-content resolves to the unwrapped text - so a single-column grid
   on a phone was sizing its track to ~444px inside a 358px container.
   Setting min-width:0 removes the automatic minimum and lets the track win. */
.grid > *,
.detailbody > *,
.catalog > *,
.split > *,
.steps > * {
  min-width: 0;
}

/* The API table is intentionally wider than a phone; it scrolls inside its
   own wrapper rather than widening the page. That only holds if the panel
   around it is allowed to be narrower than the table. */
.panel,
.tablewrap {
  min-width: 0;
  max-width: 100%;
}

/* -- 29. Catalog depth --------------------------------------------------
   The catalog holds 8,733 connectors at two very different depths: 292
   researched in full, and the rest catalogued from public directories with
   an unconfirmed API surface. The UI has to make that legible at a glance
   without turning the majority into visual noise - so a listing is quieter
   than a curated app, never louder. */
.chip--quiet {
  background: transparent;
  border-style: dashed;
  color: var(--text-faint);
}

.tile--listed .tile__mark {
  background: var(--surface-3);
  color: var(--text-muted);
  border-color: var(--line-strong);
}

/* A panel that states a limit of what we know. Orange, because that is this
   palette's "a human still has to look at this" colour. */
.panel--flagged {
  border-color: var(--ember-border);
  background: var(--ember-tint);
}

.panel--flagged .panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--ember-text);
}

.panel--flagged .panel__title svg {
  width: 19px;
  height: 19px;
  flex: none;
}

/* -- 30. Pager ----------------------------------------------------------
   91 pages of browse results, so the pager shows first, last and a window
   around the current page rather than every number. */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}

.pager__num,
.pager__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

.pager__num:hover,
.pager__step:hover {
  background: var(--surface-3);
  text-decoration: none;
}

.pager__num[aria-current='page'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: var(--weight-semibold);
}

.pager__step {
  font-weight: var(--weight-semibold);
}

.pager__gap {
  padding: 0 var(--space-2);
  color: var(--text-faint);
}

.results__page {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--text-faint);
}

/* The lede carries <strong> counts; keep them readable against the muted
   body colour they sit in. */
.results__lede strong {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

/* -- 31. Search results -------------------------------------------------
   Search reaches the whole catalog, not just the tiles on this page, so its
   results replace the grid and the pager steps aside while it is active. */
.searching #pager {
  display: none;
}

.search__status {
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.search__status[hidden] {
  display: none;
}

/* A dapp's icon: our own mark for our own dapp, drawn from the catalog's
   colour and the name's initials. Square, because every one of them is. */
.tile__icon {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  flex: 0 0 auto;
  display: block;
}

/* A dapp we could not find a real mark for shows no image rather than an
   invented one: the space is honest, a wrong logo is not. */
.tile__icon--none {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  flex: 0 0 auto;
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--line);
}