/* ==========================================================================
   INDUCER SOLUTIONS — "Operating layer"
   --------------------------------------------------------------------------
   The mark is a shield holding a leaf and a circuit: living systems, kept
   safe. The design reads from that — an instrument panel rather than a
   brochure. Precise structure, hairline rules, monospace where the content is
   data, and one signal colour that only appears when something is live.

   Rules the system obeys:
     1. Nothing is a bare pixel. Every size comes from the fluid scale in §1,
        so the page grows from a 320px phone to a 2560px display instead of
        freezing into a phone-width column with empty gutters.
     2. Colour is signal, not decoration. Blue and green mean "live" or
        "this way"; everything structural is a cool neutral.
     3. Depth comes from light, not from shadow-spam: one hairline catching
        the top edge, one soft shadow falling below.
     4. Every section has a different shape. A page of identical card grids
        is a list, not an argument.
     5. Motion explains something or it does not ship, and all of it stops
        under prefers-reduced-motion.

   Contents
     1  Scale — type, space, structure
     2  Colour — light ground, dark ground
     3  Base and typography
     4  Layout — shell, bays, rules
     5  Chrome — masthead, sub-nav, footer
     6  Buttons and links
     7  The field — gradient mesh, lattice, grain
     8  Hero and page heads
     9  Section heads and eyebrows
    10  Cards, panels, tiles
    11  The index table
    12  Diagrams — loop, hub, stack
    13  The agent console
    14  Tabs, search, disclosure
    15  Marquee, stats, rails
    16  Prose and legal
    17  Motion, RTL, print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scale
   --------------------------------------------------------------------------
   Every token interpolates between a 320px viewport and a 1920px one, then
   holds. The construction matters: clamp(min-rem, rem + vw, max-rem). The rem
   half keeps the value responsive to the visitor's own font-size setting — a
   pure-vw scale ignores it, which breaks zoom for anyone who has set a larger
   default. The vw half makes it responsive to the screen.
   -------------------------------------------------------------------------- */
:root {
  --step--2: clamp(0.6875rem, 0.6625rem + 0.125vw, 0.8125rem);   /* 11 → 13   */
  --step--1: clamp(0.875rem, 0.8375rem + 0.1875vw, 1.0625rem);   /* 14 → 17   */
  --step-0:  clamp(1rem, 0.9625rem + 0.1875vw, 1.1875rem);       /* 16 → 19   */
  --step-1:  clamp(1.1563rem, 1.0938rem + 0.3125vw, 1.4688rem);  /* 18.5 → 23.5 */
  --step-2:  clamp(1.3125rem, 1.2125rem + 0.5vw, 1.8125rem);     /* 21 → 29   */
  --step-3:  clamp(1.3125rem, 1.2rem + 0.5625vw, 1.875rem);      /* 21 → 30   */
  --step-4:  clamp(1.5rem, 1.35rem + 0.75vw, 2.25rem);           /* 24 → 36   */
  --step-5:  clamp(1.5625rem, 1.375rem + 0.9375vw, 2.5rem);      /* 25 → 40   */
  --step-6:  clamp(1.6875rem, 1.4438rem + 1.2188vw, 2.9063rem);  /* 27 → 46.5 */

  --space-3xs: clamp(0.25rem, 0.225rem + 0.125vw, 0.375rem);     /*  4 →  6   */
  --space-2xs: clamp(0.5rem, 0.4625rem + 0.1875vw, 0.6875rem);   /*  8 → 11   */
  --space-xs:  clamp(0.75rem, 0.6875rem + 0.3125vw, 1.0625rem);  /* 12 → 17   */
  --space-s:   clamp(1rem, 0.9125rem + 0.4375vw, 1.4375rem);     /* 16 → 23   */
  --space-m:   clamp(1.5rem, 1.375rem + 0.625vw, 2.125rem);      /* 24 → 34   */
  --space-l:   clamp(2rem, 1.825rem + 0.875vw, 2.875rem);        /* 32 → 46   */
  --space-xl:  clamp(3rem, 2.7375rem + 1.3125vw, 4.3125rem);     /* 48 → 69   */
  --space-2xl: clamp(4rem, 3.65rem + 1.75vw, 5.75rem);           /* 64 → 92   */
  --space-3xl: clamp(6rem, 5.475rem + 2.625vw, 8.625rem);        /* 96 → 138  */

  --nav-h:      clamp(3.75rem, 3.5rem + 1.25vw, 5rem);           /* 60 → 80   */
  --gutter:     clamp(1.125rem, 0.65rem + 2.375vw, 3.5rem);      /* 18 → 56   */
  --bay:        clamp(4rem, 2.9rem + 5.5vw, 9.5rem);             /* 64 → 152  */
  --space-head: clamp(2.25rem, 2.05rem + 1vw, 3.25rem);          /* 36 → 52   */
  --control:    clamp(2.625rem, 2.5rem + 0.625vw, 3.25rem);      /* 42 → 52   */
  --plate:      clamp(2.5rem, 2.25rem + 1.25vw, 3.75rem);        /* 40 → 60   */

  --r-1: clamp(0.375rem, 0.35rem + 0.125vw, 0.5rem);             /*  6 →  8   */
  --r-2: clamp(0.625rem, 0.575rem + 0.25vw, 0.875rem);           /* 10 → 14   */
  --r-3: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);                    /* 16 → 24   */
  --pill: 999px;

  /* The container grows with the screen. Prose keeps its own character-based
     measure, so this widens grids without ever widening a line of copy. */
  --shell: clamp(72rem, 62rem + 16vw, 90rem);                    /* 1152 → 1440 */
  --shell-narrow: 46rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* --------------------------------------------------------------------------
   2. Colour
   --------------------------------------------------------------------------
   Neutrals are blue-biased rather than grey — a pure grey next to a cool
   signal reads as unconsidered. Each accent has a graphic value for fills and
   rules and a -t sibling for type; the -t values are the ones that clear
   4.5:1 on the ground. Never set type in a graphic value.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --ground:   #f7f9fb;
  --surface:  #ffffff;
  --raised:   #ffffff;
  --sunk:     #eef2f6;
  --ink:      #0a1626;
  --ink-2:    #3d4d63;
  --muted:    #5f7186;
  --line:     #d7dfe8;
  --line-2:   #e7edf3;

  --sig:      #1a7fc1;   --sig-t:   #10608f;   /* blue  — primary signal */
  --sig-2:    #12996a;   --sig-2-t: #0b7350;   /* green — confirm, live  */

  /* The display blue is tuned to read as a colour; a control has to carry a
     white label as well, and #1a7fc1 does that at only 4.33:1. These two are
     the same hues stepped down until every point on the ramp between them
     clears 4.5:1 against white — measured, and the audit re-measures it. */
  --sig-strong:   #14688f;
  --sig-2-strong: #0e7a55;
  --warn:     #c2761a;   --warn-t:  #8f5307;
  --bad:      #c0392b;   --bad-t:   #9c2a1e;
  --on-sig:   #ffffff;

  /* The dark plate used for the CTA band, the footer and monogram tiles.
     Held dark in both themes so type on it always clears 4.5:1. */
  --plate-bg: #0b1626;
  --on-plate: #eef4fb;

  --link: var(--sig-t);
  --link-hover: var(--ink);
  --focus: #0d6fae;

  --shadow-1: 0 1px 1px rgba(10, 22, 38, 0.04), 0 2px 6px -2px rgba(10, 22, 38, 0.08);
  --shadow-2: 0 1px 2px rgba(10, 22, 38, 0.05), 0 18px 40px -24px rgba(10, 22, 38, 0.35);
  --shadow-3: 0 2px 4px rgba(10, 22, 38, 0.06), 0 40px 80px -40px rgba(10, 22, 38, 0.45);

  /* One hairline catching light along the top edge — the whole depth model. */
  --lit: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* The gradient field. Declared as tokens so a section can re-tint it. */
  --field-1: rgba(26, 127, 193, 0.16);
  --field-2: rgba(18, 153, 106, 0.14);
  --field-3: rgba(96, 132, 214, 0.12);
  --field-bg: #eef3f8;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ground:   #070b12;
  --surface:  #0d141f;
  --raised:   #121b28;
  --sunk:     #04070c;
  --ink:      #eef4fb;
  --ink-2:    #a9bacd;
  --muted:    #7d90a6;
  --line:     #1e2b3d;
  --line-2:   #16212f;

  --sig:      #5cb2ff;   --sig-t:   #7cc4ff;
  --sig-2:    #43e39b;   --sig-2-t: #63eaae;
  /* Held: the control carries white type on both grounds. */
  --sig-strong:   #14688f;
  --sig-2-strong: #0e7a55;
  --warn:     #e9a13b;   --warn-t:  #f0b45f;
  --bad:      #ef6a5a;   --bad-t:   #f58878;
  --on-sig:   #04121f;

  --plate-bg: #0d1826;
  --on-plate: #eef4fb;

  --link: var(--sig-t);
  --link-hover: #ffffff;
  --focus: #7cc4ff;

  --shadow-1: 0 1px 1px rgba(0, 0, 0, 0.4), 0 2px 6px -2px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --shadow-3: 0 2px 4px rgba(0, 0, 0, 0.55), 0 40px 80px -40px rgba(0, 0, 0, 1);

  --lit: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --field-1: rgba(92, 178, 255, 0.2);
  --field-2: rgba(67, 227, 155, 0.16);
  --field-3: rgba(120, 110, 255, 0.16);
  --field-bg: #060a11;
}

