/* =========================================================================
   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, 15, 25, 0.05);
  --shadow-sm: 0 1px 2px rgba(10, 15, 25, 0.05), 0 2px 6px rgba(10, 15, 25, 0.05);
  --shadow-md: 0 1px 2px rgba(10, 15, 25, 0.05), 0 4px 12px rgba(10, 15, 25, 0.07);
  --shadow-lg: 0 8px 28px rgba(10, 15, 25, 0.12);
  --shadow-xl: 0 18px 48px rgba(10, 15, 25, 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: #f8f9fb;
  --surface-3: #eef1f5;
  --canvas: #fafbfd;
  --canvas-dot: #d3d9e2;

  --line: #e6e9ee;
  --line-strong: #d2d8e0;

  /* Text steps all clear WCAG AA (4.5:1) on --surface. */
  --text: #0b111a;
  --text-muted: #56606e;
  --text-faint: #69737f;
  --text-inverse: #ffffff;

  /* Green - the accent, and the colour of an engine-validated result. */
  --accent: #0b5fbf;
  --accent-hover: #094e9e;
  --accent-soft: #4a90e2;
  --accent-tint: #eef4fc;
  --accent-tint-2: #dce9f9;
  --accent-border: #b7d0f0;
  --accent-contrast: #ffffff;
  --accent-glow: rgba(11, 95, 191, 0.32);

  /* Orange - the second accent: CTAs, and the human-approval gate. */
  --ember: #0b5fbf;
  --ember-hover: #094e9e;
  --ember-soft: #4a90e2;
  --ember-tint: #eef4fc;
  --ember-border: #b7d0f0;
  --ember-contrast: #ffffff;
  --ember-text: #0a4f9e;

  /* 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: #0b111a;
  --ink-2: #121a26;
  --ink-3: #1b2533;
  --ink-line: #2a3647;
  --ink-text: #cfd7e2;
  --ink-muted: #8d98a8;

  --scrim: rgba(11, 17, 26, 0.46);
  --kbd-bg: #f7f8fa;

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

  --control-bg: #f4f6f9;
  --control-border: #8b95a3;

  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: #0d121a;
    --surface-2: #121823;
    --surface-3: #1a2230;
    --canvas: #0a0e15;
    --canvas-dot: #262f3d;

    --line: #222b38;
    --line-strong: #333e4e;

    --text: #e8edf3;
    --text-muted: #a3aebb;
    --text-faint: #8b97a6;
    --text-inverse: #0b111a;

    --accent: #5aa2f0;
    --accent-hover: #78b4f4;
    --accent-soft: #3d8ae0;
    --accent-tint: #0e1a2b;
    --accent-tint-2: #132339;
    --accent-border: #1e3a5f;
    --accent-contrast: #051224;
    --accent-glow: rgba(90, 162, 240, 0.34);

    --ember: #5aa2f0;
    --ember-hover: #78b4f4;
    --ember-soft: #3d8ae0;
    --ember-tint: #0e1a2b;
    --ember-border: #1e3a5f;
    --ember-contrast: #051224;
    --ember-text: #8cbef5;

    --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: #070a10;
    --ink-2: #0d121a;
    --ink-3: #151c27;
    --ink-line: #262f3d;
    --ink-text: #cfd7e2;
    --ink-muted: #8b97a6;

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

    --focus-ring: 0 0 0 3px rgba(90, 162, 240, 0.34);
    --field-ring: 0 0 0 3px rgba(90, 162, 240, 0.16);

    --control-bg: #151c27;
    --control-border: #556070;

    --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: #0d121a;
  --surface-2: #121823;
  --surface-3: #1a2230;
  --canvas: #0a0e15;
  --canvas-dot: #262f3d;

  --line: #222b38;
  --line-strong: #333e4e;

  --text: #e8edf3;
  --text-muted: #a3aebb;
  --text-faint: #8b97a6;
  --text-inverse: #0b111a;

  --accent: #5aa2f0;
  --accent-hover: #78b4f4;
  --accent-soft: #3d8ae0;
  --accent-tint: #0e1a2b;
  --accent-tint-2: #132339;
  --accent-border: #1e3a5f;
  --accent-contrast: #051224;
  --accent-glow: rgba(90, 162, 240, 0.34);

  --ember: #5aa2f0;
  --ember-hover: #78b4f4;
  --ember-soft: #3d8ae0;
  --ember-tint: #0e1a2b;
  --ember-border: #1e3a5f;
  --ember-contrast: #051224;
  --ember-text: #8cbef5;

  --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: #070a10;
  --ink-2: #0d121a;
  --ink-3: #151c27;
  --ink-line: #262f3d;
  --ink-text: #cfd7e2;
  --ink-muted: #8b97a6;

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

  --focus-ring: 0 0 0 3px rgba(90, 162, 240, 0.34);
  --field-ring: 0 0 0 3px rgba(90, 162, 240, 0.16);

  --control-bg: #151c27;
  --control-border: #556070;

  --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(--fs-body);
  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;
}

/* The mark is the disc itself - its own blue, white pipes - so it needs no
   tile behind it, and one artwork reads on both themes (6.17:1 on white,
   3.40:1 on black). */
.brand__mark {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
}

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

.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(--hover-tint);
  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(--hover-tint);
  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: 15px;
  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(--fs-btn);
  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(--hover-tint);
}

/* 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(--accent-hover);
}

.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: #d7dee8;
}

.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(--fs-label);
  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(74, 144, 226, 0.22), transparent 68%),
    radial-gradient(520px 320px at 88% 82%, rgba(11, 95, 191, 0.2), 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: #c3cdd9;
}

.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: #939eab;
}

/* -- 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(74, 144, 226, 0.18);
  color: var(--accent-soft);
}

.flowcard--gate .flowcard__tag {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink-text);
}

/* 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--check {
  border-color: var(--accent-soft);
}

.flowwire--check::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(--fs-h3);
  font-weight: 650;
  color: var(--text);
}

.card__body {
  margin-top: var(--space-5);
  font-size: var(--fs-card);
  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(--hover-tint);
  text-decoration: none;
}

.rail__row[aria-selected='true'],
.rail__row[aria-current='page'] {
  background: var(--accent-tint);
  color: var(--accent-hover);
  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(--accent-hover);
}

/* 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(--hover-tint);
}

.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(--accent-hover);
}

/* -- 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(--fs-h1);
  font-weight: 650;
  letter-spacing: -0.026em;
}

.results__lede {
  margin-top: var(--space-5);
  max-width: 70ch;
  font-size: var(--fs-lead);
  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(--accent-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.filterpill button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 13.5px;
  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--check {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(74, 144, 226, 0.1), 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--check .rolecard__tag {
  background: rgba(74, 144, 226, 0.2);
  color: var(--accent-soft);
}

.rolecard--human .rolecard__tag {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink-text);
}

.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(--fs-h3);
  font-weight: 650;
}

.step p {
  margin-top: var(--space-5);
  font-size: var(--fs-card);
  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(--fs-h2);
  font-weight: 650;
  letter-spacing: -0.026em;
  color: #ffffff;
}

.ctaband p {
  margin: var(--space-6) auto 0;
  max-width: 60ch;
  font-size: var(--fs-lead);
  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(--fs-small);
  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(--fs-small);
  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);
  }


  .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(--fs-h1);
  font-weight: 650;
  }

  .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;
    grid-column: 1 / -1;
    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(--hover-tint);
  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);
}

/* Apps directory: the category groups in the results pane, and the rail as
   its table of contents. scroll-margin keeps a jumped-to heading clear of the
   sticky nav. On a narrow screen the rail sits above the results; capped so
   thirty-odd categories do not push the apps off the first screen. */
.appgroup {
  margin-top: var(--space-11);
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.appgroup__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.appgroup__head h2 {
  margin: 0;
  font-size: var(--fs-h2s);
  font-weight: 650;
}

.appgroup__head p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.appgroup__ask {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
  font-style: italic;
}

.appsub {
  margin-top: var(--space-8);
}

.appsub__title {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-label);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* The asks: the left pane as a question. One row per area - the name, the
   kind of sentence people type, and the marks of a few apps that answer it.
   No counts: a column of numbers is a directory; this is an invitation. */
.asks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ask {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border-left: 3px solid transparent;
  color: var(--text);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.ask:hover {
  background: var(--hover-tint);
  text-decoration: none;
}

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

.ask__name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
}

.ask__eg {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.35;
}

.ask__marks {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  min-height: 20px;
}

.ask__marks img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
}

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

.rail__foot {
  margin: var(--space-8) var(--space-5) 0;
  font-size: var(--fs-label);
  line-height: 1.45;
  color: var(--text-faint);
}

@media (max-width: 900px) {
  .rail--asks {
    max-height: 300px;
    overflow-y: auto;
  }
  .ask__eg {
    display: none;
  }
}

/* =========================================================================
   23. 2026-10 redesign: home + pricing
   Self-hosted Inter / JetBrains Mono, a denser type scale, and compact
   sections: a visitor should see the whole idea in two screens.
   ========================================================================= */
@font-face {
  font-family: 'Inter';
  src: url('/assets/inter.3100e775e861.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/jetbrains-mono.18be452724bf.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --nav-height: 56px;
  --page-max: 1200px;
  --sec-y: 56px;
  /* One type scale for every page (owner, 2026-10-28: "fonts are uneven across the web pages").
     Each role has one size wherever it appears; only the landing pages' hero title is larger. */
  --fs-hero: clamp(32px, 3.6vw, 44px);
  --fs-h1: clamp(26px, 2.6vw, 32px);
  --fs-h2: clamp(22px, 2.2vw, 26px);
  --fs-h2s: clamp(18px, 1.6vw, 20px);
  --fs-h3: 16px;
  --fs-lead: 16px;
  --fs-body: 15px;
  --fs-card: 14px;
  --fs-small: 13px;
  --fs-label: 12px;
  --fs-btn: 14px;
}

body {
  font-size: var(--fs-body);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

.nav__links {
  gap: 2px;
}

.nav__link {
  font-size: 13.5px;
}

.btn {
  padding: 9px 16px;
  font-size: var(--fs-btn);
  border-radius: 8px;
}

.btn--sm {
  padding: 6px 12px;
  font-size: 13.5px;
}

.btn--block {
  display: flex;
  width: 100%;
}

.eyebrow {
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.center {
  text-align: center;
}

/* -- Sections ----------------------------------------------------------- */
.sec {
  padding: var(--sec-y) 0;
}

.sec--top {
  padding-top: 40px;
}

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

.sec__head {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
}


.sec__head--left {
  margin: 0;
  text-align: left;
}

/* Any heading without a rule of its own still takes the scale (a browser's default is 1.5em or 2em
   of whatever it sits in). */
h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

.sec__head h2,
.h1s {
  font-size: var(--fs-h2);
  letter-spacing: -0.022em;
  font-weight: 650;
}

.h1s {
  font-size: var(--fs-h1);
  font-weight: 650;
}

.sec__head > p:not(.eyebrow) {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.55;
}

.fineprint {
  margin-top: 18px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--text-faint);
}

/* -- Hero --------------------------------------------------------------- */
.h-hero {
  padding: 44px 0 40px;
  background:
    radial-gradient(900px 380px at 85% -10%, var(--accent-tint), transparent 70%),
    var(--surface);
  border-bottom: 1px solid var(--line);
}

.h-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}

.h-hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  white-space: nowrap;
}

.h-hero__lead {
  margin-top: 14px;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 52ch;
}

.h-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.h-hero__cta .btn {
  padding: 11px 20px;
  font-size: var(--fs-btn);
}

.ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.ticks li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ticks li::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  background: var(--success-tint)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%2312864a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 12px no-repeat;
  border: 1px solid var(--success-border);
}

.ticks--col {
  flex-direction: column;
  gap: 8px;
}

/* A screenshot in a browser frame. */
.shot {
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.shot__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
}

.shot__bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}

.shot__bar em {
  margin-left: 10px;
  font-style: normal;
  font-size: 12px;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

.shot img {
  width: 100%;
  height: auto;
}

/* -- Channels strip ------------------------------------------------------ */
.band--channels {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.channels {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.channels__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.channels__list li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 550;
  color: var(--text);
}

.appi {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  padding: 3px;
  flex: none;
}

.channels__list .appi {
  width: 22px;
  height: 22px;
  padding: 2px;
}

/* -- How AnnE works ----------------------------------------------------- */
.how {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 36px;
  align-items: center;
}

.hsteps {
  display: grid;
  gap: 14px;
}

.hsteps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
}

.hsteps__n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-tint);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-weight: 650;
  font-size: 13.5px;
}

.hsteps h3 {
  font-size: var(--fs-h3);
  font-weight: 650;
}

.hsteps p {
  margin-top: 3px;
  font-size: var(--fs-card);
  line-height: 1.55;
  color: var(--text-muted);
}

/* -- Chat illustration -------------------------------------------------- */
.chat2 {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 40px;
  align-items: center;
}

.chat2 .ticks--col {
  margin-top: 16px;
}

.convo {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  padding: 4px 0 8px;
  font-size: var(--fs-card);
}

.convo__app {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-weight: 650;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line);
}

.convo__app img {
  width: 18px;
  height: 18px;
}