/* --------------------------------------------------------------------------
   3. Base and typography
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--nav-h) + var(--space-s));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-variation-settings: "wdth" 100;
  line-height: 1.6;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas { max-inline-size: 100%; display: block; }

/* Headlines are set in Archivo at 112% width. The expansion is the voice:
   wide, level, engineered — and it is one axis on a variable font rather
   than a second file to download. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 112;
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0 0 0.45em;
}
/* Display weight is 500, not 600 or 700. At these sizes the extra weight
   reads as loud rather than confident, and the expanded width axis is
   already doing the work that a heavier weight would otherwise do. The
   tighter tracking is what makes it look set rather than typed. */
h1 { font-size: var(--step-6); font-weight: 500; letter-spacing: -0.034em; line-height: 1.06; }
h2 { font-size: var(--step-4); font-weight: 500; letter-spacing: -0.028em; line-height: 1.1; }
h3 { font-size: var(--step-1); font-weight: 600; line-height: 1.18; letter-spacing: -0.018em; }
h4 { font-size: var(--step-0); font-weight: 600; line-height: 1.3; }

p { margin: 0 0 1em; max-inline-size: 68ch; text-wrap: pretty; }
p:last-child { margin-block-end: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--link); text-decoration: none; transition: color 0.18s var(--ease); }
a:hover { color: var(--link-hover); }
strong, b { color: var(--ink); font-weight: 600; }
code { font-family: var(--font-mono); font-size: 0.9em; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Over the dark field the blue ring is too close to its surroundings. */
.field :focus-visible,
.plate-band :focus-visible,
.colophon :focus-visible,
html.js .masthead.at-top :focus-visible { outline-color: #ffffff; }

::selection { background: var(--sig); color: #fff; }

/* One mono label style, used everywhere the content is metadata: section
   indices, eyebrows, tags, keys, captions, console output. */
.eyebrow, .index, .tag, .k, .cap, .crumb, .count, .stat-k,
.subnav a, .chip, .layer-i, .flow-s, .console-k, .console-title,
.console-state, .scenario, .field-label, .toc .n, .row-tag {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  max-inline-size: none;
}

.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -9999px;
  z-index: 400;
  background: var(--plate-bg);
  color: var(--on-plate);
  padding: var(--space-xs) var(--space-s);
  font-weight: 600;
  border-radius: 0 0 var(--r-1) 0;
}
.skip-link:focus { inset-inline-start: 0; color: var(--on-plate); }

.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.shell {
  inline-size: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}
.shell--narrow { inline-size: min(100% - (var(--gutter) * 2), var(--shell-narrow)); }

/* A bay is a section. The hairline at the top is the section boundary; there
   are no boxes around sections, only rules between them. */
.bay { padding-block: var(--bay); position: relative; }
.bay--tight { padding-block: var(--space-2xl); }
.bay--rule { border-block-start: 1px solid var(--line-2); }
.bay--sunk { background: var(--sunk); border-block: 1px solid var(--line-2); }

/* Every grid in the system is sized by container query, so a component
   behaves the same in the full shell and in half of a split. */
.bay > .shell, .tabpanel, .split > * { container-type: inline-size; }

.split {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 62rem) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .split--wide-first { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
@media (min-width: 62rem) { .split--wide-last { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }

.stack > * + * { margin-block-start: var(--space-s); }
.stack-l > * + * { margin-block-start: var(--space-l); }
.mt-1 { margin-block-start: var(--space-s); }
.mt-2 { margin-block-start: var(--space-m); }
.mt-3 { margin-block-start: var(--space-l); }
.mt-4 { margin-block-start: var(--space-xl); }
.lede {
  font-size: clamp(0.9813rem, 0.9275rem + 0.2688vw, 1.25rem);   /* 15.7 → 20 */
  line-height: 1.55;
  color: var(--ink-2);
  max-inline-size: 58ch;
}
.muted { color: var(--muted); }

/* --------------------------------------------------------------------------
   5. Chrome
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-block-end: 1px solid var(--line-2);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
  --nav-ink: var(--ink);
  --nav-ink-2: var(--ink-2);
  --nav-line: var(--line);
}
/* Over the dark field the bar is transparent, and app JS drops .at-top once
   the field has scrolled past. Gated on html.js: with JavaScript off the bar
   simply stays solid, because a transparent bar over unknown content is a
   legibility bug waiting to happen. */
html.js .masthead.at-top {
  background: transparent;
  border-block-end-color: rgba(255, 255, 255, 0.14);
  --nav-ink: #ffffff;
  --nav-ink-2: rgba(255, 255, 255, 0.86);
  --nav-line: rgba(255, 255, 255, 0.28);
}
html.js .masthead.at-top .wordmark,
html.js .masthead.at-top .navlink { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); }
html.js .masthead.at-top .icon-btn { background: rgba(6, 12, 22, 0.5); }

.masthead-inner {
  min-block-size: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex: none;
  color: var(--nav-ink);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108;
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.wordmark:hover { color: var(--nav-ink); }
.wordmark img {
  inline-size: clamp(1.9rem, 1.7rem + 0.9vw, 2.7rem);
  block-size: auto;
  flex: none;
}
.wordmark sub {
  display: none;
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 0.47rem + 0.16vw, 0.625rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nav-ink-2);
  vertical-align: baseline;
  bottom: 0;
  align-self: center;
  padding-inline-start: var(--space-2xs);
  margin-inline-start: var(--space-3xs);
  border-inline-start: 1px solid var(--nav-line);
}
@media (min-width: 88rem) { .wordmark sub { display: inline; } }

.mainnav {
  display: flex;
  align-items: center;
  gap: clamp(0.3rem, 0.05rem + 1.05vw, 1rem);
  margin-inline-start: auto;
}
.navlink {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: var(--control);
  padding-inline: var(--space-2xs);
  color: var(--nav-ink-2);
  font-size: var(--step--1);
  font-weight: 500;
  white-space: nowrap;
}
.navlink::after {
  content: "";
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline: var(--space-2xs);
  block-size: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 0.25s var(--ease);
}
.navlink:hover { color: var(--nav-ink); }
.navlink:hover::after { transform: scaleX(1); }
.navlink[aria-current="page"] { color: var(--nav-ink); font-weight: 600; }
.navlink[aria-current="page"]::after { transform: scaleX(1); background: var(--sig); }

.masthead-tools { display: flex; align-items: center; gap: var(--space-2xs); flex: none; }

.icon-btn {
  inline-size: var(--control);
  block-size: var(--control);
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--nav-line);
  border-radius: var(--pill);
  color: var(--nav-ink);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.icon-btn:hover { background: color-mix(in srgb, var(--nav-ink) 10%, transparent); }

.nav-toggle { display: none; }
.nav-toggle span { display: block; inline-size: 17px; block-size: 1.5px; background: currentColor; position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inline-size: 17px;
  block-size: 1.5px;
  background: currentColor;
  transition: transform 0.25s var(--ease);
}
.nav-toggle span::before { inset-block-start: -5px; }
.nav-toggle span::after { inset-block-start: 5px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

/* The drawer. Takes over early, because this bar carries five links and a
   call to action where a template demo carries three. */
@media (max-width: 70rem) {
  .nav-toggle { display: grid; }
  .mainnav {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--space-2xs) var(--gutter) var(--space-s);
    background: var(--ground);
    border-block-end: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  }
  .mainnav.is-open { opacity: 1; visibility: visible; transform: none; }
  .navlink {
    color: var(--ink-2);
    font-size: var(--step-0);
    padding-inline: 0;
    border-block-end: 1px solid var(--line-2);
    white-space: normal;
  }
  .navlink::after { inset-inline: 0 auto; inline-size: 1.5rem; }
  .mainnav .btn { margin-block-start: var(--space-s); }
}

/* Reading progress. */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 250;
  block-size: 2px;
  inline-size: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--sig), var(--sig-2));
  pointer-events: none;
}
[dir="rtl"] .progress { transform-origin: right center; }
@media (prefers-reduced-motion: reduce) { .progress { display: none; } }

/* Sticky in-page wayfinding for the long pages. */
.subnav {
  position: sticky;
  inset-block-start: var(--nav-h);
  z-index: 150;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--line-2);
}
.subnav-inner {
  display: flex;
  gap: var(--space-2xs);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: inline proximity;
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none;
  display: flex;
  align-items: center;
  min-block-size: calc(var(--control) * 0.95);
  padding-inline: var(--space-2xs);
  scroll-snap-align: start;
  color: var(--muted);
  border-block-end: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.subnav a:hover { color: var(--ink); }
.subnav a.is-here { color: var(--ink); border-block-end-color: var(--sig); }
.has-subnav { scroll-padding-block-start: calc(var(--nav-h) * 2 + var(--space-s)); }

/* Footer. Sits on the dark plate in both themes, so the page closes on the
   darkest colour in the palette rather than fading out. */
.colophon {
  background: var(--plate-bg);
  color: rgba(238, 244, 251, 0.72);
  padding-block: var(--space-2xl) var(--space-l);
  position: relative;
  overflow: hidden;
}
.colophon::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--sig) 30%, var(--sig-2) 70%, transparent);
  opacity: 0.7;
}
.colophon-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--space-l);
}
@media (max-width: 62rem) { .colophon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .colophon-grid { grid-template-columns: 1fr; } }
.colophon h2 {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(238, 244, 251, 0.5);
  margin-block-end: var(--space-s);
}
.colophon li { margin-block-end: var(--space-2xs); }
.colophon li a, .colophon li span {
  font-size: var(--step--1);
  color: rgba(238, 244, 251, 0.72);
}
.colophon li a:hover { color: #fff; }
.colophon-mark { display: flex; align-items: center; gap: var(--space-2xs); margin-block-end: var(--space-s); }
.colophon-mark img { inline-size: 2.4rem; block-size: auto; }
.colophon-mark b {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108;
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}
.colophon-blurb { font-size: var(--step--1); max-inline-size: 34ch; color: rgba(238, 244, 251, 0.62); }
.colophon-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-l);
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-s);
  border-block-start: 1px solid rgba(238, 244, 251, 0.12);
  font-size: var(--step--1);
  color: rgba(238, 244, 251, 0.5);
}
.colophon-base p { margin: 0; max-inline-size: none; }

/* --------------------------------------------------------------------------
   6. Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-block-size: var(--control);
  padding-inline: var(--space-m);
  border: 1px solid transparent;
  border-radius: var(--pill);
  background: var(--ink);
  color: var(--ground);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:hover { color: var(--ground); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: none; }

/* The one saturated control on the page. Reserved for the single action a
   section is asking for; everything else is an outline. */