.convo__app--teams {
  margin-top: 6px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.msg {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  padding: 8px 14px 2px;
}

.msg b {
  font-weight: 650;
}

.msg em {
  font-style: normal;
  font-size: var(--fs-label);
  color: var(--text-faint);
  margin-left: 4px;
}

.msg p {
  margin-top: 1px;
  line-height: 1.5;
  color: var(--text);
}

.msg--later {
  margin-top: 4px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}

.msg__who {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: var(--fs-label);
  font-weight: 700;
}

.msg__who--u {
  background: #fde7d9;
  color: #9a3d0c;
}

.msg__who--a {
  background: var(--accent);
  color: #fff;
}

.msg__btns {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.msg__btns span {
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
}

.msg__btns span:first-child {
  background: #007a5a;
  border-color: #007a5a;
  color: #fff;
}

/* -- Example tabs (CSS-only radio tabs) --------------------------------- */
.extabs > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.extabs__bar {
  display: flex;
  justify-content: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 20px;
  padding: 4px;
  background: var(--surface-3);
  border-radius: 9px;
  overflow-x: auto;
}

.extabs__bar label {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.expane {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

#ex-smb:checked ~ .extabs__bar label[for='ex-smb'],
#ex-ops:checked ~ .extabs__bar label[for='ex-ops'],
#ex-ent:checked ~ .extabs__bar label[for='ex-ent'] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

#ex-smb:checked ~ .expane[data-for='ex-smb'],
#ex-ops:checked ~ .expane[data-for='ex-ops'],
#ex-ent:checked ~ .expane[data-for='ex-ent'] {
  display: grid;
}

#ex-smb:focus-visible ~ .extabs__bar label[for='ex-smb'],
#ex-ops:focus-visible ~ .extabs__bar label[for='ex-ops'],
#ex-ent:focus-visible ~ .extabs__bar label[for='ex-ent'] {
  box-shadow: var(--focus-ring);
}

.ex {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.ex__head h3 {
  margin-top: 10px;
  font-size: var(--fs-h3);
  font-weight: 650;
}

.flow {
  display: flex;
  align-items: center;
  gap: 6px;
}

.flow__arrow {
  color: var(--text-faint);
  font-size: 13.5px;
}

.ex__says {
  font-size: var(--fs-card);
  line-height: 1.5;
  padding: 9px 11px;
  background: var(--accent-tint);
  border-radius: 7px;
  color: var(--text);
}

.ex__result {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: auto;
}

/* -- Trust cards -------------------------------------------------------- */
.cards4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.cards4 .c {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.cards4 h3 {
  font-size: var(--fs-h3);
  font-weight: 650;
}

.cards4 p {
  margin-top: 6px;
  font-size: var(--fs-card);
  line-height: 1.55;
  color: var(--text-muted);
}

/* -- Pricing teaser ----------------------------------------------------- */
.tease {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 860px;
  margin: 0 auto 20px;
}

.tease__c {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 13.5px;
  background: var(--surface);
}

.tease__c:hover {
  text-decoration: none;
  border-color: var(--accent-border);
}

.tease__c b {
  color: var(--text);
  font-size: 13.5px;
}

.tease__c--on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.tease__p {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.tease__p small {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
}

/* -- Closer ------------------------------------------------------------- */
.closer {
  background: var(--ink);
  color: var(--ink-text);
  padding: 36px 0;
}

.closer__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.closer h2 {
  color: #fff;
  font-size: var(--fs-h2);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.closer p {
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: var(--fs-lead);
}

.closer__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* -- Pricing page ------------------------------------------------------- */
.billing > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seg {
  display: flex;
  width: max-content;
  margin: 0 auto 22px;
  padding: 4px;
  gap: 4px;
  background: var(--surface-3);
  border-radius: 9px;
}

.seg label {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.seg em {
  font-style: normal;
  font-weight: 600;
  color: var(--success-text);
  margin-left: 4px;
}

#bill-y:checked ~ .seg label[for='bill-y'],
#bill-m:checked ~ .seg label[for='bill-m'] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

#bill-y:focus-visible ~ .seg label[for='bill-y'],
#bill-m:focus-visible ~ .seg label[for='bill-m'] {
  box-shadow: var(--focus-ring);
}

.plans .pm,
#bill-m:checked ~ .plans .py {
  display: none;
}

#bill-m:checked ~ .plans .pm {
  display: inline;
}

.plans {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.plan--on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-md);
}

.plan__flag {
  position: absolute;
  top: -10px;
  left: 16px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
}

.plan h3 {
  font-size: var(--fs-h3);
  font-weight: 650;
}

.plan__for {
  margin-top: 4px;
  min-height: 2.9em;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text-muted);
}

.plan__price {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.plan__price span {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.plan__price small {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.plan__credits {
  margin: 2px 0 14px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent);
}

.plan__feats {
  margin-top: 14px;
  display: grid;
  gap: 7px;
  font-size: var(--fs-small);
  line-height: 1.4;
}

.plan__feats li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 7px;
}

.plan__feats li::before {
  content: '';
  width: 14px;
  height: 14px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2l3 3L12.5 5' fill='none' stroke='%230b5fbf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}

.compare {
  font-size: 13.5px;
  min-width: 720px;
}

.compare th,
.compare td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.compare tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
}

.compare thead th {
  font-weight: 650;
  background: var(--surface);
  position: sticky;
  top: 0;
}

.compare .on,
.compare td:nth-child(4) {
  background: var(--accent-tint);
}

.compare tbody tr:last-child > * {
  border-bottom: 0;
}

/* The credits example beside the plan comparison (2026-10-24): no Team column to light, text
   left where a cell is a sentence. */
.compare--plain td:nth-child(4) {
  background: none;
}

.compare--plain td,
.compare--left td {
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.compare--left th {
  text-align: left;
}

.compare .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* What a credit is: three kinds of work, then the rules. */
.cards3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cards3 .c {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.cards3 h3 {
  margin-top: 6px;
  font-size: var(--fs-h3);
  font-weight: 650;
}

.cards3 p {
  margin-top: 6px;
  font-size: var(--fs-card);
  line-height: 1.55;
  color: var(--text-muted);
}

.cards3 .credit__n {
  margin-top: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.credit__n small {
  margin-left: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
}

.creditrules {
  max-width: 820px;
  margin-top: 28px;
}

.creditrules h3 {
  font-size: var(--fs-h3);
  font-weight: 650;
}

.creditrules ul,
.policy ul {
  margin-top: 10px;
  padding-left: 20px;
  list-style: disc;
  display: grid;
  gap: 8px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-muted);
}

.creditsum {
  margin-top: 14px;
  font-weight: 600;
}

/* A policy page: one readable column. */
.policy {
  max-width: 760px;
}

.policy h2 {
  margin-top: 32px;
  font-size: var(--fs-h2s);
  font-weight: 650;
}

.policy p:not(.eyebrow) {
  margin-top: 10px;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-muted);
}

.policy strong {
  color: var(--text);
}

.policy .policy__date {
  margin-top: 6px;
  font-size: var(--fs-small);
  color: var(--text-faint);
}

@media (max-width: 760px) {
  .cards3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.faqgrid {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: 36px;
}

.faqgrid h2 {
  font-size: var(--fs-h2);
  font-weight: 650;
}

.faqgrid > div > p {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: var(--fs-card);
}

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-body);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.faq summary::after {
  content: '+';
  color: var(--text-faint);
  font-weight: 400;
}

.faq details[open] summary::after {
  content: '\2212';
}

.faq details p {
  margin-top: 8px;
  font-size: var(--fs-card);
  line-height: 1.6;
  color: var(--text-muted);
}

/* -- Footer, tighter ---------------------------------------------------- */
.footer {
  padding: 40px 0 24px;
}

.footer__bar {
  margin-top: 28px;
}

/* -- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .expane {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cards4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .h-hero__grid,
  .how,
  .chat2,
  .faqgrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .h-hero h1 {
    white-space: normal;
  }

  .expane {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .expane {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  :root {
    --sec-y: 40px;
  }

  .wrap {
    padding: 0 16px;
  }

  .plans,
  .tease {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The tabs wrap to a second line rather than run off the edge. */
  .extabs__bar {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
}

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

.compare th,
.compare td {
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--fs-small);
}

.compare thead th {
  font-size: var(--fs-small);
  color: var(--text);
}

.compare td.no {
  color: var(--text-faint);
}

/* =========================================================================
   24. Developers: hub and master-detail (examples, formulas)
   ========================================================================= */
.devhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: end;
  max-width: none;
  margin-bottom: 24px;
}

/* The developer pages in one row across the top (owner 2026-10-09). */
.devhead__links {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}

@media (max-width: 1100px) {
  .devhead__links {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.devlink {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--text);
}

.devlink:hover {
  text-decoration: none;
  border-color: var(--accent);
}

.devlink b {
  font-size: 15px;
}

.devlink span {
  font-size: 13.5px;
  color: var(--text-muted);
}

.hubg {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.hubg h2 {
  font-size: var(--fs-label);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding-top: 4px;
}

.hubg__cards {
  display: grid;
  /* Five columns in every group, so cards line up from group to group; a card in a
     smaller group spans --span of them (dev_pages.build_hub_body). */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.hubg__cards > .hubc {
  grid-column: span var(--span, 1);
}

@media (max-width: 1100px) {
  .hubg__cards {
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  }

  .hubg__cards > .hubc {
    grid-column: auto;
  }
}

.hubc {
  display: flex;
  flex-direction: column;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.hubc h3 {
  font-size: var(--fs-h3);
  font-weight: 650;
}

.hubc p {
  margin-top: 5px;
  font-size: var(--fs-card);
  line-height: 1.55;
  color: var(--text-muted);
}

.hubc__more {
  margin-top: auto;
  padding-top: 8px;
  font-size: 13.5px;
  font-weight: 600;
}

/* Master-detail: the page itself does not scroll on desktop; each pane does. */
.mdpage {
  padding: 16px 0 20px;
}

.mdhead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 28px;
  align-items: end;
  margin-bottom: 14px;
}

.mdhead .eyebrow {
  margin-bottom: 4px;
}

.mdhead h1 {
  font-size: var(--fs-h1);
  letter-spacing: -0.02em;
  font-weight: 650;
  white-space: nowrap;
}

.mdhead__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-muted);
}

.md {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  height: calc(100vh - var(--nav-height) - 120px);
  min-height: 520px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.md__side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
}

.md__search {
  margin: 10px 10px 6px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  font: inherit;
  font-size: 13.5px;
  background: var(--surface);
  color: var(--text);
}

.md__search:focus {
  outline: none;
  box-shadow: var(--field-ring);
  border-color: var(--accent);
}

.md__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--line);
}

.chip2 {
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.chip2 span {
  color: var(--text-faint);
  font-weight: 500;
}

.chip2.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.chip2.is-on span {
  color: rgba(255, 255, 255, 0.8);
}

.md__list {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}

.mdi {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}

.mdi--f {
  grid-template-columns: minmax(0, 1fr);
}

.mdi:hover {
  background: var(--hover-tint);
}

.mdi.is-on {
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--accent), var(--shadow-xs);
}

.mdi__n {
  width: 22px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  text-align: right;
}

.mdi__t {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  min-width: 0;
}

.mdi__t small {
  display: block;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mdi__apps {
  display: flex;
}

.mdi__apps > * {
  width: 20px !important;
  height: 20px !important;
  padding: 2px !important;
  margin-left: -4px;
  font-size: 9px !important;
  border-radius: 5px !important;
}

.md__detail {
  overflow-y: auto;
  padding: 20px 24px;
  min-height: 0;
}

.mdd__head h2 {
  margin-top: 6px;
  font-size: var(--fs-h2s);
  letter-spacing: -0.02em;
  font-weight: 650;
}

.mdd__lead {
  margin-top: 6px;
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: 1.55;
}

.mdd__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--fs-label);
  color: var(--text-muted);
}

.mdd__tags span {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  font-weight: 600;
}

.mdd__tags .lv--1 { background: var(--success-tint); color: var(--success-text); }
.mdd__tags .lv--2 { background: var(--accent-tint); color: var(--accent); }
.mdd__tags .lv--3 { background: var(--warning-tint); color: var(--warning-text); }
.mdd__tags .lv--4 { background: var(--danger-tint); color: var(--danger-text); }
.mdd__tags .lv--f { background: var(--accent-tint); color: var(--accent); }

.says {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-border);
}

.says__who {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  padding-top: 2px;
}

.says p {
  font-size: var(--fs-card);
  line-height: 1.5;
}

.mdd__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 20px;
  margin-top: 14px;
}

.canvas {
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background-color: var(--canvas);
  background-image: radial-gradient(var(--canvas-dot) 1px, transparent 1px);
  background-size: 16px 16px;
  overflow: hidden;
}

.canvas figcaption {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.canvas figcaption em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  color: var(--success-text);
  background: var(--success-tint);
  border: 1px solid var(--success-border);
  border-radius: 999px;
  padding: 1px 8px;
}

.canvas__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}

.nodes {
  padding: 14px 18px;
  display: grid;
  gap: 14px;
}

.node {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  max-width: 320px;
}

.node + .node::before {
  content: '';
  position: absolute;
  left: 22px;
  top: -15px;
  height: 14px;
  border-left: 2px solid var(--accent-border);
}

.node__tx b {
  display: block;
  font-size: 12px;
  font-weight: 650;
}

.node__tx small {
  display: block;
  font-size: var(--fs-label);
  color: var(--text-muted);
  line-height: 1.35;
}

.node .appi {
  width: 26px;
  height: 26px;
}

.bi {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #fff;
  background: #5b6b80;
  flex: none;
}