.btn--go {
  background: linear-gradient(135deg, var(--sig-strong) 0%, var(--sig-2-strong) 100%);
  color: #ffffff;
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--go:hover { color: #ffffff; filter: brightness(1.12); }

.btn--line { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--line:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-1); }

.btn--sm { min-block-size: calc(var(--control) * 0.84); padding-inline: var(--space-s); }
.btn--wide { inline-size: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.field .btn--line { color: #fff; border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.06); }
.field .btn--line:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; color: #fff; }

.btn .arw { transition: transform 0.25s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }
[dir="rtl"] .btn .arw { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arw { transform: scaleX(-1) translateX(3px); }

/* The onward link: a rule that draws itself under the label on hover. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-block-size: 1.75rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--sig-t);
}
.tlink::after {
  content: "";
  position: absolute;
}
.tlink svg { transition: transform 0.2s var(--ease); }
.tlink:hover { color: var(--ink); }
.tlink:hover svg { transform: translateX(3px); }
[dir="rtl"] .tlink svg { transform: scaleX(-1); }
[dir="rtl"] .tlink:hover svg { transform: scaleX(-1) translateX(3px); }

/* --------------------------------------------------------------------------
   7. The field
   --------------------------------------------------------------------------
   The dark ground that the hero, page heads and the call to action sit on.
   Four layers, all decorative, all aria-hidden:

     .field       a stack of blurred radial gradients — the abstract render,
                  drawn in CSS so it costs no bytes and never pixelates
     .lattice     the node network carried over from the previous site
     .grain       an inline SVG turbulence so the gradients never band
     ::after      a scrim that guarantees contrast for the copy

   The scrim is the only thing standing between a drifting gradient and a
   headline nobody can read. Do not remove it without re-running the audit.
   -------------------------------------------------------------------------- */
.field {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--field-bg);
  color: rgba(255, 255, 255, 0.84);
}
.field h1, .field h2, .field h3 { color: #fff; }
.field p { color: rgba(255, 255, 255, 0.82); }
.field .lede { color: rgba(255, 255, 255, 0.88); }
.field .eyebrow, .field .index, .field .crumb { color: rgba(255, 255, 255, 0.62); }
.field a:not(.btn) { color: #cfe6ff; }

/* Layer 1 — the render. Three drifting blooms over a deep base. Each bloom
   moves on a compositor-only transform at a different period, so the field
   never repeats a composition exactly. */
.field-render {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(58% 62% at 78% 12%, var(--field-1) 0%, transparent 62%),
    radial-gradient(52% 58% at 18% 78%, var(--field-2) 0%, transparent 60%),
    radial-gradient(64% 70% at 52% 108%, var(--field-3) 0%, transparent 58%),
    linear-gradient(168deg, #12243b 0%, #0d1b2e 38%, #091425 70%, #060d18 100%);
}
:root[data-theme="dark"] .field-render {
  background:
    radial-gradient(58% 62% at 78% 12%, var(--field-1) 0%, transparent 62%),
    radial-gradient(52% 58% at 18% 78%, var(--field-2) 0%, transparent 60%),
    radial-gradient(64% 70% at 52% 108%, var(--field-3) 0%, transparent 58%),
    linear-gradient(168deg, #0b1524 0%, #08111d 40%, #060c16 72%, #04080f 100%);
}
.field-render::before,
.field-render::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}
.field-render::before {
  inset: -20% -10% 40% 45%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sig) 34%, transparent), transparent 68%);
  animation: drift-a 34s ease-in-out infinite alternate;
}
.field-render::after {
  inset: 45% 55% -25% -12%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sig-2) 26%, transparent), transparent 68%);
  animation: drift-b 46s ease-in-out infinite alternate;
}
@keyframes drift-a {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  to   { transform: translate3d(6%, 5%, 0) scale(1.16); }
}
@keyframes drift-b {
  from { transform: translate3d(3%, 4%, 0) scale(1.08); }
  to   { transform: translate3d(-5%, -4%, 0) scale(0.94); }
}

/* Layer 2 — a hairline engineering grid, so the field has structure behind
   the softness rather than being pure haze. */
.field-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
  mask-image: radial-gradient(75% 75% at 60% 35%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(75% 75% at 60% 35%, #000 20%, transparent 78%);
}

.lattice { position: absolute; inset: 0; z-index: 2; inline-size: 100%; block-size: 100%; pointer-events: none; }

.grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Layer 4 — the scrim. Measured, not guessed: the audit photographs the box
   behind every piece of copy on the field and takes the brightest pixel. */
.field::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(4, 9, 17, 0.42) 0%, rgba(4, 9, 17, 0.18) 34%, rgba(4, 9, 17, 0.08) 62%, rgba(4, 9, 17, 0.4) 100%),
    linear-gradient(to right, rgba(4, 9, 17, 0.58) 0%, rgba(4, 9, 17, 0.3) 38%, rgba(4, 9, 17, 0.04) 66%, rgba(4, 9, 17, 0) 84%);
}
[dir="rtl"] .field::after {
  background:
    linear-gradient(to bottom, rgba(4, 9, 17, 0.42) 0%, rgba(4, 9, 17, 0.18) 34%, rgba(4, 9, 17, 0.08) 62%, rgba(4, 9, 17, 0.4) 100%),
    linear-gradient(to left, rgba(4, 9, 17, 0.58) 0%, rgba(4, 9, 17, 0.3) 38%, rgba(4, 9, 17, 0.04) 66%, rgba(4, 9, 17, 0) 84%);
}
@media (max-width: 62rem) {
  .field::after, [dir="rtl"] .field::after {
    background: linear-gradient(to bottom, rgba(4, 9, 17, 0.6) 0%, rgba(4, 9, 17, 0.38) 40%, rgba(4, 9, 17, 0.24) 70%, rgba(4, 9, 17, 0.44) 100%);
  }
}
.field > .shell, .field-body { position: relative; z-index: 5; }

/* Emphasis. A gradient across an emphasised phrase looks striking until the
   phrase wraps: background-clip paints across the element's whole box, so a
   two-line phrase gets the start of the ramp on one line and the end on the
   next, and reads as two different colours applied by accident. Solid, and
   the same colour every time it appears. */
.em { color: #9fd8ff; }
.field .em { color: #9fd8ff; }
.bay .em, .plate-band .em { color: var(--sig-t); }
:root[data-theme="dark"] .bay .em { color: var(--sig-t); }
.plate-band .em { color: #9fd8ff; }

/* --------------------------------------------------------------------------
   8. Hero and page heads
   -------------------------------------------------------------------------- */
.hero {
  padding-block: calc(var(--nav-h) + var(--space-head)) 0;
  margin-block-start: calc(var(--nav-h) * -1);
}
.pagehead {
  padding-block: calc(var(--nav-h) + var(--space-head)) var(--space-xl);
  margin-block-start: calc(var(--nav-h) * -1);
}

.hero-stage {
  display: grid;
  gap: var(--space-l) var(--space-xl);
  align-items: start;
  padding-block-end: var(--space-xl);
}
@media (min-width: 68rem) { .hero-stage { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.8fr); } }

.hero-copy > * + * { margin-block-start: var(--space-s); }
/* Display type answers to the viewport's height as well as its width: a
   1280×620 laptop window is wide enough to ask for a 100px headline and far
   too short to survive one. min() takes whichever constraint bites. */
.hero h1 {
  max-inline-size: 24ch;
  margin: 0;
  /* The height cap still exists for genuinely short windows; at this size it
     only bites below about 500px of viewport height. */
  font-size: min(var(--step-6), 7.5vh);
  font-size: min(var(--step-6), 7.5svh);
  font-variation-settings: "wdth" 108;
}
.hero .lede { max-inline-size: 52ch; }
.hero-note { max-inline-size: 56ch; font-size: var(--step--1); color: rgba(255, 255, 255, 0.72); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--muted);
  margin: 0 0 var(--space-s);
}
.eyebrow::before {
  content: "";
  inline-size: 1.5rem;
  block-size: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
  margin-block-start: 0.1em;
}
.field .eyebrow { color: rgba(255, 255, 255, 0.66); }

.crumb { color: rgba(255, 255, 255, 0.6); margin-block-end: var(--space-s); }
.crumb a { color: rgba(255, 255, 255, 0.78); }
.crumb a:hover { color: #fff; }

.ticks { display: grid; gap: var(--space-2xs); }
.ticks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs);
  align-items: start;
  font-size: var(--step--1);
}
.ticks svg { color: var(--sig-2-t); margin-block-start: 0.34em; flex: none; }
.field .ticks li { color: rgba(255, 255, 255, 0.84); }
.field .ticks svg { color: #6fe6b0; }

/* --- the control loop instrument ---------------------------------------- */
.hero-figure {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 500 / 440;
  inline-size: min(100%, 32rem, 66vh);
  inline-size: min(100%, 32rem, 66svh);
  min-inline-size: 0;
  margin-inline: auto;
}
@media (max-width: 67.99rem) { .hero-figure { display: none; } }
.hero-figure::before {
  content: "";
  position: absolute;
  inline-size: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92, 178, 255, 0.32) 0%, transparent 70%);
}
.hero-loop { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.hero-loop .ring { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.hero-loop .ring--dash { stroke-dasharray: 3 7; stroke: rgba(255, 255, 255, 0.18); }
.hero-loop .tick { stroke: rgba(255, 255, 255, 0.26); stroke-width: 1.4; stroke-linecap: round; }
.hero-loop .track { stroke: rgba(255, 255, 255, 0.2); stroke-width: 1.2; }
.hero-loop .node { fill: #7cc4ff; }
.hero-loop .node-ring { fill: none; stroke: #7cc4ff; stroke-width: 1.2; opacity: 0.4; }
.hero-loop .label {
  fill: rgba(255, 255, 255, 0.78);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
}
.hero-loop .orbit { transform-origin: 50% 50%; animation: hero-orbit 16s linear infinite; }
.hero-loop .tail {
  fill: none;
  stroke: #6fe6b0;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 58 772;
  opacity: 0.9;
}
.hero-loop .pulse { fill: #6fe6b0; }
@keyframes hero-orbit { to { transform: rotate(360deg); } }
.hero-mark { position: relative; inline-size: 30%; height: auto; filter: drop-shadow(0 0.4rem 2rem rgba(0, 0, 0, 0.6)); }

/* --------------------------------------------------------------------------
   9. Section heads
   -------------------------------------------------------------------------- */
.head { margin-block-end: var(--space-xl); }
.head h2 { max-inline-size: 22ch; margin-block-end: 0; }
.head .lede { margin-block-start: var(--space-s); }
@media (min-width: 68rem) {
  .head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: var(--space-xl); align-items: end; }
  .head--split .eyebrow { grid-column: 1 / -1; }
  .head--split .lede { margin-block-start: 0; padding-block-end: 0.4em; }
}
.index { color: var(--sig-t); }

/* --------------------------------------------------------------------------
   10. Cards, panels, tiles
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-s); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 62rem) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }
@container (max-width: 58rem) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 36rem) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  box-shadow: var(--lit);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: var(--line); box-shadow: var(--shadow-2), var(--lit); }
.card h3 { margin-block-end: var(--space-2xs); }
.card p { font-size: var(--step--1); color: var(--muted); margin-block-end: 0; }
.card .tlink { margin-block-start: auto; padding-block-start: var(--space-s); }
a.card { color: inherit; }
a.card:hover { color: inherit; }
a.card:hover h3 { color: var(--sig-t); }

/* The icon plate. A tinted tile with a hairline, holding a 24px stroke icon.
   Emoji were dropped site-wide: they render differently on every OS and
   cannot inherit a brand colour. */
.plate {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--plate);
  block-size: var(--plate);
  margin-block-end: var(--space-s);
  border-radius: var(--r-1);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--sig) 16%, transparent),
    color-mix(in srgb, var(--sig-2) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--sig) 22%, transparent);
  color: var(--sig-t);
}
.plate .icon { inline-size: 50%; block-size: 50%; }
.icon { inline-size: 1.4em; block-size: 1.4em; }