.bi--map, .bi--filter, .bi--router, .bi--dedup { background: #0b5fbf; }
.bi--approval { background: #c2410c; }
.bi--code { background: #3b6e3b; }
.bi--table, .bi--form, .bi--file { background: #6d28d9; }
.bi--webhook, .bi--schedule, .bi--runner { background: #334155; }

.mdd__how h3 {
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 14px 0 6px;
}

.mdd__how h3:first-child {
  margin-top: 0;
}

.mdd__how p,
.howl {
  font-size: var(--fs-card);
  line-height: 1.55;
}

.howl {
  list-style: decimal;
  padding-left: 18px;
  display: grid;
  gap: 3px;
}

.howl b {
  font-weight: 650;
}

.mdd__apps {
  margin-top: 12px;
  font-size: var(--fs-small) !important;
  color: var(--text-faint);
}

/* Formula detail */
.fx {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.fx__label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.fx__label em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--success-text);
  margin-left: 6px;
}

.fx__formula code {
  display: block;
  padding: 11px 13px;
  border-radius: 8px;
  background: #0f1724;
  color: #e6edf6;
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.fx__io {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.fx pre {
  margin: 0;
  padding: 10px 12px;
  max-height: 46vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}

.fx__out {
  background: var(--success-tint) !important;
  border-color: var(--success-border) !important;
}

@media (max-width: 1100px) {
  .mdd__grid,
  .fx__io {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .devhead,
  .hubg,
  .mdhead {
    grid-template-columns: minmax(0, 1fr);
  }

  .mdhead h1 {
    white-space: normal;
  }

  .md {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .md__side {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .md__list {
    max-height: 300px;
  }

  .md__detail {
    overflow: visible;
    padding: 16px;
  }
}

.md__select {
  margin: 0 0 0;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  font: inherit;
  font-size: 13.5px;
  background: var(--surface);
  color: var(--text);
}

.md__list {
  position: relative;
}

.fx pre + .fx__label {
  margin-top: 10px;
}

.devhead__lead {
  margin-top: 8px;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-muted);
}

.hubg {
  grid-template-columns: 130px minmax(0, 1fr);
  padding: 14px 0;
}

.hubg__cards {
  gap: 10px;
}

.hubc {
  padding: 12px;
}

.hubc p {
  font-size: var(--fs-card);
  line-height: 1.5;
}

/* =========================================================================
   25. Example process graphs (owner, 2026-10-07: "more detailed, use more
   screen space and move explanation text below")
   ========================================================================= */
.mdd--wide .canvas--graph {
  margin-top: 14px;
}

.canvas__scroll {
  overflow-x: auto;
  padding: 6px 4px 10px;
}

.pg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  font-family: var(--font-sans);
}

.pg__e {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.6;
}

.pg__e--back {
  stroke-dasharray: 5 4;
  stroke: var(--warning);
}

.pg__arrow {
  fill: var(--line-strong);
}

.pg__lab rect {
  fill: var(--surface);
  stroke: var(--accent-border);
}

.pg__lab text {
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--accent);
  text-anchor: middle;
}

.pg__n {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  position: relative;
}

.pg__n--trigger { border-color: #94a3b8; background: var(--surface-3); }
.pg__n--route { border-color: var(--accent-border); }
.pg__n--person { border-color: #fdba74; background: #fff7ed; }
.pg__n--code { border-color: #a7d3a7; }

.pg__n .appi,
.pg__n .bi {
  width: 26px;
  height: 26px;
  flex: none;
}

.pg__t {
  min-width: 0;
  line-height: 1.2;
}

.pg__t b {
  display: block;
  font-size: var(--fs-label);
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pg__t small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 10.5px;
  color: var(--text-muted);
}

.pg__rule {
  position: absolute;
  top: -7px;
  right: 6px;
  padding: 0 5px;
  border-radius: 999px;
  font: 600 9.5px var(--font-mono);
  background: var(--accent);
  color: #fff;
}

.bi--trigger { background: #475569; }
.bi--route { background: #0b5fbf; }
.bi--shape { background: #2563eb; }
.bi--person { background: #c2410c; }
.bi--table, .bi--file { background: #6d28d9; }

.mdd__below {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 16px;
}

.mdd__side h3,
.mdd__how h3 {
  font-size: var(--fs-label);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.mdd__side h3 + p {
  margin-bottom: 14px;
  font-size: var(--fs-card);
  line-height: 1.55;
}

.howl {
  list-style: decimal;
  padding-left: 22px;
  display: grid;
  gap: 8px;
}

.howl__h b {
  font-weight: 600;
}

.howl__a {
  font-size: 12px;
  color: var(--text-faint);
  margin-left: 4px;
}

.howl__b {
  margin-top: 2px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.howl__b em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}

.rule {
  margin-top: 5px;
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12px;
}

.rule code {
  font-size: var(--fs-label);
  word-break: break-word;
}

.rule > code {
  display: block;
  color: var(--text);
}

.rule__try {
  margin-top: 4px;
  color: var(--text-muted);
}

.rule__out {
  color: var(--success-text);
  font-weight: 600;
}

@media (max-width: 1100px) {
  .mdd__below {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Examples switch and the formulas-as-dbt-macros page (/developers/dbt/macros/) ---- */
.extabs {
  display: flex;
  gap: 4px;
  margin: var(--space-5) 0 var(--space-3);
  border-bottom: 1px solid var(--line);
}
.extabs a {
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.extabs a:hover { color: var(--text); text-decoration: none; }
.extabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

.dbtpage { padding-bottom: var(--space-6); }
.dbtstory, .dbtsec { margin-top: var(--space-7); }
.dbtstory h2, .dbtsec h2 { font-size: var(--fs-h2s);
  font-weight: 650; margin: 0 0 var(--space-3); }
.dbtsec > p { color: var(--text-muted); }
.dbtsec__h3 { font-size: var(--fs-h3);
  font-weight: 650; margin: var(--space-6) 0 var(--space-2); }
.dbtstory__steps { display: grid; gap: var(--space-3); padding-left: 20px; }
.dbtstory__steps li { line-height: var(--leading-relaxed); }
.dbtstory code, .dbtsec code, .dbtnot code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  word-break: break-word;
}
.dbtfacts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.dbtfacts div {
  border: 1px solid var(--accent-border);
  background: var(--accent-tint);
  border-radius: 10px;
  padding: 12px 14px;
}
.dbtfacts b { display: block; font-size: 26px; color: var(--accent); }
.dbtfacts span { font-size: 13.5px; color: var(--text-muted); }
.dbtproof { padding-left: 20px; display: grid; gap: 6px; }
.dbtuses {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.dbtuses li { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.dbtuses h3 { font-size: var(--fs-h3);
  font-weight: 650; margin: 0 0 4px; }
.dbtuses p { margin: 0 0 8px; font-size: var(--fs-card); color: var(--text-muted); }
.dbtuses pre, .dbtw pre {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #0f1724;
  color: #e6edf6;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.dbtq { border: 1px solid var(--line); border-radius: 10px; margin-top: var(--space-2); background: var(--surface); }
.dbtq summary { cursor: pointer; padding: 10px 14px; line-height: 1.5; }
.dbtq summary b { margin-right: 6px; }
.dbtq summary span { color: var(--text-muted); font-size: 13.5px; }
.dbtq__f { margin: 0 14px 8px; font-size: var(--fs-card); color: var(--text-muted); }
.dbtq__sql { width: calc(100% - 28px); min-width: 0; margin: 0 14px 12px; border-collapse: collapse; font-size: var(--fs-small); }
.dbtq__sql th { text-align: left; font-weight: var(--weight-semibold); padding: 6px 10px 6px 0; vertical-align: top; width: 12em; color: var(--text-muted); }
.dbtq__sql td { padding: 4px 0; border-top: 1px solid var(--line); }
.dbtq__sql tr:first-child td { border-top: 0; }
.dbtq__sql code { display: block; white-space: pre-wrap; word-break: break-word; }
.dbtnot { padding-left: 20px; display: grid; gap: 8px; }
.dbtnot b { margin-right: 4px; }
.dbtws { display: grid; gap: 6px; }
.dbtw { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.dbtw summary { cursor: pointer; padding: 7px 12px; font-size: var(--fs-small); font-weight: var(--weight-semibold); }
.dbtw pre { border-radius: 0 0 8px 8px; }
/* ---- dbt projects (/developers/dbt/projects/) and GitHub (/developers/github/) ---- */
.dbtw summary span { font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.dbtw .dbtq__sql { margin-top: 4px; }
.dbtp__layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.dbtp__layer { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
.dbtp__layer h3 { font-size: var(--fs-small); margin: 0 0 8px; }
.dbtp__layer h3 span { font-weight: 400; color: var(--text-muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; }
.dbtp__layer ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.dbtp__layer li { font-size: var(--fs-small); line-height: 1.45; }
.dbtp__layer small { display: block; color: var(--text-muted); font-size: 12px; }
.dbtp__kept, .dbtp__agg { font-size: 12px; padding: 1px 6px; border-radius: 999px; background: var(--accent-tint); color: var(--text-muted); white-space: nowrap; }
.dbtp__agg { display: inline-block; margin-top: 2px; }
.dbtp__uses { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dbtp__uses a, .dbtp__uses code { font-size: 12px; padding: 2px 8px; border: 1px solid var(--accent-border); border-radius: 999px; background: var(--accent-tint); }
.dbtp__uses a code { padding: 0; border: 0; background: none; }
/* A process's lineage, origin to use (/developers/processes/). */
.lin { margin: 14px 0 4px; }
.lin h3 { font-size: 13.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 8px; }
.lin__hops { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 0; align-items: stretch; }
.lin__hop { display: flex; flex-direction: column; justify-content: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: var(--fs-small); max-width: 230px; }
.lin__hop span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.lin__hop b { font-weight: var(--weight-semibold); line-height: 1.35; word-break: break-word; }
.lin__hop + .lin__hop { margin-left: 22px; position: relative; }
.lin__hop + .lin__hop::before { content: "\2192"; position: absolute; left: -17px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.lin__hop--app, .lin__hop--use { border-color: var(--accent-border); background: var(--accent-tint); }
.lin__hop--staging, .lin__hop--intermediate, .lin__hop--mart { border-style: dashed; }
.dbtf { border-top: 1px solid var(--line); }
.dbtf summary { cursor: pointer; padding: 6px 12px; font-size: var(--fs-small); }
.dbtf pre { margin: 0; border-radius: 0; max-height: 420px; overflow: auto; }
.dbtpage--top { padding-top: var(--space-7); }
.ghrepo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; align-items: start; margin-top: var(--space-3); }
.ghtree { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--surface); font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; line-height: 1.6; overflow-x: auto; }
.ghtree ul { list-style: none; margin: 0; padding-left: 14px; }
.ghtree > ul { padding-left: 0; }
.ghtree__dir { font-weight: var(--weight-semibold); }
.ghfiles { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; }
.ghfiles .dbtf:first-child { border-top: 0; }
@media (max-width: 900px) {
  .dbtp__layers, .ghrepo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .dbtfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dbtuses { grid-template-columns: minmax(0, 1fr); }
  .dbtq__sql th { display: block; width: auto; padding-bottom: 0; }
  .dbtq__sql td { display: block; }
}
.dbtstory pre {
  margin: 8px 0 2px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #0f1724;
  color: #e6edf6;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.dbtstory pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.dbtuses pre code, .dbtw pre code, .dbtsec pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

/* -- Demo page ----------------------------------------------------------- */
.demo__video {
  margin: var(--space-9) auto 0;
  max-width: 1100px;
}

.demo__video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-strong);
  background: var(--ink, #0b111a);
  box-shadow: var(--shadow-md);
}

.demo__video figcaption {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

.demo__video--pending {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  border: 1px dashed var(--line-strong);
  background: var(--surface-2);
  color: var(--text-muted);
}

.demo__ask {
  margin: 0 auto;
  max-width: 820px;
  padding: var(--space-8) var(--space-9);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: var(--fs-lead);
  line-height: var(--leading-relaxed);
  color: var(--text);
}

.demo__cta {
  text-align: center;
}

.demo__cta p {
  margin: var(--space-5) auto var(--space-7);
  max-width: 560px;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .demo__ask {
    padding: var(--space-6);
    font-size: var(--fs-lead);
  }
}

.demo__systems {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6) var(--space-8);
  margin: var(--space-9) auto 0;
  padding: 0;
  list-style: none;
}

.demo__sys {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.demo__stepapps {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.demo__caps {
  display: grid;
  gap: var(--space-10, 48px);
}

.demo__cap {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr);
  gap: var(--space-9);
  align-items: center;
}

.demo__cap:nth-child(even) .demo__captext {
  order: 2;
}

.demo__captext h3 {
  margin-top: var(--space-3);
  font-size: var(--fs-h2s);
  font-weight: 650;
}

.demo__captext p:last-child {
  margin-top: var(--space-5);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.demo__shot {
  margin: 0;
}

.demo__shot img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 560px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md);
}

.demo__shot figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .demo__cap {
    grid-template-columns: 1fr;
  }
  .demo__cap:nth-child(even) .demo__captext {
    order: 0;
  }
}

/* AnnE in chat (2026-10-25): the hero's conversation, the home pricing teaser's five plans and
   the /product/chat/ page's lists. */
.h-hero h1 {
  white-space: normal;
}

.convo--hero {
  margin: 0;
}

.convo__app img + img {
  margin-left: -4px;
}

.channels__list--center {
  justify-content: center;
  margin: 4px 0 22px;
}

.hsteps--wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.hsteps--wide li {
  grid-template-columns: 1fr;
}

.cards4--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cards4 .c > .appi,
.cards4 .c > img {
  margin-bottom: 8px;
}

.tease--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 1120px;
}

@media (max-width: 1100px) {
  .hsteps--wide,
  .cards4--five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tease--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .hsteps--wide,
  .cards4--five,
  .tease--5 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A menu item stays on one line. */
.nav__link {
  white-space: nowrap;
}

/* The home page's jobs and audiences (2026-10-28): every job shown, three a row, no tabs. */
.expane--all,
.cards4--3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .expane--all,
  .cards4--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .expane--all,
  .cards4--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Pricing tables on a narrow screen (owner, 2026-10-28: the plans past Starter were cut off).
   Compare plans: the plan names stay pinned under the nav, each feature has its own line and its
   five values sit under the names. One job, counted: a step a row, its credits on the right.
   Nothing scrolls sideways. */
@media (max-width: 780px) {
  .tablewrap--compare,
  .tablewrap--steps {
    overflow: visible;
  }

  .tablewrap--compare .compare,
  .tablewrap--steps .compare,
  .tablewrap--compare .compare thead,
  .tablewrap--compare .compare tbody,
  .tablewrap--steps .compare thead,
  .tablewrap--steps .compare tbody {
    display: block;
    min-width: 0;
  }

  .tablewrap--compare .compare tr {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .tablewrap--compare .compare thead {
    position: sticky;
    top: var(--nav-height);
    z-index: 2;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  .tablewrap--compare .compare thead th {
    position: static;
    padding: 10px 2px;
    font-size: 12px;
    border-bottom: 0;
  }

  .tablewrap--compare .compare thead th:first-child {
    display: none;
  }

  .tablewrap--compare .compare tbody th {
    grid-column: 1 / -1;
    padding: 10px 12px 2px;
    border-bottom: 0;
    color: var(--text);
    font-weight: 600;
  }

  .tablewrap--compare .compare td {
    padding: 4px 2px 10px;
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .tablewrap--steps .compare tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }

  .tablewrap--steps .compare tbody tr:last-child {
    border-bottom: 0;
  }

  .tablewrap--steps .compare th,
  .tablewrap--steps .compare td {
    position: static;
    padding: 0;
    border: 0;
    background: none;
  }

  .tablewrap--steps .compare th {
    grid-column: 1;
    grid-row: 1;
    color: var(--text);
    font-weight: 600;
  }

  .tablewrap--steps .compare thead th:nth-child(2),
  .tablewrap--steps .compare thead th:nth-child(3) {
    display: none;
  }

  .tablewrap--steps .compare thead th:last-child,
  .tablewrap--steps .compare td.num {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
  }

  .tablewrap--steps .compare td.num {
    font-size: 15px;
    font-weight: 650;
  }

  .tablewrap--steps .compare td:not(.num) {
    grid-column: 1;
    font-size: var(--fs-small);
    color: var(--text-muted);
  }
}

/* The eight links and the buttons need about 1,060px: below that the menu button takes over
   (owner, 2026-10-28: the top row ran off the right edge between phone and laptop widths). */
@media (max-width: 1100px) {
  .nav__links {
    display: none;
  }

  .nav__burger {
    display: grid;
  }

  /* The open menu takes its own room under the top row and pushes the page down, never covering
     it (owner, 2026-10-28: "menu hides the content behind"); its links fill as many columns as fit, two on a phone. */
  .nav--open {
    height: auto;
  }

  .nav--open .nav__inner {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--nav-height);
    row-gap: 0;
  }

  .nav--open .nav__inner > nav {
    order: 3;
    flex-basis: 100%;
  }

  /* The top row keeps the header's height while the menu is open. */
  .nav--open .nav__inner > .brand,
  .nav--open .nav__inner > .nav__right {
    min-height: var(--nav-height);
  }

  .nav--open .nav__links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2px var(--space-4);
    margin: 0;
    padding: var(--space-2) 0 var(--space-6);
    border-top: 1px solid var(--line);
  }

  .nav--open .nav__link {
    display: block;
    padding: 9px 10px;
  }
}

/* Developers hub on a phone: the group's name above its cards, the cards one to a row
   (a 215px minimum used to push them past a 360px screen). */
@media (max-width: 640px) {
  .hubg {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .hubg__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The example tabs on a phone: all four stay in view, on two lines when they must. */
@media (max-width: 640px) {
  .extabs {
    flex-wrap: wrap;
  }

  .extabs a {
    padding: 8px 10px;
  }
}

/* The narrowest phones (320px): a little less edge and gap, so the header's brand, theme switch,
   Sign in and menu button fit on one row. */
@media (max-width: 360px) {
  .wrap {
    padding: 0 12px;
  }

  .nav__inner {
    gap: var(--space-4);
  }

  .nav__right {
    gap: 6px;
  }
}

/* A long action name on an app tile wraps inside the tile rather than running past it. */
.tile__foot {
  min-width: 0;
}

.tile__foot .chip {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   COLOUR AND CONTRAST (owner, 2026-10-29: "this has to be contrasted with different colors",
   "all colors look same and bland and boring", "need better looking professional website").
   The brand blue stays; the call to action takes a warm orange of its own (it was the same blue),
   cards and steps rotate four companion colours, tinted bands read as bands, the hero and the
   closing band carry colour. Tokens first, then the components that use them; both themes.
   ========================================================================== */
:root {
  --ember: #e8590c;
  --ember-hover: #c84a07;
  --ember-soft: #f7894a;
  --ember-tint: #fff3eb;
  --ember-border: #fbc8a8;
  --ember-contrast: #ffffff;
  --ember-text: #b2430a;
  --c1: #0b5fbf; --c1-tint: #eaf2fd;
  --c2: #0d9488; --c2-tint: #e6f6f4;
  --c3: #7c3aed; --c3-tint: #f2edfe;
  --c4: #d97706; --c4-tint: #fff6e6;
  --band: linear-gradient(180deg, #f3f7fe 0%, #edf3fc 100%);
  --band-line: #dbe6f6;
  --hero-glow:
    radial-gradient(760px 360px at 88% -12%, rgba(124, 58, 237, 0.16), transparent 68%),
    radial-gradient(680px 340px at 8% 108%, rgba(13, 148, 136, 0.12), transparent 70%),
    radial-gradient(900px 420px at 60% -20%, rgba(11, 95, 191, 0.14), transparent 70%);
  --closer-bg: linear-gradient(120deg, #0a1d40 0%, #1b1f5e 55%, #3b1d6e 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ember: #fb7a36; --ember-hover: #fd9658; --ember-soft: #f0631f; --ember-tint: #2a1508;
    --ember-border: #5a2a0e; --ember-contrast: #1a0a02; --ember-text: #fda06e;
    --c1: #5aa2f0; --c1-tint: #0f1c2e;
    --c2: #2dd4bf; --c2-tint: #0c201e;
    --c3: #a78bfa; --c3-tint: #1b1430;
    --c4: #fbbf24; --c4-tint: #241a07;
    --band: linear-gradient(180deg, #101826 0%, #0e1522 100%);
    --band-line: #1f2a3b;
    --hero-glow:
      radial-gradient(760px 360px at 88% -12%, rgba(167, 139, 250, 0.16), transparent 68%),
      radial-gradient(680px 340px at 8% 108%, rgba(45, 212, 191, 0.10), transparent 70%),
      radial-gradient(900px 420px at 60% -20%, rgba(90, 162, 240, 0.14), transparent 70%);
    --closer-bg: linear-gradient(120deg, #0a1730 0%, #16194a 55%, #2a1650 100%);
  }
}
:root[data-theme='dark'] {
  --ember: #fb7a36; --ember-hover: #fd9658; --ember-soft: #f0631f; --ember-tint: #2a1508;
  --ember-border: #5a2a0e; --ember-contrast: #1a0a02; --ember-text: #fda06e;
  --c1: #5aa2f0; --c1-tint: #0f1c2e;
  --c2: #2dd4bf; --c2-tint: #0c201e;
  --c3: #a78bfa; --c3-tint: #1b1430;
  --c4: #fbbf24; --c4-tint: #241a07;
  --band: linear-gradient(180deg, #101826 0%, #0e1522 100%);
  --band-line: #1f2a3b;
  --hero-glow:
    radial-gradient(760px 360px at 88% -12%, rgba(167, 139, 250, 0.16), transparent 68%),
    radial-gradient(680px 340px at 8% 108%, rgba(45, 212, 191, 0.10), transparent 70%),
    radial-gradient(900px 420px at 60% -20%, rgba(90, 162, 240, 0.14), transparent 70%);
  --closer-bg: linear-gradient(120deg, #0a1730 0%, #16194a 55%, #2a1650 100%);
}

/* The call to action: warm, with a lift on hover. */
.btn--ember { box-shadow: 0 1px 2px rgba(232, 89, 12, 0.25), 0 4px 14px rgba(232, 89, 12, 0.18); }
.btn--ember:hover { transform: translateY(-1px); }

/* A section label is a small coloured pill. */
.eyebrow {
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  border: 1px solid var(--accent-border);
  letter-spacing: 0.08em;
}
.eyebrow--onink { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }

/* The hero and the bands. */
.h-hero { background: var(--hero-glow), var(--surface); }
.sec--tint { background: var(--band); border-top-color: var(--band-line); border-bottom-color: var(--band-line); }
.closer { background: var(--closer-bg); }

/* Cards: a colour each, a lift on hover. */
.cards4 .c {
  position: relative;
  border-top: 3px solid var(--c1);
  box-shadow: var(--shadow-xs);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cards4 .c:nth-child(4n + 2) { border-top-color: var(--c2); }
.cards4 .c:nth-child(4n + 3) { border-top-color: var(--c3); }
.cards4 .c:nth-child(4n + 4) { border-top-color: var(--c4); }
.cards4 .c:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Numbered steps: filled, in the same rotation. */
.hsteps__n { background: var(--c1); border-color: var(--c1); color: #fff; font-weight: 700; }
.hsteps li:nth-child(4n + 2) .hsteps__n { background: var(--c2); border-color: var(--c2); }
.hsteps li:nth-child(4n + 3) .hsteps__n { background: var(--c3); border-color: var(--c3); }
.hsteps li:nth-child(4n + 4) .hsteps__n { background: var(--c4); border-color: var(--c4); }

/* The "Ask AnnE where you already work" strip: a coloured band, each app its own pill. */
.band--channels {
  background: linear-gradient(90deg, var(--c1-tint) 0%, var(--c3-tint) 50%, var(--c2-tint) 100%);
  border-bottom-color: var(--band-line);
}
.channels { color: var(--text); font-weight: 600; }
.channels__list li {
  padding: 4px 12px 4px 5px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--c1);
  box-shadow: var(--shadow-xs);
}
.channels__list li:nth-child(4n + 2) { border-left-color: var(--c3); }
.channels__list li:nth-child(4n + 3) { border-left-color: var(--c2); }
.channels__list li:nth-child(4n + 4) { border-left-color: var(--c4); }
.channels__list .appi { border: 0; background: transparent; }

/* The developers page, one group at a time (owner, 2026-10-29: "there are so much in one page"):
   radio tabs - no script - and short cards in the same colour rotation as the rest. */
.devhero { padding: 36px 0 28px; }
.devtabs > input { position: absolute; opacity: 0; pointer-events: none; }
.devtabs__bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.devtabs__bar label {
  padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-weight: 600; font-size: 13.5px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.devtabs__bar label:hover { border-color: var(--accent-border); background: var(--hover-tint); }
/* Rows of four, the last row centred (owner, 2026-10-29: "keep 5th,6th cards in the middle"). */
.devtabs__panel { display: none; flex-wrap: wrap; justify-content: center; gap: 14px; }
.devc {
  flex: 0 1 calc((100% - 3 * 14px) / 4); min-width: 220px;
  display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--surface);
  border: 1px solid var(--line); border-top: 3px solid var(--c1); border-radius: 10px; box-shadow: var(--shadow-xs);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.devc:nth-child(4n + 2) { border-top-color: var(--c2); }
.devc:nth-child(4n + 3) { border-top-color: var(--c3); }
.devc:nth-child(4n + 4) { border-top-color: var(--c4); }
.devc:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.devc h3 { font-size: var(--fs-h3); font-weight: 650; }
.devc p { font-size: var(--fs-card); line-height: 1.5; color: var(--text-muted); }
.devc__more { margin-top: auto; padding-top: 4px; font-weight: 600; font-size: 13.5px; }
#devtab-0:checked ~ .devtabs__panels .devtabs__panel:nth-child(1),
#devtab-1:checked ~ .devtabs__panels .devtabs__panel:nth-child(2),
#devtab-2:checked ~ .devtabs__panels .devtabs__panel:nth-child(3),
#devtab-3:checked ~ .devtabs__panels .devtabs__panel:nth-child(4),
#devtab-4:checked ~ .devtabs__panels .devtabs__panel:nth-child(5),
#devtab-5:checked ~ .devtabs__panels .devtabs__panel:nth-child(6),
#devtab-6:checked ~ .devtabs__panels .devtabs__panel:nth-child(7),
#devtab-7:checked ~ .devtabs__panels .devtabs__panel:nth-child(8) { display: flex; }
#devtab-0:checked ~ .devtabs__bar label[for='devtab-0'],
#devtab-1:checked ~ .devtabs__bar label[for='devtab-1'],
#devtab-2:checked ~ .devtabs__bar label[for='devtab-2'],
#devtab-3:checked ~ .devtabs__bar label[for='devtab-3'],
#devtab-4:checked ~ .devtabs__bar label[for='devtab-4'],
#devtab-5:checked ~ .devtabs__bar label[for='devtab-5'],
#devtab-6:checked ~ .devtabs__bar label[for='devtab-6'],
#devtab-7:checked ~ .devtabs__bar label[for='devtab-7'] { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.devtabs > input:focus-visible + input, .devtabs > input:focus-visible ~ .devtabs__bar { outline: none; }

/* A hero with no picture beside it (BYOM, consultants, chat): the lead runs under the whole
   headline, not in the home hero's half-width column (owner, 2026-10-29: "why multiple lines"). */
.h-hero > .wrap > .h-hero__copy { max-width: none; }
.h-hero > .wrap > .h-hero__copy .h-hero__lead { max-width: 82ch; }
/* Cards in rows of four with the last row centred; a plain card has no colour line. */
.cards4--center { display: flex; flex-wrap: wrap; justify-content: center; }
.cards4--center .c { flex: 0 1 calc((100% - 3 * 14px) / 4); min-width: 220px; }
/* The centred card below the row: its colour line at the foot, the row's at the head (owner, 2026-10-29). */
.cards4 .c.c--plain { border-top: 1px solid var(--line); border-bottom: 3px solid var(--c1); }
@media (max-width: 640px) { .cards4--center .c { flex-basis: 100%; } }
@media (max-width: 640px) { .devc { flex-basis: 100%; } }

/* Rows of four: the top row's colour line at the head, the bottom row's at the foot (owner,
   2026-10-29: "i mean top row top border", "bottom row bottom border"). */
.devc:nth-child(n + 5), .cards4--center .c:nth-child(n + 5) { border-top: 1px solid var(--line); border-bottom: 3px solid var(--c1); }
.devc:nth-child(n + 5):nth-child(4n + 2), .cards4--center .c:nth-child(n + 5):nth-child(4n + 2) { border-bottom-color: var(--c2); }
.devc:nth-child(n + 5):nth-child(4n + 3), .cards4--center .c:nth-child(n + 5):nth-child(4n + 3) { border-bottom-color: var(--c3); }
.devc:nth-child(n + 5):nth-child(4n + 4), .cards4--center .c:nth-child(n + 5):nth-child(4n + 4) { border-bottom-color: var(--c4); }

/* One height for every card in a set, across rows too (owner, 2026-10-29: "use same height for
   cards"): room for the title, three lines and the link, the link held at the foot. */
.devc { min-height: 160px; }
.cards4--center .c { min-height: 112px; }
@media (max-width: 640px) { .devc, .cards4--center .c { min-height: 0; } }

/* CARD STYLE A, the icon chip (owner, 2026-10-29: "ICON chip is right options", "update it
   everywhere"): no colour lines; a tile in the card's colour, a soft shadow, and on hover a lift
   with the edge taking the colour. Replaces the head and foot lines above. */
.cards4 .c, .cards4 .c.c--plain, .devc,
.devc:nth-child(n + 5), .cards4--center .c:nth-child(n + 5) {
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(10, 15, 25, 0.04), 0 6px 18px rgba(10, 15, 25, 0.06);
}
.cards4 .c, .devc { --kc: var(--c1); --kt: var(--c1-tint); }
.cards4 .c:nth-child(4n + 2), .devc:nth-child(4n + 2) { --kc: var(--c2); --kt: var(--c2-tint); }
.cards4 .c:nth-child(4n + 3), .devc:nth-child(4n + 3) { --kc: var(--c3); --kt: var(--c3-tint); }
.cards4 .c:nth-child(4n + 4), .devc:nth-child(4n + 4) { --kc: var(--c4); --kt: var(--c4-tint); }
.cards4 .c:hover, .devc:hover {
  transform: translateY(-3px);
  border-color: var(--kc);
  box-shadow: 0 2px 4px rgba(10, 15, 25, 0.05), 0 14px 30px rgba(10, 15, 25, 0.10);
}
.ico {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 10px;
  border-radius: 10px; background: var(--kt, var(--accent-tint)); color: var(--kc, var(--accent));
}
.ico svg { width: 20px; height: 20px; }
.devc .ico { margin-bottom: 4px; }
/* One height per set, across rows, now with the chip ("use same height for cards"). */
.devc { min-height: 200px; }
.cards4--center .c { min-height: 156px; }
@media (max-width: 640px) { .devc, .cards4--center .c { min-height: 0; } }

/* THE MENU, GROUPED (owner, 2026-10-29: "follo databrick styles"): Product and Solutions open a
   panel on hover or focus; inside the small-screen menu the groups are laid out flat. */
.nav__group { position: relative; }
.nav__menu {
  display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--text-md); font-weight: var(--weight-medium);
}
.nav__menu[data-current='true'] { color: var(--accent); background: var(--accent-tint); }
.nav__caret { font-size: 10px; opacity: 0.7; transition: transform 0.15s ease; }
.nav__drop {
  position: absolute; top: calc(100% + 8px); left: -8px; z-index: 50; display: none; min-width: 320px;
  padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(10, 15, 25, 0.14);
}
.nav__drop::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav__group:hover .nav__drop, .nav__group:has(:focus-visible) .nav__drop { display: grid; gap: 2px; }
.nav__group:hover .nav__caret, .nav__group:has(:focus-visible) .nav__caret { transform: rotate(180deg); }
.nav__drop-item { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; color: var(--text); }
.nav__drop-item:hover { background: var(--hover-tint); text-decoration: none; }
.nav__drop-item b { font-weight: 650; font-size: 13.5px; }
.nav__drop-item span { font-size: 13.5px; color: var(--text-muted); }
.nav__drop-item[aria-current='page'] b { color: var(--accent); }
@media (max-width: 1100px) {
  .nav--open .nav__group { grid-column: 1 / -1; }
  .nav--open .nav__menu { pointer-events: none; padding-left: 10px; color: var(--text-faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
  .nav--open .nav__caret { display: none; }
  .nav--open .nav__drop { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    min-width: 0; padding: 0 0 6px; border: 0; box-shadow: none; background: none; }
  .nav--open .nav__drop-item span { display: none; }
}

/* The platform page: four steps side by side, and the facts table an assistant can quote. */
.hsteps--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hsteps--grid li { grid-template-columns: 1fr; gap: 10px; }
@media (max-width: 900px) { .hsteps--grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hsteps--grid { grid-template-columns: 1fr; } }
.facts { width: 100%; max-width: 980px; margin: 0 auto; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(10, 15, 25, 0.04), 0 6px 18px rgba(10, 15, 25, 0.06); }
.facts th, .facts td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
.facts th { width: 200px; font-weight: 650; color: var(--text); background: var(--accent-tint); }
.facts td { color: var(--text-muted); line-height: 1.55; }
@media (max-width: 640px) { .facts th, .facts td { display: block; width: auto; } .facts th { border-bottom: 0; padding-bottom: 4px; } }

/* NO ORANGE; BLACK FOR CONTRAST (owner, 2026-10-29: "remove orange from website", "i like their
   black like colors for contrast"). The call to action is ink on light, white on dark; the fourth
   card colour is ink; the closing band near-black. */
:root {
  --ember: #0b111a; --ember-hover: #1f2937; --ember-soft: #374151; --ember-tint: #f1f3f6;
  --ember-border: #d2d8e0; --ember-contrast: #ffffff; --ember-text: #0b111a;
  --c4: #1f2937; --c4-tint: #eef0f3;
  --closer-bg: linear-gradient(120deg, #05070b 0%, #0b111a 60%, #151b26 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ember: #f3f4f6; --ember-hover: #ffffff; --ember-soft: #d1d5db; --ember-tint: #1a1f27;
    --ember-border: #374151; --ember-contrast: #0b111a; --ember-text: #f3f4f6;
    --c4: #e5e7eb; --c4-tint: #1a1f27;
    --closer-bg: linear-gradient(120deg, #020305 0%, #070a10 60%, #0d121a 100%);
  }
}
:root[data-theme='dark'] {
  --ember: #f3f4f6; --ember-hover: #ffffff; --ember-soft: #d1d5db; --ember-tint: #1a1f27;
  --ember-border: #374151; --ember-contrast: #0b111a; --ember-text: #f3f4f6;
  --c4: #e5e7eb; --c4-tint: #1a1f27;
  --closer-bg: linear-gradient(120deg, #020305 0%, #070a10 60%, #0d121a 100%);
}
.btn--ember { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 6px 16px rgba(0, 0, 0, 0.16); }
.closer .btn--ember { background: #ffffff; color: #0b111a; }
.closer .btn--ember:hover { background: #e5e7eb; }

/* THE FOOTER, COMPACT (owner, 2026-10-29: "this too big, compact", "nobody wants scrolling
   pages"): brand and contact on one row, the site's links on one wrapped row, then the legal bar. */
.footer--compact { padding: 28px 0 18px; }
.footer__top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
.footer--compact .footer__blurb { margin: 0; flex: 1 1 320px; font-size: 13.5px; }
.footer__inline { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
.footer__inline a { font-size: 13.5px; }
.footer__links { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ink-line, rgba(255, 255, 255, 0.1)); }
.footer__links a { font-weight: 600; }
.footer__areas { margin-top: 10px; }
.footer__label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; }
.footer--compact .footer__bar { margin-top: 16px; padding-top: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; font-size: 12px; }
.footer--compact .footer__bar a { font-size: 12px; }

/* Less scrolling everywhere: tighter section rhythm and hero. */
:root { --sec-y: 44px; }
@media (max-width: 760px) { :root { --sec-y: 32px; } }
.h-hero { padding: 36px 0 30px; }
.sec__head { margin-bottom: 22px; }

/* THE MENU AS DATABRICKS DOES IT (owner, 2026-10-29): each top item opens a full-width panel of
   titled columns; an entry is a name over a short line. The header (sticky, so positioned) is the
   panel's containing block, so the panel spans the page under it. */
.nav__group { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; min-width: 0; padding: 0;
  border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0;
  background: var(--surface); box-shadow: 0 18px 40px rgba(10, 15, 25, 0.12);
}
.mega::before { top: -12px; height: 12px; }
/* A click must not hold a menu open: focus from a mouse left it up while hover opened the next
   (owner, 2026-10-30: "why 2 popups got stuck"). Keyboard focus still opens one; one at a time. */
.nav__group:hover .mega, .nav__group:has(:focus-visible) .mega { display: block; }
@media (min-width: 1101px) {
  .nav__links:has(.nav__group:hover) .nav__group:not(:hover) .mega { display: none; }
}
.mega__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 36px; padding: 26px 0 30px; }
.mega__title {
  padding: 0 0 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}
.mega__item { display: grid; gap: 2px; padding: 8px 0; color: var(--text); }
.mega__item:hover { text-decoration: none; }
.mega__item:hover b { color: var(--accent); }
.mega__item b { font-weight: 600; font-size: 15px; }
.mega__item span { font-size: 13.5px; color: var(--text-muted); }
.mega__item[aria-current='page'] b { color: var(--accent); }
.nav__plain { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--text); padding: 6px 8px; }
.nav__plain:hover { color: var(--accent); text-decoration: none; }
@media (max-width: 1240px) {
  .nav__demo { display: none; }
}
@media (max-width: 1100px) {
  .nav__plain { display: none; }
  .nav--open .mega { position: static; display: block; border: 0; box-shadow: none; background: none; }
  .nav--open .mega__in { padding: 0 0 8px; gap: 0 18px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .nav--open .mega__title { border: 0; margin: 8px 0 2px; padding: 0 10px; }
  .nav--open .mega__item { padding: 6px 10px; }
  .nav--open .mega__item span { display: none; }
}

/* THE FOOTER, THE MENU'S COLUMNS (Databricks' footer repeats its menu), small and tight. */
.footer--menu { padding: 36px 0 18px; }
.footer__cols { display: grid; grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr)); gap: 22px 26px; }
.fcol__top { font-size: 13.5px; font-weight: 700; color: var(--accent-soft, #4a90e2); margin-bottom: 10px; }
.fcol__group { font-size: 12px; font-weight: 650; color: var(--ink-text, #cfd7e2); margin: 10px 0 4px; }
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.fcol a { font-size: 12px; color: var(--ink-muted, #8d98a8); }
.fcol a:hover { color: #ffffff; }
.fcol--brand .footer__blurb { font-size: 12px; margin-top: 10px; }
@media (max-width: 1000px) { .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer--menu .footer__bar { margin-top: 24px; padding-top: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; font-size: 12px; }

/* A page's own section bar under the menu, sticky (Databricks' product pages carry one). */
.subnav { position: sticky; top: var(--nav-height); z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); }
.subnav__in { display: flex; gap: 4px 26px; overflow-x: auto; scrollbar-width: none; }
.subnav a { padding: 14px 0 12px; white-space: nowrap; font-size: 15px; color: var(--text-muted); border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--text); border-bottom-color: var(--accent); text-decoration: none; }
[id] { scroll-margin-top: calc(var(--nav-height) + 56px); }

/* The demo job, as built: its 15 steps on one still line under the home hero, the two reads that
   join it above the step they feed. Every column the same width, so the line fills the band. */
.flowband { padding: 14px 0 26px; background: var(--hero-glow), var(--surface); border-bottom: 1px solid var(--line); }
.flowband__in { max-width: 1680px; margin: 0 auto; padding: 0 var(--gutter); }
.flowband__top { display: flex; align-items: center; gap: 14px 28px; margin-bottom: 18px; }
.flowband__say {
  flex: 1; display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  box-shadow: 0 6px 18px rgba(10, 15, 25, 0.06); font-size: 13.5px; line-height: 1.55; color: var(--text);
}
.flowband__who { flex: none; margin-top: 1px; padding: 2px 9px; border-radius: 999px; background: var(--ember); color: var(--ember-contrast); font-size: 12px; font-weight: 700; }
.flowband__facts { flex: none; display: grid; grid-template-columns: repeat(3, auto); gap: 6px 22px; margin: 0; font-size: 13.5px; color: var(--text-muted); }
.flowband__facts b { display: block; font-size: 26px; line-height: 1.1; font-weight: 700; color: var(--text); }
.flowband__facts a { grid-column: 1 / -1; font-weight: 600; }
.pf__scroll { overflow-x: auto; padding: 2px 2px 6px; }
.pf { --pf-gap: clamp(12px, 1.25vw, 24px); --pf-row: 26px; min-width: 1180px; }
.pf__row { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); column-gap: var(--pf-gap); }
.pf__row--feeds { margin-bottom: var(--pf-row); }
.pf__cell { display: flex; min-width: 0; }
.pf__n {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-height: 104px; padding: 12px 6px 10px; text-align: center;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface);
  box-shadow: 0 4px 12px rgba(10, 15, 25, 0.06);
}
.pf__n b { font-size: 12px; line-height: 1.3; font-weight: 650; color: var(--text); overflow-wrap: normal; }
.pf__n span { margin-top: auto; font-size: 11px; color: var(--text-faint); }
.pf__n .appi, .pf__k { flex: none; width: 22px; height: 22px; }
.pf__k { color: var(--accent); }
.pf__n--ask { border-color: var(--accent-border); background: var(--accent-tint); }
/* Wires: each step on the line takes one from the step before it; a read above drops one into the
   step it joins. Arrowheads point the way the rows go. */
.pf__row--line .pf__cell + .pf__cell .pf__n::before {
  content: ''; position: absolute; top: 50%; right: 100%; width: var(--pf-gap); height: 2px; background: var(--accent-border);
}
.pf__row--line .pf__cell + .pf__cell .pf__n::after {
  content: ''; position: absolute; top: calc(50% - 4px); left: -1px; border: 4px solid transparent; border-left: 6px solid var(--accent);
}
.pf__n--feed::after {
  content: ''; position: absolute; top: 100%; left: 50%; width: 2px; height: var(--pf-row); background: var(--accent-border);
}
.flowband__list { display: none; }
.flowband__stages { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 16px auto 0; padding: 0; list-style: none; counter-reset: st; }
.flowband__stages li { counter-increment: st; padding: 5px 12px; border-radius: 999px; background: var(--accent-tint); border: 1px solid var(--accent-border); color: var(--text); font-size: 13.5px; font-weight: 600; }
.flowband__stages li::before { content: counter(st) "  "; color: var(--accent); }
@media (max-width: 900px) {
  .flowband__top { flex-direction: column; align-items: stretch; }
  .flowband__facts { grid-template-columns: repeat(3, max-content); }
}
@media (max-width: 700px) {
  .pf__scroll { display: none; }
  .flowband__list { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; counter-reset: fl; }
  .flowband__list li { counter-increment: fl; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13.5px; }
  .flowband__list li::before { content: counter(fl); min-width: 16px; font-size: 12px; font-weight: 700; color: var(--accent); }
  .flowband__list b { font-weight: 650; }
  .flowband__list span { margin-left: auto; font-size: 12px; color: var(--text-faint); }
  .flowband__list .pf__k, .flowband__list .appi { flex: none; width: 20px; height: 20px; color: var(--accent); }
}

/* ONE TYPE SCALE (owner, 2026-10-29: "use uniform fonts across"): every size on the site is one of
   12 (labels, meta), 13.5 (secondary), 15 (body), 17 (lead, card titles), 20, 26 (section
   headings), 36 (page titles) and the hero's; the tokens below and the hard-coded sizes above say so. */
:root {
  --text-2xs: 12px; --text-xs: 12px; --text-sm: 13.5px; --text-md: 13.5px; --text-base: 15px;
  --text-lg: 17px; --text-xl: 20px; --text-2xl: 26px; --text-3xl: 26px; --text-4xl: 36px;
  --text-hero: clamp(36px, 4.4vw, 52px);
  --fs-hero: clamp(36px, 4.4vw, 52px); --fs-h1: clamp(28px, 3vw, 36px); --fs-h2: clamp(22px, 2.2vw, 26px);
  --fs-h2s: 20px; --fs-h3: 17px; --fs-lead: 17px; --fs-body: 15px; --fs-card: 13.5px; --fs-small: 13.5px;
  --fs-label: 12px; --fs-btn: 15px;
}
body { font-family: var(--font-sans); font-size: 15px; }

/* The library pages' lead beside the title, at body size (owner, 2026-10-29: "too big font"). */
.mdhead__lead { font-size: 15px; line-height: 1.55; max-width: 86ch; }
.devhead__lead { font-size: 15px; line-height: 1.55; }

/* The library pages' head stacked: the title, then the lead under it at full width - side by side,
   a long title squeezed the lead into a tall column and left white space (owner, 2026-10-29). */
.mdhead { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 6px; margin-bottom: 16px; }
.mdhead__lead { max-width: 110ch; }

/* NO PINK: the bands, the hero and the chat strip neutral, as the docs are (owner, 2026-10-29:
   "replace pink with something else aligned with documentation theme"). The violet glow read pink. */
:root {
  --band: #f6f7f9; --band-line: #e6e9ee;
  --hero-glow: radial-gradient(900px 380px at 80% -24%, rgba(11, 95, 191, 0.07), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --band: #10151d; --band-line: #1f2733;
    --hero-glow: radial-gradient(900px 380px at 80% -24%, rgba(90, 162, 240, 0.08), transparent 70%);
  }
}
:root[data-theme='dark'] {
  --band: #10151d; --band-line: #1f2733;
  --hero-glow: radial-gradient(900px 380px at 80% -24%, rgba(90, 162, 240, 0.08), transparent 70%);
}
.band--channels { background: var(--band); }

/* ONE HOVER, IN THE SELECTION'S OWN BLUE (owner, 2026-10-29: "2 differnt background", "replace
   everywhere"): every hover that was grey is a lighter shade of the selected blue. */
:root { --hover-tint: #f4f8fe; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --hover-tint: #111b29; } }
:root[data-theme='dark'] { --hover-tint: #111b29; }

/* FULL WIDTH, RESPONSIVE (owner, 2026-10-29: "databrick use full lengthe, why did u not use for
   us", "so much white on left and right side", "use full width and make it responsive"). The page
   is 1440 wide, as on the docs; the side margin shrinks with the screen (16px on a phone); text
   keeps its reading width inside it; card grids gain columns as the page widens and never ask a
   phone for more than it has. */
:root { --page-max: 1440px; --gutter: clamp(16px, 3vw, 40px); }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.grid--roles { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }
.facts, .tease--5 { max-width: none; }
.appsub .grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }

/* NO WASTED WIDTH, ALL AT ONCE (owner, 2026-10-29: "so much white space wasted everywhere", "you
   need to fix them all at once"). Nothing on a page sits in a narrow column with empty sides:
   text keeps its reading width inside a layout that uses the page. */
.sec__head { max-width: 860px; }

/* Legal: the docs' frame. */
.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr) 230px; gap: 48px; align-items: start; }
.legal .policy { max-width: none; }
.policy p:not(.eyebrow), .policy ul { max-width: 82ch; }
.policy h2:first-of-type { margin-top: 24px; }
.legal__side, .legal__toc { position: sticky; top: calc(var(--nav-height) + 24px); font-size: 13.5px; }
.legal__group { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); }
.legal__side ul, .legal__toc ul { list-style: none; margin: 0 0 18px; padding: 0; }
.legal__side a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--text); }
.legal__side a:hover { background: var(--hover-tint); text-decoration: none; }
.legal__side a[aria-current='page'] { background: var(--accent-tint); color: var(--accent-hover); font-weight: 600; }
.legal__ask { margin: 0; padding: 0 10px; color: var(--text-muted); line-height: 1.6; }
.legal__toc { max-height: calc(100vh - var(--nav-height) - 48px); overflow-y: auto; padding-left: 14px; border-left: 1px solid var(--line); }
.legal__toc a { display: block; padding: 4px 0; color: var(--text-muted); line-height: 1.4; }
.legal__toc a:hover { color: var(--accent); text-decoration: none; }
@media (max-width: 1100px) { .legal { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; } .legal__toc { display: none; } }
@media (max-width: 760px) {
  .legal { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .legal__side { position: static; }
  .legal__side ul { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 0; }
  .legal__side .legal__group, .legal__ask { display: none; }
}

/* Pricing: the counting rules in two columns across the page. */
.creditrules { max-width: none; }
.creditrules ul { display: block; columns: 2; column-gap: 48px; }
.creditrules li { break-inside: avoid; margin-bottom: 8px; }
@media (max-width: 900px) { .creditrules ul { columns: 1; } }

/* Demo: the recording and the request side by side; the steps in even rows; the closing line
   across the page with its button at the end. */
.demo__head { max-width: none; }
.demo__top { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 28px; align-items: start; margin-top: 4px; }
.demo__top .demo__video { margin: 0; max-width: none; }
.demo__side h2 { margin: 0; font-size: var(--fs-h3); }
.demo__note { margin: 2px 0 10px; font-size: 12px; color: var(--text-faint); }
.demo__side .demo__ask { max-width: none; margin: 0; padding: 14px 16px; font-size: 13.5px; line-height: 1.6; }
.demo__side .demo__systems { justify-content: flex-start; gap: 10px 16px; margin: 14px 0 0; }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.demo__cap { grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); }
.demo__cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; text-align: left; }
.demo__cta h2, .demo__cta p { grid-column: 1; }
.demo__cta p { margin: 6px 0 0; max-width: none; }
.demo__cta .btn { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 1100px) {
  .demo__top { grid-template-columns: minmax(0, 1fr); }
  .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo__cap { grid-template-columns: minmax(0, 1fr); }
  .demo__cap:nth-child(even) .demo__captext { order: 0; }
}
@media (max-width: 640px) {
  .steps--4 { grid-template-columns: minmax(0, 1fr); }
  .demo__cta { grid-template-columns: minmax(0, 1fr); }
  .demo__cta .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 14px; }
}

/* Bring your own model: the Google Cloud part and the console part side by side. */
.byomsetup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; align-items: start; }
.byomsetup__where { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 900px) { .byomsetup { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1440px) { .pf__n { padding: 10px 3px 9px; } .pf__n b { font-size: 11.5px; } }

/* Pricing (2026-10-29): two jobs counted side by side, and the Premium apps by family. */
.countjobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.countjob > p:first-child { margin: 0 0 12px; color: var(--text-muted); font-size: var(--fs-body); line-height: 1.6; }
.premfams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.premfam { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.premfam h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 650; }
.premfam p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-muted); }
@media (max-width: 1100px) { .countjobs { grid-template-columns: minmax(0, 1fr); } .premfams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .premfams { grid-template-columns: minmax(0, 1fr); } }

/* DARKER BANDS (owner, 2026-10-29: "need darker background for such banners per page"): every tinted
   section and the chat strip on one cool slate, deep enough that the white cards on it stand off it. */
:root { --band: #f8f9fb; --band-line: #eef1f5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --band: #10151d; --band-line: #1f2733; } }
:root[data-theme='dark'] { --band: #10151d; --band-line: #1f2733; }

/* COMPACT RHYTHM (owner, 2026-10-29: "look at the amount of white space between different items").
   A step in a row of steps stretched to the tallest one and put the spare height between its number
   and its title - so titles sat at different heights; they now start at the top. Sections, the hero,
   the section bar and the heads are tighter, on every page. */
.hsteps--grid li { align-content: start; gap: 8px; }
.hsteps li > div > h3 { margin: 0; }
:root { --sec-y: 36px; --fs-hero: clamp(30px, 3.4vw, 42px); }
@media (max-width: 760px) { :root { --sec-y: 28px; } }
.h-hero { padding: 28px 0 24px; }
.h-hero h1 { margin-bottom: 12px; }
.h-hero__cta { margin-top: 16px; }
.sec__head { margin-bottom: 18px; }
.sec__head h2 { margin-top: 4px; }
.eyebrow { margin-bottom: 6px; }
.subnav a { padding: 10px 0 9px; font-size: 14px; }

/* ONE SCREEN, NOT A SCROLL (owner, 2026-10-29: "keep everything compact and business friendly and
   subtle", "be consistent and be pro business", "people dont like scrolling for information",
   "everybody wants everything mostly in single page"). On every page: a card's chip sits beside its
   title, not above it; cards are tight and as tall as their words; one quiet colour; section labels
   are small caps, not pills; nothing lifts or changes colour but the edge on hover. */
.cards4 .c, .devc, .c:has(> .ico) { padding: 14px 16px; }
.c:has(> .ico), .devc:has(> .ico) {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; align-content: start;
}
.c > .ico, .devc > .ico { grid-column: 1; grid-row: 1; width: 28px; height: 28px; margin: 0; border-radius: 8px; }
.c > .ico svg, .devc > .ico svg { width: 16px; height: 16px; }
.c:has(> .ico) > h3, .devc:has(> .ico) > h3 { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
.c:has(> .ico) > :not(.ico):not(h3), .devc:has(> .ico) > :not(.ico):not(h3) { grid-column: 1 / -1; }
.c:has(> .ico) > p, .devc:has(> .ico) > p { margin-top: 8px; }
.devc, .cards4--center .c { min-height: 0; }
.cards4 .c, .cards4 .c:nth-child(n), .cards4 .c.c--plain, .devc, .devc:nth-child(n),
.cards4--center .c:nth-child(n) { border: 1px solid var(--line); --kc: var(--accent); --kt: var(--accent-tint); }
.cards4 .c:hover, .devc:hover { transform: none; border-color: var(--accent-border); box-shadow: var(--shadow-md); }
.hsteps__n, .hsteps li:nth-child(n) .hsteps__n { background: var(--accent); border-color: var(--accent); color: #fff; }
.eyebrow { padding: 0; border: 0; border-radius: 0; background: none; color: var(--accent); font-size: 11.5px; letter-spacing: 0.1em; }
.cards4, .devcs { gap: 12px; }

/* ONE ROW WHERE IT FITS (owner, 2026-10-29: "keep it one row"): a set of cards shares its row - each
   between 200 and 340px - so five or six sit on one line, a pair stays centred, and a narrow screen
   wraps them. A fifth card never drops to a row of its own. */
.devtabs__panel > .devc, .cards4--center > .c { flex: 1 1 0; min-width: 200px; max-width: 340px; }
.devtabs__panel, .cards4--center { gap: 12px; }
/* The Premium families: five and four, the second row centred (owner, 2026-10-29: "third row brings
   it to the center") - two rows instead of three, every card one width. */
.premfams { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.premfam { flex: 0 1 calc((100% - 4 * 12px) / 5); min-width: 220px; }
@media (max-width: 1100px) { .premfam { flex-basis: calc((100% - 2 * 12px) / 3); } }
@media (max-width: 640px) { .premfam { flex-basis: 100%; } }
/* Two jobs side by side: each table fits its column and wraps, never a scrollbar (owner, 2026-10-29:
   "remove scrollbar"); the comparison table's 720px minimum is for the full-width plan table. */
.countjob .tablewrap { overflow: visible; }
.countjob .compare { min-width: 0; width: 100%; table-layout: auto; }
.countjob .compare th, .countjob .compare td { white-space: normal; font-size: 13px; padding: 7px 10px; }

/* SOFTER TYPE (owner, 2026-10-29: compare the fonts of a calmer site): the same Inter, set the way a
   business page reads - headings and card titles semi-bold rather than bold, page titles a size
   smaller, body text a softer ink at 1.6, bold lead-ins semi-bold, the menu medium. Our own colours. */
:root { --ink-body: #343c48; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --ink-body: #c9d1db; } }
:root[data-theme='dark'] { --ink-body: #c9d1db; }
h1, h2, h3, h4, .h1s, .sec__head h2, .h-hero h1, .c h3, .devc h3, .card__title, .tile__name,
.plan h3, .appgroup__head h2, .mdhead h1, .mdd__head h2, .premfam h3, .demo__captext h3 { font-weight: 600; }
h1, .h1s, .mdhead h1 { letter-spacing: -0.015em; }
.h1s, .mdhead h1 { font-size: clamp(26px, 2.6vw, 34px); }
main p, main li { line-height: 1.6; }
main p:not([class]), main li:not([class]), .sec__head > p, .h-hero__lead { color: var(--ink-body); }
main b, main strong { font-weight: 600; }
.nav__link, .nav a { font-weight: 500; }

/* THE DOCS' SCALE, ON EVERY PAGE (owner, 2026-10-29: "inconsistent", "atleast docs pages look consitent
   and kind of professional"): the site reads in the docs' sizes - hero 38 at most, page titles 30,
   sections 24, cards and sub-heads 16, text 15, leads 16, card text, tables and plan lists 14,
   captions 13, labels 11.5, buttons 14. Tokens first, then the parts that set their own size. */
:root {
  --fs-hero: clamp(30px, 3vw, 38px); --fs-h1: 30px; --fs-h2: 24px; --fs-h2s: 20px; --fs-h3: 16px;
  --fs-lead: 16px; --fs-body: 15px; --fs-card: 14px; --fs-small: 13px; --fs-label: 11.5px; --fs-btn: 14px;
  --text-2xs: 11.5px; --text-xs: 12px; --text-sm: 14px; --text-md: 14px; --text-base: 15px;
  --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 24px; --text-4xl: 30px;
}
.h1s, .mdhead h1, .legal .policy h1 { font-size: 30px; }
main h2, .sec__head h2, .appgroup__head h2 { font-size: 24px; }
.policy h2, .demo__captext h3, .mdd__head h2 { font-size: 20px; }
main h3, .c h3, .devc h3, .card__title, .plan h3, .hsteps h3, .ex__head h3, .premfam h3, .creditrules h3 { font-size: 16px; }
main p, main li { font-size: 15px; }
.sec__head > p, .h-hero__lead, .results__lede, .mdhead__lead, .demo__head > p { font-size: 16px; }
.c p, .devc p, .card__body, .hsteps p, .plan li, .plan__for, .ex__says, .ex__result, .steps p,
.step p, .creditrules li, .linkcard p, .faq p, .faqgrid p, .countjob > p:first-child { font-size: 14px; }
main table, .compare th, .compare td, .facts th, .facts td, .tile__name { font-size: 14px; }
figcaption, .fineprint, .demo__note, .tile__vendor, .appsub__title { font-size: 13px; }
.btn, .btn--sm, .btn--lg { font-size: 14px; }

/* THE MAIN BUTTON (owner, 2026-10-29: "use these colors across webpages for main buttons" - a vivid
   red that turns dark navy on hover). The red is the nearest to the one shown that white text reads on
   at button size (4.6:1); the navy 13.6:1. Only the main buttons; the --ember token's other uses stay. */
:root { --cta: #e02d1b; --cta-hover: #1b3139; --cta-ink: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --cta-hover: #f0533f; } }
:root[data-theme='dark'] { --cta-hover: #f0533f; }
.btn--ember, .closer .btn--ember, .plan--on .btn--ember {
  background: var(--cta); border-color: var(--cta); color: var(--cta-ink);
  box-shadow: none; transform: none; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn--ember:hover, .closer .btn--ember:hover, .plan--on .btn--ember:hover {
  background: var(--cta-hover); border-color: var(--cta-hover); color: var(--cta-ink); transform: none;
}
.btn--ember:focus-visible { outline: 2px solid var(--cta-hover); outline-offset: 2px; }

/* BOTH COLOURS, ON EVERY PAGE, AT REST (owner, 2026-10-29: "use black some places and databricks
   colors few places", "i like to see them next to each on the same page everywhere", "i meant
   permanent display not hover", "both colors should be in every page"). The main button is red, the
   one beside it black - in the header ("Get started" beside "Contact us"), in every hero, on the
   plan cards; a hover only deepens the button's own colour. The closing band keeps its outline. */
:root { --cta: #e02d1b; --cta-hover: #c22614; --cta-dark: #1b3139; --cta-dark-hover: #24414b; }
.btn--ember:hover, .closer .btn--ember:hover, .plan--on .btn--ember:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.btn--ghost:not(.btn--onink) { background: var(--cta-dark); border-color: var(--cta-dark); color: #ffffff; box-shadow: none; }
.btn--ghost:not(.btn--onink):hover { background: var(--cta-dark-hover); border-color: var(--cta-dark-hover); color: #ffffff; text-decoration: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .btn--ghost:not(.btn--onink) { background: #2a4652; border-color: #2a4652; }
}
:root[data-theme='dark'] .btn--ghost:not(.btn--onink) { background: #2a4652; border-color: #2a4652; }
.nav__contact { margin-left: 4px; }

/* RED IN THE HEADER, BLACK IN THE BODY (owner, 2026-10-29: "not next to each other literally", "use
   databricks for headers", "inside body use black"). The header's button is red on every page; every
   main button inside the page is black, the one beside it a white outline; on a dark band the button
   is white. A hover only deepens a button's own colour. Replaces the paired layer above. */
header.nav .btn--ember { background: var(--cta); border-color: var(--cta); color: #ffffff; }
header.nav .btn--ember:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: #ffffff; }
main .btn--ember, main .plan--on .btn--ember, main .btn--ghost.btn--block {
  background: var(--cta-dark); border-color: var(--cta-dark); color: #ffffff;
}
main .btn--ember:hover, main .plan--on .btn--ember:hover, main .btn--ghost.btn--block:hover {
  background: var(--cta-dark-hover); border-color: var(--cta-dark-hover); color: #ffffff;
}
main .btn--ghost:not(.btn--onink):not(.btn--block) { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
main .btn--ghost:not(.btn--onink):not(.btn--block):hover { background: var(--surface); border-color: var(--cta-dark); color: var(--text); }
main .closer .btn--ember, main .ctaband .btn--ember, .closer .btn--ember, .ctaband .btn--ember {
  background: #ffffff; border-color: #ffffff; color: #0b111a;
}
main .closer .btn--ember:hover, main .ctaband .btn--ember:hover, .closer .btn--ember:hover, .ctaband .btn--ember:hover {
  background: #e8ebef; border-color: #e8ebef; color: #0b111a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) main .btn--ember, :root:not([data-theme='light']) main .btn--ghost.btn--block { background: #2a4652; border-color: #2a4652; }
}
:root[data-theme='dark'] main .btn--ember, :root[data-theme='dark'] main .btn--ghost.btn--block { background: #2a4652; border-color: #2a4652; }
/* A step's number sits on its line in the section's own colour (owner, 2026-10-29: "numbers have
   background white shade"): white on a white section, the band's slate on a tinted one. */
.step::before { background: var(--surface); }
.sec--tint .step::before { background: var(--band); }

/* THE DEMO JOB, QUIETER (owner, 2026-10-29: "this is cluttered, reduce flow diagram size and usecase
   font size"): inside the page's own width, shorter boxes with smaller words and icons, the request in
   a smaller face, the numbers and the stages smaller; titles wrap in balanced lines everywhere. */
h1, h2 { text-wrap: balance; }
.flowband { padding: 10px 0 18px; }
.flowband__in { max-width: var(--page-max); }
.flowband__top { gap: 10px 22px; margin-bottom: 12px; }
.flowband__say { padding: 8px 12px; font-size: 12.5px; line-height: 1.5; border-radius: 10px; box-shadow: none; }
.flowband__who { font-size: 11px; padding: 1px 7px; }
.flowband__facts { gap: 4px 16px; font-size: 12px; }
.flowband__facts b { font-size: 20px; }
.pf { --pf-gap: clamp(8px, 0.9vw, 14px); --pf-row: 16px; }
.pf__n { min-height: 74px; padding: 8px 4px 7px; gap: 3px; border-radius: 9px; box-shadow: none; }
.pf__n b { font-size: 11px; line-height: 1.25; }
.pf__n span { font-size: 10px; }
.pf__n .appi, .pf__k { width: 16px; height: 16px; }
.flowband__stages { margin-top: 10px; gap: 6px 8px; }
.flowband__stages li { padding: 3px 10px; font-size: 12px; }
@media (max-width: 1440px) { .pf__n { padding: 7px 3px 6px; } .pf__n b { font-size: 10.5px; } }

/* BREATHING ROOM (owner, 2026-10-29: "give some space between different items, earlier i asked
   compact it, but not this much"): halfway back - compact, not crowded. */
:root { --sec-y: 48px; }
@media (max-width: 760px) { :root { --sec-y: 32px; } }
.h-hero { padding: 40px 0 36px; }
.h-hero h1 { margin-bottom: 14px; }
.h-hero__cta { margin-top: 20px; }
.sec__head { margin-bottom: 26px; }
.eyebrow { margin-bottom: 8px; }
.subnav a { padding: 12px 0 11px; }
.cards4 .c, .devc, .c:has(> .ico) { padding: 18px 20px; }
.c:has(> .ico) > p, .devc:has(> .ico) > p { margin-top: 10px; }
.cards4, .devcs, .devtabs__panel, .cards4--center, .premfams, .grid { gap: 16px; }
.hsteps--grid { gap: 24px; }
.flowband { padding: 16px 0 28px; }
.flowband__top { margin-bottom: 16px; }
.flowband__stages { margin-top: 16px; }
.pf { --pf-row: 20px; }
.countjobs { gap: 32px; }

/* THE DEMO JOB AS THE CONSOLE HOLDS IT (owner, 2026-10-29: "replace with actual flow from left to
   right", "use this kind of yello card for usecase display"): the request in the canvas's own yellow
   Overview note, and the process's real steps and wires, left to right, in two lanes. */
.overview { flex: 1; margin: 0; padding: 12px 16px; border: 1px solid #f1d66b; border-radius: 10px; background: #fde98d; color: #2b2405; }
.overview__label { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #5c4a07; }
.overview__text { margin: 0; font-size: 12.5px; line-height: 1.55; color: #2b2405; }
.pf2__scroll { overflow-x: auto; padding: 2px 0 4px; }
.pf2 { display: block; width: 100%; min-width: 1040px; height: auto; overflow: visible; }
.pf2__n {
  box-sizing: border-box; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 4px 6px; text-align: center; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface);
  font-family: var(--font-sans);
}
.pf2__n b { font-size: 10.5px; line-height: 1.25; font-weight: 600; color: var(--text); }
.pf2__n span { margin-top: auto; font-size: 9.5px; color: var(--text-faint); }
.pf2__n .appi, .pf2__n .pf__k { flex: none; width: 16px; height: 16px; }
.pf2__n .pf__k { color: var(--accent); }
.pf2__n--ask { border-color: var(--accent-border); background: var(--accent-tint); }
.pf2__w { fill: none; stroke: var(--accent-border); stroke-width: 1.6; }
.pf2__a { fill: var(--accent); }
.pf2__l { font-family: var(--font-sans); font-size: 9.5px; fill: var(--text-muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .overview { background: #3a3110; border-color: #5c4d14; color: #f3e6b0; } :root:not([data-theme='light']) .overview__text { color: #f3e6b0; } :root:not([data-theme='light']) .overview__label { color: #e0c466; } }
:root[data-theme='dark'] .overview { background: #3a3110; border-color: #5c4d14; color: #f3e6b0; }
:root[data-theme='dark'] .overview__text { color: #f3e6b0; }
:root[data-theme='dark'] .overview__label { color: #e0c466; }
@media (max-width: 700px) { .pf2__scroll { display: none; } }

/* LIVELY (owner, 2026-10-29): the hero conversation plays out, the apps people run move past, sections
   ease in once. All still under prefers-reduced-motion; without the script everything shows. */
.lively .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.lively .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .convo--hero .msg { opacity: 0; animation: msg-in 0.45s ease forwards; }
  .convo--hero .msg:nth-of-type(1) { animation-delay: 0.3s; }
  .convo--hero .msg:nth-of-type(2) { animation-delay: 1.1s; }
  .convo--hero .msg:nth-of-type(3) { animation-delay: 2.1s; }
  .convo--hero .msg:nth-of-type(4) { animation-delay: 2.7s; }
  .logos__row { animation: logos-move 48s linear infinite; }
  .logos__track:hover .logos__row { animation-play-state: paused; }
}
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes logos-move { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.logos { padding: 22px 0 24px; border-bottom: 1px solid var(--line); background: var(--surface); }
.logos__title { margin: 0 0 14px; text-align: center; font-size: 13px; color: var(--text-muted); }
.logos__title a { margin-left: 8px; font-weight: 600; }
.logos__track { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logos__row { display: flex; flex: none; gap: 34px; margin: 0; padding: 0 17px; list-style: none; }
.logos__row li { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--text); }
.logos__row img { width: 28px; height: 28px; }
/* The canvas screenshot of the demo job (owner, 2026-10-29: "just use this screenshot"). */
.flowshot { display: block; width: 100%; min-width: 1040px; height: auto; border: 1px solid var(--line); border-radius: 10px; }
/* The stage chips without numbers (owner, 2026-10-29: "remove numbers"). */
.flowband__stages li::before { content: none; }
/* A small yellow note, like the canvas's (owner, 2026-10-29: "keep yellow card small"): a note's width,
   the request in six lines, the rest on the demo page. */
.flowband__top { justify-content: space-between; }
.overview { flex: 0 1 440px; padding: 10px 12px; }
.overview__text { font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) { .overview { flex-basis: 100%; } }
.flowband__top { justify-content: flex-start; gap: 12px 32px; }

/* THE REQUEST ON A NOTE (owner, 2026-10-29: "just show full usecase in yello, try some unique styling
   there"): the whole request, on a sticky note pinned to the board - a slight tilt, tape across the
   top, a folded corner, a soft shadow. */
.overview { position: relative; flex: 0 1 560px; padding: 18px 18px 16px; border: 0; border-radius: 3px 3px 3px 3px;
  background: linear-gradient(180deg, #fff1a8 0%, #fde98d 100%);
  box-shadow: 0 1px 1px rgba(60, 45, 0, 0.12), 0 10px 22px -8px rgba(60, 45, 0, 0.35);
  transform: rotate(-0.8deg); }
.overview::before { content: ''; position: absolute; top: -9px; left: 50%; width: 92px; height: 20px; margin-left: -46px;
  background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(160, 140, 60, 0.18); transform: rotate(1.5deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.overview::after { content: ''; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px;
  background: linear-gradient(315deg, var(--surface) 50%, #f0d65e 50%); border-top-left-radius: 3px;
  box-shadow: -1px -1px 2px rgba(60, 45, 0, 0.15); }
.overview__label { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 10.5px; letter-spacing: 0.14em; }
.overview__label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #e02d1b; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); }
.overview__text { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible;
  font-size: 12.5px; line-height: 1.6; color: #2b2405; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .overview { background: linear-gradient(180deg, #4a3e12 0%, #3a3110 100%); } :root:not([data-theme='light']) .overview::after { background: linear-gradient(315deg, var(--surface) 50%, #5c4d14 50%); } }
:root[data-theme='dark'] .overview { background: linear-gradient(180deg, #4a3e12 0%, #3a3110 100%); }
:root[data-theme='dark'] .overview::after { background: linear-gradient(315deg, var(--surface) 50%, #5c4d14 50%); }
@media (max-width: 760px) { .overview { transform: none; } }
/* The logo row at the top, just below the header (owner, 2026-10-29: "keep in the top just below header"). */
.logos { padding: 14px 0 14px; background: var(--surface); }
.logos__title { margin-bottom: 10px; }
/* The note wider and lower, the group centred (owner, 2026-10-29: "reduce the height and stretch the
   width and centralize it"). */
.flowband__top { justify-content: center; align-items: center; gap: 12px 36px; }
.overview { flex: 0 1 1000px; padding: 16px 22px 14px; }
.overview__text { font-size: 13px; line-height: 1.55; }

/* LEGAL IN THE DOCS' TYPE (owner, 2026-10-29: "use the same font for legal and privacy they look odd"):
   the legal pages read exactly as the docs do - side lists 14, labels 11.5, text 15 in the body ink,
   headings 30 / 21, the date 13, the label above the title in the docs' style. */
.legal__side a, .legal__toc a { font-size: 14px; line-height: 1.4; }
.legal__side a { padding: 5px 10px; color: var(--text); }
.legal__toc a { color: var(--text-muted); }
.legal__group { font-size: 11.5px; }
.legal__ask { font-size: 14px; }
.legal .policy h1, .legal .policy .h1s { font-size: 30px; line-height: 1.2; }
.legal .policy h2 { font-size: 21px; margin-top: 1.7em; }
.legal .policy p:not(.eyebrow), .legal .policy li { font-size: 15px; line-height: 1.6; color: var(--ink-body); }
.legal .policy .policy__date { font-size: 13px; color: var(--text-faint); }
.legal .policy .eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent); }
.legal .policy .eyebrow { font-size: 13px; font-weight: 700; }
/* Text on a dark band stays light (owner, 2026-10-29: "not visible"): the body ink is for light pages. */
main .ctaband p, main .closer p, main .ctaband li, main .closer li { color: rgba(255, 255, 255, 0.78); }
main .ctaband h2, main .closer h2 { color: #ffffff; }

/* THE SLIM BAR (owner, 2026-10-29: "move this to the top of the page, make it slim and stylish,
   animate it"): one dark line under the header - a live dot, the promise, one button - with a slow
   light passing across. Still for reduced motion. */
.ctabar { position: relative; overflow: hidden; background: #0f141b; color: #ffffff; border-bottom: 1px solid #1d2430; }
.ctabar::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.09) 50%, transparent 62%, transparent 100%);
  background-size: 250% 100%; background-position: 120% 0; }
.ctabar__in { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding-top: 8px; padding-bottom: 8px; }
.ctabar__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e02d1b; box-shadow: 0 0 0 0 rgba(224, 45, 27, 0.6); }
.ctabar__text { flex: 1; margin: 0; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.78); }
.ctabar__text b { color: #ffffff; font-weight: 600; margin-right: 6px; }
.ctabar__btn { flex: none; background: #ffffff; border-color: #ffffff; color: #0b111a; }
.ctabar__btn:hover { background: #e8ebef; border-color: #e8ebef; color: #0b111a; text-decoration: none; }
.ctabar__btn svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .ctabar::before { animation: ctabar-light 6s ease-in-out infinite; }
  .ctabar__dot { animation: ctabar-dot 2.2s ease-out infinite; }
}
@keyframes ctabar-light { 0% { background-position: 120% 0; } 60%, 100% { background-position: -20% 0; } }
@keyframes ctabar-dot { 0% { box-shadow: 0 0 0 0 rgba(224, 45, 27, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(224, 45, 27, 0); } }
@media (max-width: 760px) { .ctabar__in { flex-wrap: wrap; } .ctabar__text span { display: block; } }
/* The apps page's head, slim (owner, 2026-10-29: "make it slim"): one or two lines, a low search box. */
.results__head h1 { margin-bottom: 6px; }
.results__lede { max-width: 110ch; margin: 0; font-size: 15px; }
.results .search { margin-top: 14px; }
.search input { height: 40px; padding-top: 0; padding-bottom: 0; font-size: 14px; }
/* The apps page: the first group right under the search (owner, 2026-10-29: "cut the space, move it up
   bit"), the groups closer together. */
.results .appgroup { margin-top: 32px; }
.results .appgroup:first-of-type { margin-top: 20px; }
.results .appgroup__head { margin-bottom: 10px; }
/* The black bar's button in the header red (owner, 2026-10-29: "black works well with databricks
   orange colored button"). */
.ctabar__btn, .ctabar__btn:visited { background: var(--cta); border-color: var(--cta); color: #ffffff; }
.ctabar__btn:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: #ffffff; }
/* Red starts something; a button to read or ask is white on the black (owner, 2026-10-29: "this should be white"). */
.ctabar__btn--light, .ctabar__btn--light:visited { background: #ffffff; border-color: #ffffff; color: #0b111a; }
.ctabar__btn--light:hover { background: #e8ebef; border-color: #e8ebef; color: #0b111a; }

/* THE DATABRICKS PALETTE ONLY (owner, 2026-10-29: "use databricks theme color
   only"): the red #FF3621 for every red button and the bar's dot, a deeper red on hover; the bar in
   the navy #1B3139 that the body's black buttons already use. */
:root { --cta: #ff3621; --cta-hover: #e5290f; --cta-dark: #1b3139; --cta-dark-hover: #24414b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --cta-hover: #ff5a45; } }
:root[data-theme='dark'] { --cta-hover: #ff5a45; }
.ctabar { background: #1b3139; border-bottom-color: #24414b; }
.ctabar__dot { background: #ff3621; }
@keyframes ctabar-dot { 0% { box-shadow: 0 0 0 0 rgba(255, 54, 33, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 54, 33, 0); } }
.overview__label::before { background: #ff3621; }
/* Every button on the black bar is white (owner, 2026-10-29: "change this to white"); the red stays the header's. */
.ctabar__btn, .ctabar__btn:visited { background: #ffffff; border-color: #ffffff; color: #1b3139; }
.ctabar__btn:hover { background: #eef1f3; border-color: #eef1f3; color: #1b3139; text-decoration: none; }
/* The note lower (owner, 2026-10-29: "reduce the height"): as wide as the band allows beside its
   numbers, tighter lines and padding - four or five lines for the whole request. */
.overview { flex: 0 1 1120px; padding: 10px 18px 10px; }
.overview__label { margin-bottom: 3px; }
.overview__text { font-size: 12.5px; line-height: 1.45; }
.overview { padding: 8px 16px 8px; }
.overview__text { font-size: 12px; line-height: 1.4; }

/* The hero conversation smaller and centred in its column (owner, 2026-10-29: "reduce this size too",
   "keep it centered"). */
.h-hero__grid { align-items: center; }
.convo--hero { width: 100%; max-width: 520px; margin: 0 auto; justify-self: center; }
.convo--hero .convo__app { padding: 7px 12px; font-size: 12px; }
.convo--hero .convo__app img { width: 15px; height: 15px; }
.convo--hero .msg { gap: 9px; padding: 7px 12px; }
.convo--hero .msg b { font-size: 12.5px; }
.convo--hero .msg p { margin-top: 1px; font-size: 12.5px; line-height: 1.45; }
.convo--hero .msg__who { width: 24px; height: 24px; font-size: 10px; border-radius: 6px; }
.convo--hero .btn, .convo--hero button { padding: 3px 9px; font-size: 11.5px; }
/* The hero conversation wider and lower (owner, 2026-10-29: "reduce the height and stretch the
   width"): the whole column, each message on a line or two, tighter between them. */
.convo--hero { max-width: 680px; }
.convo--hero .msg { padding: 5px 12px; }
.convo--hero .msg p { line-height: 1.4; }
.convo--hero .convo__app { padding: 6px 12px; }
/* The hero conversation from the top, centred across its column (owner, 2026-10-29: "keep it
   centered from the top"): it starts level with the hero's first line. */
.h-hero__grid { align-items: start; }
.convo--hero { align-self: start; margin: 4px auto 0; }

/* The hero's words wider and lower (owner, 2026-10-29: "adjust font and size and stretch the width
   reduce the height"): the headline on one line at desktop width, the lead in two lines, the four
   checks in one row, slimmer buttons; the text column takes more of the width. */
.h-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; }
.h-hero h1 { font-size: clamp(28px, 2.5vw, 36px); line-height: 1.15; margin-bottom: 10px; }
@media (min-width: 1180px) { .h-hero h1 { white-space: nowrap; text-wrap: nowrap; } }
.h-hero__lead { max-width: none; font-size: 15px; line-height: 1.55; }
.h-hero__cta { margin-top: 14px; }
.h-hero__cta .btn { padding: 8px 16px; }
.h-hero .ticks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.h-hero .ticks li { font-size: 13px; }
@media (max-width: 1000px) { .h-hero__grid { grid-template-columns: minmax(0, 1fr); } }
.h-hero .ticks { flex-wrap: nowrap; gap: 6px 14px; }
.h-hero .ticks li { font-size: 12.5px; white-space: nowrap; }
@media (max-width: 1180px) { .h-hero .ticks { flex-wrap: wrap; } }
/* The bar's mark: a spark, not a dot (owner, 2026-10-29: "replace this with some other icon"). */
.ctabar__ico { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  background: rgba(255, 54, 33, 0.14); color: #ff3621; }
.ctabar__ico svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: no-preference) { .ctabar__ico svg { animation: ctabar-twinkle 2.8s ease-in-out infinite; } }
@keyframes ctabar-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(0.82) rotate(18deg); opacity: 0.7; } }
/* The bar's spark in our blue (owner, 2026-10-29: "keep blue"). */
.ctabar__ico { background: rgba(90, 162, 240, 0.16); color: #5aa2f0; }

/* THE DEVELOPER PAGES IN THE DOCS' TYPE (owner, 2026-10-29: "this page font not good"): the GitHub,
   dbt and library pages read like the docs - a 30px title, a 14px link under it, text 15px at a
   reading width, the facts' figures 24 over 13.5 words, code 12.5px in the mono face. */
.mdhead h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.015em; margin: 2px 0 4px; }
.mdhead .mdhead__lead { font-size: 15px; line-height: 1.6; color: var(--ink-body); max-width: 96ch; }
.mdhead .mdhead__lead:has(> a:only-child) { font-size: 14px; margin: 0 0 6px; }
.dbtfacts > div > b { font-size: 24px; font-weight: 600; }
.dbtfacts > div > span { font-size: 13.5px; line-height: 1.5; }
.dbtstory h2, .dbtsec h2 { font-size: 21px; font-weight: 600; }
.dbtstory__steps { max-width: 100ch; }
.dbtstory__steps li, .dbtsec p, .dbtsec li, .dbtstory p { font-size: 15px; line-height: 1.6; color: var(--ink-body); max-width: 100ch; }
.dbtstory__steps li b { font-weight: 600; color: var(--text); }
.ghtree, .ghtree li { font-size: 12.5px; line-height: 1.6; }
.ghfiles pre, .ghfiles code, .dbtf pre, .dbtf code { font-size: 12.5px; line-height: 1.55; }
.dbtf summary code { font-size: 12px; }

/* The bar's mark: apps being wired together (owner, 2026-10-29: "this animation should show about
   wiring differnt connector"). Three logos on a wire; a light runs along it and each logo lights as it
   arrives. Still for reduced motion. */
.cw { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; width: 74px; height: 24px; }
.cw__wire { position: absolute; left: 11px; right: 11px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px;
  background: rgba(90, 162, 240, 0.35); overflow: hidden; }
.cw__pulse { position: absolute; top: 0; left: 0; width: 14px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #9cc8f6, #ffffff); transform: translateX(-14px); }
.cw__n { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  background: #ffffff; box-shadow: 0 0 0 1px rgba(90, 162, 240, 0.45); }
.cw__n img { width: 14px; height: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .cw__pulse { animation: cw-run 2.4s linear infinite; }
  .cw__n1 { animation: cw-glow 2.4s ease-out infinite 0s; }
  .cw__n2 { animation: cw-glow 2.4s ease-out infinite 1.05s; }
  .cw__n3 { animation: cw-glow 2.4s ease-out infinite 2.05s; }
}
@keyframes cw-run { from { transform: translateX(-14px); } to { transform: translateX(56px); } }
@keyframes cw-glow { 0% { box-shadow: 0 0 0 1px rgba(90, 162, 240, 0.45), 0 0 0 0 rgba(90, 162, 240, 0.7); }
  25% { box-shadow: 0 0 0 1px rgba(156, 200, 246, 0.9), 0 0 0 5px rgba(90, 162, 240, 0); }
  100% { box-shadow: 0 0 0 1px rgba(90, 162, 240, 0.45), 0 0 0 0 rgba(90, 162, 240, 0); } }
.cw { width: 104px; }
@keyframes cw-run { from { transform: translateX(-14px); } to { transform: translateX(84px); } }

/* THE MENU, LEAN (owner, 2026-10-29: "background color and consistent menu items with uniform
   height", "dropdown hides the background, so need to keep lean"): every menu opens the same navy
   card under its own item, two columns (a third or fourth column wraps below), each entry one
   52px row: the name, and its line cut to one. The last two menus open leftward to stay on screen.
   Wide screens only: the small-screen menu keeps its flat list. */
@media (min-width: 1101px) {
  .nav__group { position: relative; }
  .mega {
    left: -8px; right: auto; top: calc(100% + 8px); width: 640px;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px;
    background: var(--cta-dark); box-shadow: 0 14px 34px rgba(10, 15, 25, 0.22);
  }
  .nav__group:nth-last-of-type(2) .mega, .nav__group:nth-last-of-type(3) .mega { left: auto; right: -8px; }
  .mega::before { top: -12px; height: 12px; }
  .mega .wrap { max-width: none; padding: 0 14px; }
  .mega__in { grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 12px 0; }
  .mega__title {
    padding: 2px 10px 8px; margin-bottom: 4px; border-bottom-color: rgba(255, 255, 255, 0.14);
    font-size: 11px; color: #7fb6f2;
  }
  .mega__item {
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    height: 52px; padding: 0 10px; border-radius: 8px; overflow: hidden; color: #fff;
  }
  .mega__item b { font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; }
  .mega__item span {
    font-size: 12px; color: rgba(255, 255, 255, 0.66);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mega__item:hover, .mega__item:focus-visible { background: rgba(255, 255, 255, 0.08); }
  .mega__item:hover b, .mega__item[aria-current='page'] b { color: #fff; }
  .mega__item[aria-current='page'] { background: rgba(255, 255, 255, 0.12); }
}

/* THE DEMO'S USE CASE ON THE SAME STICKY NOTE (owner, 2026-10-29: "usecase in yello card as discussed
   earlier", "update new content usecase next to it"): the request beside the recording, pinned like
   the home page's, in the sidebar's reading size. */
.demo__side .demo__usecase { margin: 12px 0 18px; padding: 18px 18px 16px; transform: rotate(-0.6deg); }
.demo__side .demo__usecase .overview__text { font-size: 14px; line-height: 1.6; }

/* THE DEMO'S PREVIEW (owner, 2026-10-29: "explain about preview", the Shopify and Stripe rows, "Runs
   details"): four short cards, then the two reads side by side and the run across both. */
.demo__pvpoints { margin-bottom: 22px; }
.demo__pvshots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; align-items: start; }
.demo__pvshots .demo__shot { margin: 0; }
.demo__pvshots .demo__shot--wide { grid-column: 1 / -1; max-width: 1180px; justify-self: center; }
@media (max-width: 860px) { .demo__pvshots { grid-template-columns: 1fr; } }

/* THE DEMO'S APPS ON ONE ROW (owner, 2026-10-29: "keep all in same row"): five apps under the use
   case, a smaller icon and tighter spacing; they wrap only where the column cannot hold the row. */
@media (min-width: 1101px) { .demo__top { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); } }
.demo__side .demo__systems { gap: 8px 10px; }
.demo__side .demo__sys { gap: 5px; font-size: 12.5px; white-space: nowrap; }
.demo__side .demo__sys .appi { width: 22px; height: 22px; }

/* A platform step's symbol in the steps, in the app icons' tile (owner, 2026-10-29). */
.demo__kind { display: inline-grid; place-items: center; color: var(--accent); }
.demo__kind svg { width: 16px; height: 16px; }
@media (min-width: 1101px) and (max-width: 1340px) {
  .demo__side .demo__systems { gap: 6px 8px; }
  .demo__side .demo__sys { gap: 4px; font-size: 12px; }
  .demo__side .demo__sys .appi { width: 20px; height: 20px; padding: 2px; }
}

/* THE DEMO'S SIDE: THE USE CASE AND WHAT IT TAKES ELSEWHERE (owner, 2026-10-29: "remove yello card
   highligh put something else explaing about usecase comparing ... its hard, limitation", "move app
   sybol below the video"): the request as a plain quote, then two short lists - the way a step-by-step
   tool asks you to build it, and what AnnE does - and the five apps under the recording. */
.demo__side .demo__ask { padding: 10px 14px; font-size: 13px; line-height: 1.55; }
.swap { display: flex; flex: 1; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
/* Each row: AnnE's answer from the left, then the old way crossed out, ending at the right, so a row
   fills its width (owner, 2026-10-30: "this space is bothering", "second line starts as first line
   from left, first starts in second line somewhere in the middle ends right"). */
.swap { overflow: hidden; }
.swap__band { display: flex; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
/* 35px = the row's 14px padding + its 21px mark, so each title lines up with the text under it. */
.swap__band span { flex: 1; padding: 5px 35px; }
.swap__band span:first-child { background: #2e9e52; color: #fff; }
.swap { --old: #8a2318; --old-band: #f8d0cb; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .swap { --old: #f5b7b0; --old-band: #4a211c; } }
:root[data-theme='dark'] .swap { --old: #f5b7b0; --old-band: #4a211c; }
.swap__band span:last-child { background: var(--old-band); color: var(--old); text-align: right; }
.swap__rows { flex: 1; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.swap__rows li { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 3px 14px; border-top: 1px solid var(--line); }
.swap__rows li:first-child { border-top: 0; }
.swap__rows span { align-self: stretch; position: relative; padding-left: 21px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--text); }
.swap__rows span::before { content: '\2713'; position: absolute; left: 1px; top: 0; color: #2e9e52; font-size: 15px; font-weight: 700; line-height: 1.2; }
.swap__rows s { position: relative; align-self: flex-end; padding-right: 21px; text-align: right; font-size: 12.5px; line-height: 1.3; color: var(--old); text-decoration: line-through 1px color-mix(in srgb, var(--old) 45%, transparent); text-decoration-skip-ink: none; }
.swap__rows s::after { content: attr(data-emoji); position: absolute; right: 0; top: 0; width: 16px; height: 16px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: 13px; font-weight: 400; line-height: 16px; text-align: center; text-decoration: none; }
/* The line under the mouse stays still and the other line of its row moves (owner, 2026-10-30). On a
   green line, the old way slides right and fades out; on an old way line, With AnnE bounces. */
@keyframes swap-bubbly { 0%, 40%, 100% { transform: none; } 10% { transform: translateY(-4px) scale(1.04); } 20% { transform: translateY(1px) scale(.99); } 30% { transform: translateY(-1.5px) scale(1.01); } }
@keyframes swap-pop { 0%, 40%, 100% { transform: none; } 10% { transform: scale(1.5) rotate(-10deg); } 20% { transform: scale(.9) rotate(4deg); } 30% { transform: scale(1.1); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .swap__rows s { transition: transform .5s ease-out, opacity .5s ease-out; }
  .swap__rows span:hover + s { transform: translateX(48px); opacity: .1; transition: transform 2.5s ease-in-out, opacity 2.5s ease-in-out; }
  .swap__rows li:has(s:hover) span { transform-origin: left center; animation: swap-bubbly 2s ease-in-out infinite; }
  .swap__rows li:has(s:hover) span::before { animation: swap-pop 2s ease-in-out infinite; }
}
.demo__video .demo__vidapps { justify-content: center; flex-wrap: wrap; gap: 8px 14px; margin: 12px 0 0; }
.demo__vidapps .demo__sys { gap: 6px; font-size: 13px; white-space: nowrap; }
.demo__vidapps .demo__sys .appi { width: 24px; height: 24px; }

/* THE USE CASE ABOVE THE RECORDING (owner, 2026-10-29: "move it above the video in a diffrent style"):
   the request as the message typed to AnnE - the console's own request bubble, a speech mark, the
   words in reading size - and the side keeps the legacy way against AnnE's. */
.demo__main { display: grid; gap: 14px; min-width: 0; }
.demo__prompt { margin: 0; padding: 12px 16px 14px; border: 1px solid #cfe0f7; border-radius: 14px 14px 14px 4px;
  background: linear-gradient(180deg, #eef5fe 0%, #e6f0fd 100%); }
.demo__promptlabel { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #0b5fbf; }
.demo__promptlabel span { margin-left: 4px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.demo__prompt blockquote { margin: 0; }
.demo__prompt blockquote p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .demo__prompt { background: #13233a; border-color: #24406a; } :root:not([data-theme='light']) .demo__promptlabel { color: #7fb6f2; } }
:root[data-theme='dark'] .demo__prompt { background: #13233a; border-color: #24406a; }
:root[data-theme='dark'] .demo__promptlabel { color: #7fb6f2; }

/* THE LISTS AT THE VIDEO'S HEIGHT (owner, 2026-10-29: "keep next to video with same height"): the use
   case across the top, then the recording and the two lists side by side in one row; the lists share
   the row's height. */
.demo__top { align-items: stretch; row-gap: 16px; }
.demo__top > .demo__prompt { grid-column: 1 / -1; }
.demo__top > .demo__side { display: flex; flex-direction: column; }

/* THE STEPS' ICONS WITHOUT A TILE (owner, 2026-10-29: "symbols have white background ?"): on the
   band, the app logos and the platform symbols stand on their own - no white square, no border. */
.demo__stepapps .appi { background: transparent; border: 0; padding: 0; border-radius: 4px; width: 24px; height: 24px; }
.demo__stepapps .demo__kind svg { width: 20px; height: 20px; }

/* One button, everywhere (owner, 2026-10-30: "all buttons should be consistent"): the same size,
   type and corners in the header, on the pages and in the bands. The docs match it (build_docs.py). */
.btn, .btn--sm, .btn--lg, .h-hero__cta .btn { padding: 7px 14px; font-size: 14px; font-weight: 600; line-height: 1.2; border-radius: 8px; }