/* A stat, used in bands and rails. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 48rem) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { padding: var(--space-s) var(--space-m); border-inline-start: 1px solid var(--line-2); }
.stat:first-child { border-inline-start: 0; }
@media (max-width: 48rem) {
  .stat:nth-child(odd) { border-inline-start: 0; }
  .stat:nth-child(n + 3) { border-block-start: 1px solid var(--line-2); }
}
.stat-v {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 112;
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--space-3xs);
}
.stat-k { display: block; color: var(--muted); letter-spacing: 0.08em; }

/* On the field the stat strip becomes a glass plate along the foot. */
.statstrip { border-block-start: 1px solid rgba(255, 255, 255, 0.14); background: rgba(4, 10, 20, 0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.statstrip .stat { border-inline-start-color: rgba(255, 255, 255, 0.12); }
.statstrip .stat-v { color: #fff; }
.statstrip .stat-k { color: rgba(255, 255, 255, 0.66); }
@media (max-width: 48rem) { .statstrip .stat:nth-child(n + 3) { border-block-start-color: rgba(255, 255, 255, 0.12); } }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
.chip {
  padding: 0.4em 0.85em;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   11. The index table
   --------------------------------------------------------------------------
   Twelve industries as twelve identical cards is a list pretending to be a
   layout. As rows it reads as a reference — scannable, dense, and it says
   "we have done this a lot" in a way a card grid never does.
   -------------------------------------------------------------------------- */
.index-table { border-block-start: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: var(--plate) minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: var(--space-s);
  align-items: center;
  padding-block: var(--space-s);
  border-block-end: 1px solid var(--line-2);
  color: var(--ink-2);
  transition: background 0.2s var(--ease), padding 0.2s var(--ease);
}
.row:hover { background: var(--surface); }
a.row:hover { color: var(--ink-2); }
.row .plate { margin: 0; inline-size: 2.5rem; block-size: 2.5rem; }
.row-t { font-family: var(--font-display); font-variation-settings: "wdth" 108; font-size: var(--step-0); font-weight: 600; color: var(--ink); letter-spacing: -0.015em; }
.row-d { font-size: var(--step--1); color: var(--muted); }
.row-go { color: var(--sig-t); opacity: 0; transform: translateX(-6px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
a.row:hover .row-go, a.row:focus-visible .row-go { opacity: 1; transform: none; }
@media (max-width: 62rem) {
  .row { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
  .row-d { grid-column: 2 / -1; }
}
[dir="rtl"] .row-go svg { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   12. Diagrams
   -------------------------------------------------------------------------- */
.figure {
  margin: 0;
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  box-shadow: var(--lit);
}
.figure-cap {
  margin-block-start: var(--space-m);
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--line-2);
  font-size: var(--step--1);
  color: var(--muted);
  max-inline-size: 92ch;
}
.figure-cap strong { color: var(--ink-2); }

.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xs); }
@media (max-width: 62rem) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .flow { grid-template-columns: 1fr; } }
@container (max-width: 58rem) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 30rem) { .flow { grid-template-columns: 1fr; } }
.flow-node { position: relative; padding: var(--space-s); background: var(--ground); border: 1px solid var(--line-2); border-radius: var(--r-1); }
.flow-node .plate { inline-size: 2.25rem; block-size: 2.25rem; margin-block-end: var(--space-xs); }
.flow-s { display: block; color: var(--muted); margin-block-end: var(--space-3xs); }
.flow-node h3 { font-size: var(--step-0); margin-block-end: var(--space-3xs); }
.flow-node p { font-size: var(--step--1); color: var(--muted); }
@container (min-width: 58.01rem) {
  .flow-node + .flow-node::before {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--space-s) + 1.05rem);
    inset-inline-start: calc(var(--space-xs) * -1 - 1px);
    inline-size: var(--space-xs);
    block-size: 1px;
    background: var(--line);
  }
}
.flow-return { margin-block: var(--space-s) 0; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); max-inline-size: none; }

.hub { display: grid; grid-template-columns: minmax(0, 1fr) 1.6rem minmax(0, 1.15fr) 1.6rem minmax(0, 1fr); gap: var(--space-xs); align-items: center; }
.hub-arrow { display: grid; place-items: center; color: var(--muted); }
[dir="rtl"] .hub-arrow svg { transform: scaleX(-1); }
@media (max-width: 58rem) { .hub { grid-template-columns: 1fr; gap: var(--space-s); } .hub-arrow svg, [dir="rtl"] .hub-arrow svg { transform: rotate(90deg); } }
@container (max-width: 54rem) { .hub { grid-template-columns: 1fr; gap: var(--space-s); } .hub-arrow svg, [dir="rtl"] .hub-arrow svg { transform: rotate(90deg); } }
.hub-col h3, .hub-core h3 { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-block-end: var(--space-xs); }
.hub-item { display: flex; align-items: center; gap: var(--space-2xs); min-block-size: var(--control); padding: var(--space-2xs) var(--space-xs); margin-block-end: var(--space-2xs); background: var(--ground); border: 1px solid var(--line-2); border-radius: var(--r-1); font-size: var(--step--1); }
.hub-item:last-child { margin-block-end: 0; }
.hub-item .icon { flex: none; color: var(--sig-t); inline-size: 1.15em; block-size: 1.15em; }
.hub-core { padding: var(--space-s); background: var(--plate-bg); border-radius: var(--r-2); color: rgba(238, 244, 251, 0.84); }
.hub-core h3 { color: rgba(238, 244, 251, 0.56); }
.hub-core li { padding-block: var(--space-2xs); border-block-start: 1px solid rgba(238, 244, 251, 0.14); font-size: var(--step--1); }
.hub-core li:first-child { border-block-start: 0; padding-block-start: 0; }

.layers { display: grid; gap: var(--space-2xs); }
.layer { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 16rem); gap: var(--space-s); align-items: center; padding: var(--space-xs) var(--space-s); background: var(--ground); border: 1px solid var(--line-2); border-radius: var(--r-1); }
@media (max-width: 52rem) { .layer { grid-template-columns: 2.5rem minmax(0, 1fr); } .layer-tags { grid-column: 2; justify-content: flex-start; } }
@container (max-width: 48rem) { .layer { grid-template-columns: 2.5rem minmax(0, 1fr); } .layer-tags { grid-column: 2; justify-content: flex-start; } }
.layer-i { color: var(--sig-t); }
.layer-n { font-family: var(--font-display); font-variation-settings: "wdth" 108; font-weight: 600; color: var(--ink); font-size: var(--step-0); }
.layer-t { font-size: var(--step--1); color: var(--muted); }
.layer-tags { display: flex; flex-wrap: wrap; gap: var(--space-3xs); justify-content: flex-end; }
.layer-tags span { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.05em; padding: 0.25em 0.7em; border: 1px solid var(--line); border-radius: var(--pill); color: var(--muted); }

/* --------------------------------------------------------------------------
   13. The agent console
   --------------------------------------------------------------------------
   The signature component: a scripted trace of an agent run the visitor can
   replay. It is illustrative and says so on screen — the tool names are
   systems we genuinely integrate, the data is not live. The body is a live
   region, so a screen reader hears each line as it lands.
   -------------------------------------------------------------------------- */
.console {
  background: var(--plate-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  color: rgba(238, 244, 251, 0.82);
}
.console-bar { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-s); min-block-size: var(--control); background: rgba(255, 255, 255, 0.03); border-block-end: 1px solid rgba(255, 255, 255, 0.08); }
.console-dots { display: flex; gap: 5px; flex: none; }
.console-dots i { display: block; inline-size: 9px; block-size: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.console-title { color: rgba(238, 244, 251, 0.62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-state { display: inline-flex; align-items: center; gap: var(--space-3xs); margin-inline-start: auto; flex: none; color: rgba(238, 244, 251, 0.66); }
.console-state i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.console.is-running .console-state i { background: #43e39b; box-shadow: 0 0 10px #43e39b; }
.console.is-done .console-state i { background: #5cb2ff; box-shadow: 0 0 10px #5cb2ff; }
.console-scenarios { display: flex; flex-wrap: wrap; gap: var(--space-3xs); padding: var(--space-2xs) var(--space-s); border-block-end: 1px solid rgba(255, 255, 255, 0.08); }
.scenario { min-block-size: calc(var(--control) * 0.78); padding-inline: var(--space-s); background: transparent; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--pill); color: rgba(238, 244, 251, 0.6); font-family: var(--font-mono); cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); }
.scenario:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.scenario[aria-pressed="true"] { color: #fff; background: var(--sig-strong); border-color: var(--sig-strong); }
.console-body { min-block-size: 17rem; max-block-size: 30rem; overflow-y: auto; padding: var(--space-s); font-family: var(--font-mono); font-size: var(--step--2); line-height: 1.75; letter-spacing: 0; text-transform: none; }
.console-line { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: var(--space-2xs); padding-block: 0.24em; overflow-wrap: anywhere; }
.console-line b { color: #fff; font-weight: 600; }
.console-k { padding-block-start: 0.2em; color: rgba(238, 244, 251, 0.4); }
.console-line.k-plan  .console-k { color: #7cc4ff; }
.console-line.k-tool  .console-k { color: #6fe6b0; }
.console-line.k-guard .console-k { color: #e9a13b; }
.console-line.k-human .console-k { color: #ff9a6b; }
.console-line.k-done  .console-k { color: #a9dcff; }
.console-line.k-tool  span:last-child { color: #cfe9ff; }
.console-line.k-done  span:last-child { color: #fff; font-weight: 600; }
.console-idle { color: rgba(238, 244, 251, 0.66); }
.console-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-s); padding: var(--space-2xs) var(--space-s); background: rgba(255, 255, 255, 0.03); border-block-start: 1px solid rgba(255, 255, 255, 0.08); }
.console-foot .btn--line { color: #fff; border-color: rgba(255, 255, 255, 0.24); }
.console-foot .btn--line:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }
.console-foot .note { margin: 0; flex: 1 1 16rem; font-size: var(--step--1); color: rgba(238, 244, 251, 0.66); max-inline-size: none; }

/* --------------------------------------------------------------------------
   14. Tabs, search, disclosure
   -------------------------------------------------------------------------- */
.tab-scroll { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; margin-block-end: var(--space-m); border-block-end: 1px solid var(--line); }
.tab-scroll::-webkit-scrollbar { display: none; }
.tablist { display: flex; gap: 0.15rem; inline-size: max-content; min-inline-size: 100%; }
.tab { display: inline-flex; align-items: center; gap: var(--space-2xs); flex: none; min-block-size: var(--control); padding-inline: var(--space-s); background: transparent; border: 0; border-block-end: 2px solid transparent; margin-block-end: -1px; color: var(--muted); font-family: var(--font-body); font-size: var(--step--1); font-weight: 500; white-space: nowrap; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.tab .icon { opacity: 0.75; inline-size: 1.15em; block-size: 1.15em; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); font-weight: 600; border-block-end-color: var(--sig); }
.tab[aria-selected="true"] .icon { color: var(--sig-t); opacity: 1; }
.tabpanel:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.panel-head { max-inline-size: 62ch; margin-block-end: var(--space-m); }
.panel-head h3 { font-size: var(--step-3); margin-block-end: var(--space-2xs); }
.panel-head p { font-size: var(--step--1); color: var(--muted); }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-m); margin-block-end: var(--space-m); }
.search { position: relative; flex: 1 1 22rem; max-inline-size: 32rem; }
.search svg { position: absolute; inset-inline-start: var(--space-s); inset-block-start: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input { inline-size: 100%; min-block-size: var(--control); padding-block: var(--space-2xs); padding-inline: calc(var(--space-s) * 2.4) var(--space-s); background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); color: var(--ink); font-family: var(--font-body); font-size: var(--step--1); }
.search input:focus { outline: none; border-color: var(--sig); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig) 20%, transparent); }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.count { color: var(--muted); }
.empty { padding-block: var(--space-l); color: var(--muted); }
.is-filtered { display: none !important; }

.faq { display: grid; gap: var(--space-2xs); }
.faq details { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-1); box-shadow: var(--lit); transition: border-color 0.25s var(--ease); }
.faq details[open] { border-color: var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); min-block-size: var(--control); padding: var(--space-xs) var(--space-s); cursor: pointer; list-style: none; font-family: var(--font-display); font-variation-settings: "wdth" 108; font-size: var(--step-0); font-weight: 600; color: var(--ink); letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; inline-size: 0.7em; block-size: 0.7em; border-inline-end: 2px solid var(--sig-t); border-block-end: 2px solid var(--sig-t); transform: rotate(45deg) translate(-0.15em, -0.15em); transition: transform 0.25s var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg) translate(-0.15em, -0.15em); }
.faq .answer { padding: 0 var(--space-s) var(--space-s); max-inline-size: 72ch; font-size: var(--step--1); color: var(--muted); }

/* --------------------------------------------------------------------------
   15. Marquee, steps, rails
   -------------------------------------------------------------------------- */
.marquee { overflow: hidden; padding-block: var(--space-xs); border-block: 1px solid var(--line-2); background: var(--surface); }
.marquee-track { display: flex; gap: var(--space-l); inline-size: max-content; animation: marquee 52s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }
.marquee span { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-s); }
.marquee span::before { content: ""; inline-size: 4px; block-size: 4px; background: var(--sig); transform: rotate(45deg); flex: none; }

/* Numbered steps, as a rail with a spine. */
.steps { display: grid; gap: 0; counter-reset: step; }
.step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-s) var(--space-m); padding-block: var(--space-m); border-block-start: 1px solid var(--line-2); }
.step:first-child { border-block-start: 0; padding-block-start: 0; }
.step-n { grid-row: span 2; display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; border: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--step--2); color: var(--sig-t); background: var(--surface); }
.step h3 { margin-block-end: var(--space-3xs); }
.step p { font-size: var(--step--1); color: var(--muted); max-inline-size: 72ch; }
@media (min-width: 62rem) { .step { grid-template-columns: auto minmax(0, 22ch) minmax(0, 1fr); align-items: baseline; } .step-n { grid-row: 1; } .step p { grid-column: 3; } }

.rail { display: grid; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-2); overflow: hidden; box-shadow: var(--lit); }
.rail li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-s); padding: var(--space-xs) var(--space-s); border-block-start: 1px solid var(--line-2); font-size: var(--step--1); }
.rail li:first-child { border-block-start: 0; }
@media (max-width: 34rem) { .rail li { grid-template-columns: 1fr; gap: var(--space-3xs); } }
.rail .k { color: var(--muted); padding-block-start: 0.2em; }
.rail li a { display: inline-flex; align-items: center; min-block-size: 1.75rem; }

/* The call-to-action band: the dark plate with the field behind it. */
.plate-band { position: relative; isolation: isolate; overflow: hidden; background: var(--plate-bg); color: rgba(238, 244, 251, 0.78); padding-block: var(--space-2xl); }
.plate-band h2 { color: #fff; max-inline-size: 20ch; }
.plate-band p { color: rgba(238, 244, 251, 0.72); max-inline-size: 56ch; }
.plate-band .eyebrow { color: rgba(238, 244, 251, 0.5); }
.plate-band .shell { position: relative; z-index: 5; }
.plate-band .btn--line { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.plate-band .btn--line:hover { background: #fff; color: var(--plate-bg); border-color: #fff; }

/* --------------------------------------------------------------------------
   16. Prose and legal
   -------------------------------------------------------------------------- */
.prose { max-inline-size: 68ch; }
.prose h2 { font-size: var(--step-2); margin-block: var(--space-l) var(--space-s); padding-block-start: var(--space-m); border-block-start: 1px solid var(--line-2); }
.prose > h2:first-child { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.prose h3 { font-size: var(--step-0); margin-block: var(--space-m) var(--space-2xs); }
.prose p { margin-block-end: 1em; }
.prose ul, .prose ol { margin-block: var(--space-xs) var(--space-s); display: grid; gap: var(--space-2xs); }
.prose ul li { position: relative; padding-inline-start: 1.3em; }
.prose ul li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em; inline-size: 5px; block-size: 5px; background: var(--sig); transform: rotate(45deg); }
.prose ol { counter-reset: p-ol; }
.prose ol li { position: relative; padding-inline-start: 2em; counter-increment: p-ol; }
.prose ol li::before { content: counter(p-ol) "."; position: absolute; inset-inline-start: 0; font-family: var(--font-mono); font-size: var(--step--2); color: var(--sig-t); }
.callout { background: var(--surface); border: 1px solid var(--line-2); border-inline-start: 3px solid var(--sig); border-radius: 0 var(--r-2) var(--r-2) 0; padding: var(--space-m); margin-block-end: var(--space-l); box-shadow: var(--lit); }
.callout h2 { margin: 0 0 var(--space-2xs); padding: 0; border: 0; font-size: var(--step-1); }
.toc { display: grid; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-2); overflow: hidden; margin-block-end: var(--space-l); box-shadow: var(--lit); }
.toc li { border-block-start: 1px solid var(--line-2); }
.toc li:first-child { border-block-start: 0; }
.toc a { display: flex; align-items: center; gap: var(--space-s); min-block-size: var(--control); padding: var(--space-2xs) var(--space-s); color: var(--ink-2); font-size: var(--step--1); }
.toc a:hover { color: var(--sig-t); background: var(--ground); }
.toc .n { color: var(--muted); flex: none; }
.stamp { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-block-end: var(--space-l); padding-block-end: var(--space-s); border-block-end: 1px solid var(--line-2); }

.partner { display: grid; justify-items: center; gap: var(--space-s); padding: var(--space-l); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-2); box-shadow: var(--lit); }
.partner img { inline-size: min(100%, 28rem); height: auto; background: #fff; padding: var(--space-xs); border-radius: var(--r-1); }

.channels { display: grid; gap: var(--space-xs); }
.channel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-s); padding: var(--space-m); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-2); box-shadow: var(--lit); }
.channel .plate { margin: 0; grid-row: span 2; }
.channel h3, .channel p, .channel address { grid-column: 2; }
.channel h3 { margin-block-end: var(--space-3xs); }
.channel p, .channel address { font-size: var(--step--1); font-style: normal; color: var(--muted); }
.channel p + p { margin-block-start: var(--space-2xs); }

/* --------------------------------------------------------------------------
   17. Motion, RTL, print
   -------------------------------------------------------------------------- */
.js [data-rise] { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: var(--rise-d, 0ms); }
.js [data-rise].is-up { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js [data-rise] { opacity: 1; transform: none; }
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; }
[dir="rtl"] .eyebrow, [dir="rtl"] .index, [dir="rtl"] .chip, [dir="rtl"] .k,
[dir="rtl"] .cap, [dir="rtl"] .stat-k, [dir="rtl"] .subnav a { letter-spacing: 0; }

@media print {
  .masthead, .subnav, .progress, .marquee, .console, .plate-band, .hero-figure,
  .skip-link, .lattice, .grain, .field-render, .field-grid { display: none !important; }
  .field, .field::after { background: none !important; }
  .field, .field h1, .field h2, .field p, .field .lede, .field .eyebrow, .field .crumb { color: #000 !important; }
  .colophon { background: none !important; color: #000 !important; padding-block: 1rem; }
  .colophon li a, .colophon-base, .colophon h2, .colophon-mark b { color: #000 !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
  .js [data-rise] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   18. Editorial blocks
   --------------------------------------------------------------------------
   Sections that are not card grids. A page made only of card grids is a list
   pretending to be an argument; these give the long pages a change of shape.
   -------------------------------------------------------------------------- */

/* A statement band: one large sentence carrying the positioning, with the
   supporting points as ruled columns rather than boxes. */
.statement {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108;
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-inline-size: 26ch;
  text-wrap: balance;
  margin: 0;
}
@media (min-width: 68rem) {
  .statement-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
}

.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l); }
@media (max-width: 62rem) { .points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .points { grid-template-columns: 1fr; } }
@container (max-width: 54rem) { .points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 32rem) { .points { grid-template-columns: 1fr; } }

.point { padding-block-start: var(--space-s); border-block-start: 2px solid var(--ink); }
.point .index { display: block; color: var(--sig-t); margin-block-end: var(--space-2xs); }
.point h3 { font-size: var(--step-0); margin-block-end: var(--space-3xs); }
.point p { font-size: var(--step--1); color: var(--muted); margin: 0; }

/* A pull statement inside the dark plate band. */
.plate-band .statement { color: #fff; }

/* --------------------------------------------------------------------------
   19. The narrowest phones
   --------------------------------------------------------------------------
   At 320px the wordmark plus two 42px controls measured 302px inside a 284px
   shell, and the document went 2px wide. The bar gives up size before it
   gives up either element.
   -------------------------------------------------------------------------- */
@media (max-width: 26rem) {
  :root { --control: 2.5rem; }
  .masthead-inner { gap: var(--space-2xs); }
  .wordmark { font-size: var(--step-0); gap: var(--space-3xs); }
  .wordmark img { inline-size: 1.7rem; }
  .masthead-tools { gap: var(--space-3xs); }
  .eyebrow::before { display: none; }
}