/* companyregistryapi.com stylesheet.
   Dark grayscale palette with one green accent, every colour in OKLCH.
   No rounded corners, instant hover states, links underlined with a bottom
   border. Subtle CSS-only motion is limited to artworks and the identifier
   number arrow, and disabled under prefers-reduced-motion. */

:root {
  --color-bg: oklch(0.13 0 0);
  --color-bg-elevated: oklch(0.155 0 0);
  --color-surface: oklch(0.18 0 0);
  --color-surface-strong: oklch(0.22 0 0);
  --color-line: oklch(0.26 0 0);
  --color-line-strong: oklch(0.36 0 0);
  --color-fg: oklch(0.96 0 0);
  --color-fg-muted: oklch(0.72 0 0);
  --color-fg-faint: oklch(0.56 0 0);
  /* The brand palette: Phthalo green (#123524 in sRGB), used for fills;
     Deep moss green oklch(0.4484 0.0647 161), Wintergreen dream
     oklch(0.5969 0.0607 163.2) and Jet stream oklch(0.8672 0.0582 163.9)
     are its lighter tones. The darker steps keep Phthalo green's hue and
     its chroma-to-lightness ratio; strong is the app icon's bottom stop. */
  --color-brand: oklch(0.2976 0.0514 159.7);
  --color-brand-strong: oklch(0.235 0.041 159.7);
  /* Lighter brand steps for text and lines on the dark background: Jet
     stream, which the app icon's dark appearance draws its C in, and Deep
     moss green. */
  --color-brand-bright: oklch(0.8672 0.0582 163.9);
  --color-brand-glow: oklch(0.4484 0.0647 161);
  --color-brand-tint: oklch(0.2 0.0345 159.7);
  --color-on-brand: oklch(0.98 0 0);
  --color-danger: oklch(0.74 0.14 25);
  --color-danger-tint: oklch(0.22 0.05 25);
  /* The status dot of an active company. */
  --color-success: oklch(0.78 0.14 150);
  --color-code-bg: oklch(0.1 0 0);

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", "Noto Serif", "Liberation Serif", Georgia, serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas,
    "Liberation Mono", "DejaVu Sans Mono", monospace;

  /* The content container: 90rem with the 2rem gutters below leaves 1376px
     of content, the openai.com width; kausate.com and x.ai use 1280px. */
  --measure: 90rem;
  /* Side padding of the content column; wider from 48rem. */
  --gutter: var(--space-4);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 5rem;
  --space-9: 7rem;
  /* Vertical rhythm, fluid between phone and desktop values (reached at
     about 1440px) after kausate.com, openai.com and x.ai: the padding of a
     section, of the thin coverage strip, the space under a section heading
     and the space between titled blocks on a content page. */
  --space-section: clamp(5rem, 3rem + 3.2vw, 6rem);
  --space-strip: clamp(2rem, 1rem + 2vw, 3rem);
  --space-head: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
  --space-block: clamp(3rem, 2rem + 2.5vw, 4.5rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0;
  transition: none;
}

html {
  color-scheme: dark;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-align: left;
  font-variant-numeric: tabular-nums;
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
figure,
pre {
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.75rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
}

h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 1.6rem + 4.2vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(1.75rem, 1.15rem + 2.2vw, 3.25rem);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.04em;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Long words break rather than widen the page on a narrow screen: the
   brand name is one 22-character word, and so are addresses and URLs.
   break-word changes nothing where a word fits, so wider layouts stay as
   they are; headings break anywhere, so a card sized by its heading (the
   API key tiers) narrows with the screen too. */
body {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  overflow-wrap: anywhere;
}

/* Links: a 1px underline offset by 0.3em that becomes 2px on hover,
   growing downwards from the same top edge. Code inside a link carries
   its own underline instead. The wordmark, buttons and card links are
   excluded; the figure's "and more.." link keeps the default offset. */

a:where(:not(.brand, .button, .plain)) {
  color: var(--color-brand-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

a:where(:not(.brand, .button, .plain)):hover {
  text-decoration-thickness: 2px;
}

a:where(:not(.brand, .button, .plain)):has(code) {
  text-decoration: none;
}

a:focus,
a:active,
a:visited {
  color: var(--color-brand-bright);
}

a code {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

a:hover code {
  text-decoration-thickness: 2px;
}

a.plain {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--color-brand-bright);
  outline-offset: 2px;
}

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

code {
  background: var(--color-surface-strong);
  padding: 0 0.25em;
}

pre {
  background: var(--color-code-bg);
  border: 1px solid var(--color-line);
  padding: var(--space-4);
  overflow-x: auto;
  line-height: 1.45;
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.875rem;
}

table {
  border-collapse: collapse;
  width: 100%;
}

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

th {
  font-weight: 500;
  color: var(--color-fg-muted);
  font-size: 0.875rem;
}

thead th {
  border-bottom: 1px solid var(--color-line-strong);
}

/* Layout */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

@media (min-width: 48rem) {
  :root {
    --gutter: var(--space-6);
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: oklch(0.13 0 0 / 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  min-height: 4.5rem;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

/* The brand is the wordmark alone: one outlined drawing filled with the
   text colour, 16px tall (13px capitals, as 18px text has), so every
   visitor sees the same shapes whatever fonts they have. */
.brand {
  display: inline-block;
  color: var(--color-fg);
  text-decoration: none;
}

.brand svg {
  display: block;
  height: 16px;
  width: auto;
}

.brand:hover,
.brand:visited,
.brand:focus {
  color: var(--color-fg);
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

/* Header links are static: foreground text, no underline, and no change
   on hover or for the current page. The Free API button keeps the brand
   fill in every state. */
.site-nav a,
.site-nav a:hover,
.site-nav a:visited,
.site-nav a[aria-current="page"] {
  color: var(--color-fg);
  text-decoration: none;
}

.site-nav a.button,
.site-nav a.button:hover,
.site-nav a.button:active,
.site-nav a.button:focus,
.site-nav a.button:visited {
  min-height: 2.5rem;
  padding: var(--space-1) var(--space-4);
  color: var(--color-on-brand);
  background: var(--color-brand);
  border-color: var(--color-brand);
  border-bottom-width: 1px;
}

main {
  flex: 1;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--color-line);
  color: var(--color-fg-muted);
  font-size: 0.875rem;
  background: var(--color-bg-elevated);
}

.site-footer .wrap {
  padding-top: var(--space-block);
  padding-bottom: var(--space-6);
  display: grid;
  gap: var(--space-6);
}

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

@media (min-width: 48rem) {
  .footer-columns {
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  }
}

.footer-columns h4 {
  color: var(--color-fg);
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.footer-columns ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

/* Footer links are foreground text without underline or hover change.
   The one exception is the Coragrid attribution in the left-hand
   paragraph: foreground text over a fixed 1px underline of the same
   colour, offset by 0.3em. */
.site-footer a,
.site-footer a:hover,
.site-footer a:visited {
  color: var(--color-fg);
  text-decoration: none;
}

.site-footer p a,
.site-footer p a:hover,
.site-footer p a:visited {
  text-decoration: underline;
  text-decoration-color: var(--color-fg);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* Sections */

.section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.section-tight {
  padding-top: var(--space-strip);
  padding-bottom: var(--space-strip);
}

.section-head {
  display: grid;
  gap: var(--space-3);
  max-width: 44rem;
  margin-bottom: var(--space-head);
}

.stack > * + * {
  margin-top: var(--space-4);
}

.stack-tight > * + * {
  margin-top: var(--space-2);
}

.stack-loose > * + * {
  margin-top: var(--space-block);
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-bright);
}

.lede {
  font-size: 1.125rem;
  color: var(--color-fg-muted);
  max-width: 44rem;
}

.muted {
  color: var(--color-fg-muted);
}

.faint {
  color: var(--color-fg-faint);
}

.small {
  font-size: 0.875rem;
}

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

@media (min-width: 48rem) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

.card {
  border: 1px solid var(--color-line);
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: 28px;
}

.card-index {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-fg-faint);
}

.icon-box {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-line-strong);
  color: var(--color-brand-bright);
  margin-bottom: var(--space-4);
  border-radius: 8px;
}

.icon-box svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Hero */

/* No overflow clipping here: the suggestion panel hangs below the search
   form and must be free to extend past the hero. The glow and halftone
   layers stay inside the section on their own (inset 0, no transforms). */
.hero {
  position: relative;
  border-bottom: 1px solid var(--color-line);
}

.hero-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    oklch(0.5969 0.0607 163.2 / 0.75) 1px,
    transparent 1.8px
  );
  background-size: 12px 12px;
  mask-image: radial-gradient(
      ellipse 75% 70% at 68% 30%,
      oklch(0 0 0) 0%,
      oklch(0 0 0 / 0.6) 35%,
      transparent 72%
    ),
    linear-gradient(to bottom, oklch(0 0 0), transparent 95%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  animation: hero-drift 48s linear infinite;
}

.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 42% 55% at 72% 20%,
      oklch(0.4484 0.0647 161 / 0.35),
      transparent 70%
    ),
    radial-gradient(
      ellipse 50% 40% at 20% 95%,
      oklch(0.2976 0.0514 159.7 / 0.25),
      transparent 70%
    );
  animation: hero-breathe 14s ease-in-out infinite alternate;
}

.hero .wrap {
  position: relative;
  padding-top: clamp(7rem, 5rem + 4vw, 9rem);
  padding-bottom: var(--space-section);
  display: grid;
  gap: var(--space-6);
}

.hero-copy {
  display: grid;
  gap: var(--space-5);
  max-width: 52rem;
}

.hero-copy .lede {
  font-size: 1.25rem;
}

/* Search */

.search-panel {
  max-width: 52rem;
  display: grid;
  gap: var(--space-3);
}

.search-form {
  position: relative;
  z-index: 5;
  display: grid;
  gap: var(--space-2);
  background: oklch(0.13 0 0 / 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--color-line-strong);
  padding: var(--space-2);
}

.field {
  display: grid;
  gap: var(--space-1);
}

.field-label,
.agent-prompt-status,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.input,
.select {
  font: inherit;
  color: var(--color-fg);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  padding: var(--space-2) var(--space-3);
  min-height: 3rem;
  width: 100%;
}

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

.input[type="search"]::-webkit-search-cancel-button,
.input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.search-field {
  position: relative;
}

.search-field .search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(-50%);
  color: var(--color-fg-muted);
  pointer-events: none;
}

.search-field .input {
  padding-left: 2.75rem;
}

/* Outlined-input states: the field darkens on hover with its line
   unchanged; while active it stays dark whether hovered or not and its
   line disappears entirely (the border stays in the layout, transparent,
   so nothing shifts). The darkened field is the focus indication. */
.search-field .input:hover,
.search-field .input:focus,
.search-field .input:focus-visible {
  background: var(--color-bg);
}

.search-field .input:focus,
.search-field .input:focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.button {
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
  padding: var(--space-2) var(--space-5);
  min-height: 3rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.button:hover,
.button:active {
  background: var(--color-brand-strong);
  border-color: var(--color-brand-strong);
  color: var(--color-on-brand);
}

.button:visited,
.button:focus {
  color: var(--color-on-brand);
}

.button-secondary {
  background: transparent;
  color: var(--color-fg);
  border-color: var(--color-line-strong);
}

.button-secondary:hover,
.button-secondary:active {
  background: var(--color-surface-strong);
  border-color: var(--color-line-strong);
  color: var(--color-fg);
}

.button-secondary:visited,
.button-secondary:focus {
  color: var(--color-fg);
}

.button-light {
  background: var(--color-fg);
  border-color: var(--color-fg);
  color: var(--color-bg);
}

.button-light:hover,
.button-light:active,
.button-light:visited,
.button-light:focus {
  background: oklch(0.88 0 0);
  border-color: oklch(0.88 0 0);
  color: var(--color-bg);
}

.search-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: 0.875rem;
  color: var(--color-fg-muted);
}

.powered-by {
  font-size: 0.875rem;
  color: var(--color-fg-muted);
}

.powered-by strong {
  color: var(--color-fg);
  font-weight: 500;
}

/* The attribution link is underlined in its text's foreground colour and
   keeps the 1px underline on hover. */
.powered-by a,
.powered-by a:hover {
  text-decoration-color: var(--color-fg);
  text-decoration-thickness: 1px;
}

/* Suggestion panel: a floating sheet aligned with the form's outer edges
   that opens while the visitor types. Square like the field it belongs to.
   When Turnstile is configured the check sits in the panel first; the
   candidate list fills in after it passes. */
.search-suggest {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: -1px;
  right: -1px;
  z-index: 10;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line-strong);
  box-shadow:
    0 2px 8px oklch(0 0 0 / 0.4),
    0 24px 48px oklch(0 0 0 / 0.5);
}

.search-suggest[hidden] {
  display: none;
}

.search-suggest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  max-height: 24rem;
  overflow-y: auto;
}

.search-suggest-list:empty {
  display: none;
}

.search-suggest-list a {
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
}

.search-suggest-list a:hover,
.search-suggest-list li.is-active a {
  background: var(--color-surface-strong);
}

/* A candidate: the name with the headquarters flag at the right edge, then
   the identifier behind its registration flag and the status chip. */
.suggest-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.suggest-name {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.suggest-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--space-3);
  font-size: 0.875rem;
  color: var(--color-fg-muted);
}

.suggest-id {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.suggest-flag {
  font-size: 1rem;
  line-height: 1;
}

/* Pill chip: a status label in a fully rounded hairline outline on the
   surface grey with a dot in front, after Cloudflare's badge. Static, with
   no hover or highlight state, so it reads the same inside a highlighted
   row. Grey for any status; pill-chip-active turns the dot green and the
   text white. */
.pill-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: 9999px;
  background: var(--color-surface);
  color: var(--color-fg-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  white-space: nowrap;
}

.pill-chip::before {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--color-fg-faint);
}

.pill-chip-active {
  color: var(--color-fg);
}

.pill-chip-active::before {
  background: var(--color-success);
}

.search-suggest-footer {
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-1);
  border-top: 1px solid var(--color-line);
  font-size: 0.8125rem;
  color: var(--color-fg-faint);
}

.search-suggest-footer:empty {
  display: none;
}

.search-suggest-list:empty + .search-suggest-footer {
  border-top: 0;
  padding-top: var(--space-1);
}

.search-gate {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-3);
}

.search-gate[hidden] {
  display: none;
}

.search-gate-text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-fg-muted);
}

.turnstile {
  min-height: 65px;
}

/* Agent setup prompt: an outlined split button under the search bar,
   square like the field above it. The main half copies the prompt under
   the copy cursor and shows a check for a moment; its hint is a plain
   title, so the browser draws that tooltip. The chevron is a <details>
   disclosure with deep links that pre-fill the prompt in an agent. The
   agent marks are the one exception to the palette: images in their own
   brand colours. */
.agent-prompt {
  position: relative;
  z-index: 4;
  justify-self: start;
  display: flex;
  max-width: 100%;
}

.agent-prompt-copy,
.agent-prompt-toggle {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-fg);
  background: oklch(0.13 0 0 / 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--color-line-strong);
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

.agent-prompt-copy {
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  text-align: left;
  cursor: copy;
}

.agent-prompt-toggle {
  justify-content: center;
  width: 2.75rem;
  height: 100%;
  border-left: 0;
  list-style: none;
  color: var(--color-fg-muted);
  cursor: pointer;
}

.agent-prompt-toggle::-webkit-details-marker {
  display: none;
}

.agent-prompt-copy:hover,
.agent-prompt-toggle:hover,
.agent-prompt-more[open] .agent-prompt-toggle {
  background: var(--color-surface-strong);
}

.agent-prompt-more[open] .agent-prompt-chevron {
  transform: rotate(180deg);
}

.agent-prompt-icon {
  display: flex;
  color: var(--color-fg-muted);
}

.agent-prompt-icon-check,
.agent-prompt-copy[data-copied] .agent-prompt-icon-copy {
  display: none;
}

.agent-prompt-copy[data-copied] .agent-prompt-icon-check {
  display: block;
  color: var(--color-fg);
}

.agent-prompt-agents {
  display: flex;
  gap: var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-line);
}

.agent-mark {
  display: block;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

.agent-prompt-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 10;
  min-width: 100%;
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  display: grid;
  gap: 2px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line-strong);
  box-shadow:
    0 2px 8px oklch(0 0 0 / 0.4),
    0 24px 48px oklch(0 0 0 / 0.5);
}

.agent-prompt-menu a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: 0.9375rem;
  color: var(--color-fg);
}

.agent-prompt-menu a:hover {
  background: var(--color-surface-strong);
}

.agent-prompt-menu a svg:last-child {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  color: var(--color-fg-faint);
}

.agent-prompt-menu-footer {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-line);
}

.agent-prompt-menu-footer a {
  color: var(--color-fg-muted);
}

.notice {
  border: 1px solid var(--color-line-strong);
  border-left: 4px solid var(--color-brand-bright);
  background: var(--color-brand-tint);
  padding: var(--space-3) var(--space-4);
}

.notice-danger {
  border-left-color: var(--color-danger);
  background: var(--color-danger-tint);
}

/* The corner of the viewport, after the footer in the document: the cookie
   notice above the chat launcher, so neither covers the other. Only its
   contents take pointer events; the gap between them stays clickable. */
.corner {
  position: fixed;
  z-index: 20;
  inset: auto var(--space-4) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  pointer-events: none;
}

.corner > * {
  pointer-events: auto;
}

@media (min-width: 48rem) {
  .corner {
    left: auto;
    right: var(--space-5);
    bottom: var(--space-5);
  }
}

/* Cookie notice: a small card in the corner. It never blocks the page: no
   overlay, nothing behind it is disabled, and the plain form works
   without script. A floating card with the cards' G2 corners scaled to
   its size. */
.consent {
  width: 100%;
  border: 1px solid var(--color-line-strong);
  background: var(--color-bg-elevated);
  padding: var(--space-5);
  border-radius: 20px;
  box-shadow: 0 16px 48px oklch(0 0 0 / 0.5);
  font-size: 0.9375rem;
}

.consent[hidden] {
  display: none;
}

/* While the notice is shown the document ends with room for it, so the
   last footer rows can be scrolled out from under it. */
body:has(.consent:not([hidden])) {
  padding-bottom: 14rem;
}

body:has(.consent:not([hidden])):has(.chat) {
  padding-bottom: 18.25rem;
}

/* An open search suggestion panel or agent prompt menu is what the
   visitor is using at that moment, so it paints above the notice; closed,
   the notice stays on top of the hero. */
.search-form:has(.search-suggest:not([hidden])),
.agent-prompt:has(details[open]) {
  z-index: 25;
}

@supports (corner-shape: squircle) {
  .consent {
    border-radius: 28px;
    corner-shape: squircle;
  }
}

@media (min-width: 48rem) {
  .consent {
    width: min(26rem, calc(100vw - 2 * var(--space-5)));
  }
}

.consent-form,
.consent-controls {
  display: grid;
  gap: var(--space-4);
}

.consent-controls {
  max-width: 28rem;
}

.consent-text {
  color: var(--color-fg-muted);
}

/* The text is muted throughout; only the details link is white, with a
   matching underline that keeps the same look in every state. */
.consent-text a,
.consent-text a:hover,
.consent-text a:focus,
.consent-text a:active,
.consent-text a:visited {
  color: var(--color-fg);
}

.consent-text a,
.consent-text a:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.consent-actions .button {
  flex: 1 1 9rem;
  min-height: 2.5rem;
  padding: var(--space-1) var(--space-4);
  font-size: 0.9375rem;
}

.consent-status {
  color: var(--color-danger);
  font-size: 0.875rem;
}

.consent-status:empty {
  display: none;
}

/* Small phones: tighter padding and the two buttons side by side, so the
   notice takes as little of the short viewport as it can. */
@media (max-width: 30rem) {
  .consent {
    padding: var(--space-4);
    font-size: 0.875rem;
  }

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

  .consent-actions .button {
    flex-basis: 7rem;
    padding: var(--space-1);
    font-size: 0.875rem;
    white-space: nowrap;
  }
}

@media print {
  .consent,
  .chat {
    display: none;
  }
}

/* Support chat. The launcher is the app icon's G2 squircle, drawn as an SVG
   path so every browser shows the same continuous curve, monochrome like
   the light button, with a chat bubble; open, it shows a chevron instead. The panel is a
   native popover: the top layer puts it above everything without a
   z-index, and it opens and closes without script. It is a card with the
   cookie notice's G2 corners; its controls stay square like the rest of
   the site. No motion: hovers are instant and nothing animates. */
.chat-launcher {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: none;
  color: var(--color-bg);
  cursor: pointer;
  filter: drop-shadow(0 8px 20px oklch(0 0 0 / 0.45));
}

.chat-launcher > svg {
  grid-area: 1 / 1;
}

.chat-launcher-shape {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--color-fg);
}

.chat-launcher:hover .chat-launcher-shape,
.chat-launcher:active .chat-launcher-shape {
  fill: oklch(0.88 0 0);
}

.chat-launcher-icon {
  width: 1.625rem;
  height: 1.625rem;
  fill: currentColor;
}

.chat-launcher-close {
  display: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat:has(.chat-panel:popover-open) .chat-launcher-open {
  display: none;
}

.chat:has(.chat-panel:popover-open) .chat-launcher-close {
  display: block;
}

.chat-launcher:focus-visible {
  outline-offset: 3px;
}

/* An answer arrived while the panel was closed. */
.chat-unread {
  position: absolute;
  top: -0.125rem;
  right: -0.125rem;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--color-bg);
  border-radius: 50%;
  background: var(--color-brand-bright);
}

/* Phones: the width of the screen less the gutters, from just above the
   launcher up to near the top. */
.chat-panel {
  inset: auto var(--space-4) calc(var(--space-4) + 3.5rem + var(--space-3))
    var(--space-4);
  width: auto;
  max-height: calc(100dvh - 3.5rem - var(--space-3) - 2 * var(--space-4) - var(--space-3));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-radius: 20px;
  background: var(--color-bg-elevated);
  color: var(--color-fg);
  box-shadow: 0 16px 48px oklch(0 0 0 / 0.5);
  pointer-events: auto;
}

/* Only while open: a display rule on the panel itself would override the
   browser's hiding of a closed popover. */
.chat-panel:popover-open {
  display: flex;
  flex-direction: column;
}

@supports (corner-shape: squircle) {
  .chat-launcher {
    corner-shape: squircle;
    border-radius: 20px;
  }

  .chat-panel {
    border-radius: 28px;
    corner-shape: squircle;
  }

  .chat-bubble {
    border-radius: 20px;
    corner-shape: squircle;
  }
}

@media (min-width: 48rem) {
  .chat-panel {
    left: auto;
    right: var(--space-5);
    bottom: calc(var(--space-5) + 3.5rem + var(--space-3));
    width: 24rem;
    max-height: min(42rem, calc(100dvh - 3.5rem - var(--space-3) - 2 * var(--space-5) - var(--space-3)));
  }
}

/* Phones and short screens: a card would leave the thread a sliver once
   the message box is in, so the panel covers the screen, as chat on a
   phone usually does. The header's cross closes it. */
@media (max-width: 30rem), (max-height: 30rem) {
  /* The browser sizes a popover to its content; auto stretches it
     between the insets. */
  .chat-panel {
    inset: 0;
    width: auto;
    height: auto;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

.chat-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3) var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-line);
}

.chat-faces {
  display: flex;
  flex-shrink: 0;
}

.chat-face {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface-strong);
}

/* The team's faces overlap, each ringed in the panel colour. */
.chat-faces .chat-face {
  box-shadow: 0 0 0 2px var(--color-bg-elevated);
}

.chat-faces .chat-face + .chat-face {
  margin-left: -0.625rem;
}

.chat-head-text {
  flex: 1;
  min-width: 0;
}

.chat-title {
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.chat-subtitle {
  font-size: 0.8125rem;
  color: var(--color-fg-muted);
}

.chat-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-fg-muted);
  cursor: pointer;
}

.chat-close:hover {
  color: var(--color-fg);
}

.chat-close svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
}

/* The thread and the message box; the email ask is laid over both, so the
   panel keeps its size and the field sits in the middle. */
.chat-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.chat-log {
  flex: 1 1 auto;
  min-height: 5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  margin: 0;
  padding: var(--space-4);
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.chat-msg {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  max-width: 88%;
}

.chat-msg-team {
  justify-self: start;
}

/* The greeting has no face; it keeps the answers' bubble edge. */
.chat-greeting {
  padding-left: calc(1.75rem + var(--space-2));
}

.chat-msg-visitor {
  justify-self: end;
}

.chat-msg-body {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.chat-msg-name {
  padding-left: var(--space-3);
  font-size: 0.75rem;
  color: var(--color-fg-muted);
}

.chat-face-small {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.chat-bubble {
  padding: var(--space-2) var(--space-3);
  border-radius: 14px;
  background: var(--color-surface-strong);
  font-size: 0.9375rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-msg-visitor .chat-bubble {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.chat-form {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-line);
}

/* 1rem text keeps phones from zooming in on focus. The fields darken on
   hover and focus like the search field, which is the focus indication.
   The message box starts at one line and grows with its text where the
   engine sizes fields to content, up to about five lines. */
.chat-input,
.chat-email {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  font: inherit;
  font-size: 1rem;
  color: var(--color-fg);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  padding: var(--space-2) var(--space-3);
}

.chat-input {
  flex: 1;
  field-sizing: content;
  max-height: 9rem;
  line-height: 1.45;
  resize: none;
}

.chat-input::placeholder,
.chat-email::placeholder {
  color: var(--color-fg-faint);
}

.chat-input:hover,
.chat-input:focus,
.chat-email:hover,
.chat-email:focus {
  background: var(--color-bg);
}

.chat-input:focus,
.chat-email:focus {
  outline: none;
  border-color: transparent;
}

.chat-form-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.chat-status {
  font-size: 0.8125rem;
  color: var(--color-fg-muted);
}

.chat-status:empty {
  display: none;
}

.chat-status.is-error {
  color: var(--color-danger);
}

.chat-send {
  flex-shrink: 0;
  min-height: 2.75rem;
  padding: var(--space-1) var(--space-4);
  font-size: 0.9375rem;
}

.chat-send:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* The ask on closing: shown by the script only. */
.chat-email-form {
  position: absolute;
  inset: 0;
  display: none;
  align-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  overflow-y: auto;
  background: var(--color-bg-elevated);
}

.chat-panel.is-asking .chat-body {
  min-height: 17rem;
}

.chat-panel.is-asking .chat-email-form {
  display: grid;
}

.chat-panel.is-asking :is(.chat-log, .chat-form) {
  visibility: hidden;
}

.chat-email-lead {
  font-weight: 500;
}

/* The address field with its send arrow inside the same box, which takes
   the field's hover and focus darkening. */
.chat-email-field {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}

.chat-email-field:hover,
.chat-email-field:focus-within {
  background: var(--color-bg);
}

.chat-email-field .chat-email,
.chat-email-field .chat-email:hover,
.chat-email-field .chat-email:focus {
  flex: 1;
  border: 0;
  background: transparent;
}

.chat-email-submit {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 0.25rem;
  padding: 0;
  border: 0;
  background: var(--color-fg);
  color: var(--color-bg);
  cursor: pointer;
}

.chat-email-submit:hover {
  background: oklch(0.88 0 0);
}

.chat-email-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.chat-email-submit svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-email-note {
  font-size: 0.8125rem;
  color: var(--color-fg-muted);
}

.chat-email-form.is-done :is(.chat-email-field, .chat-email-note) {
  display: none;
}

/* Without popovers the launcher could not open anything. */
@supports not selector(:popover-open) {
  .chat {
    display: none;
  }
}

/* Country marquee. The strip sits outside the content column and runs from
   one viewport edge to the other, so the list reads as continuing past the
   page. The track is max-content wide, so the pace does not depend on the
   strip's width. The word "Coverage" sits in a gap of the hero's bottom
   rule, which the strip's section draws in its place. */

.hero:has(+ .coverage) {
  border-bottom: 0;
}

.coverage {
  padding-top: 0;
}

.coverage-rule {
  display: flex;
  align-items: center;
  height: 1.5rem;
  margin: -0.75rem 0 calc(var(--space-strip) - 0.75rem);
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-fg-faint);
}

.coverage-rule::before,
.coverage-rule::after {
  content: "";
  height: 1px;
  background: var(--color-line);
}

.coverage-rule::after {
  flex: 1;
}

.coverage-rule span {
  padding: 0 var(--space-3) 0 var(--gutter);
  white-space: nowrap;
}

/* From the tablet gutter the rule also runs left of the word, up to the
   column's edge, and the word keeps the column's text edge. */
@media (min-width: 48rem) {
  .coverage-rule::before {
    flex: none;
    width: calc((100% - min(100%, var(--measure))) / 2 + var(--gutter) - var(--space-3));
  }

  .coverage-rule span {
    padding-left: var(--space-3);
  }
}

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent,
    oklch(0 0 0) 8%,
    oklch(0 0 0) 92%,
    transparent
  );
}

/* The duration is overridden per deployment by /assets/site.css so the
   pace stays constant however many countries are listed. */
.marquee-track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  animation: marquee 50s linear infinite;
}

.marquee-item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  white-space: nowrap;
  color: var(--color-fg-muted);
  font-size: 0.9375rem;
}

.marquee-item .flag {
  font-size: 1.25rem;
  line-height: 1;
}

.marquee-static {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

/* Flow figure: an SVG in the kausate layout. Fills and strokes live here
   so the markup needs no inline styles. */

.flow-figure {
  max-width: 76rem;
  margin: 0 auto;
}

.flow-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.fs-panel-bg {
  fill: var(--color-bg-elevated);
}

.fs-panel {
  fill: var(--color-surface);
  stroke: var(--color-line-strong);
}

.fs-chip {
  fill: var(--color-surface);
  stroke: var(--color-line-strong);
}

.fs-cell {
  fill: none;
  stroke: var(--color-line);
}

.fs-rule {
  stroke: var(--color-line);
}

.fs-dot {
  fill: var(--color-line-strong);
}

.fs-icon {
  fill: var(--color-fg);
}

.fs-fill-soft {
  fill: var(--color-line-strong);
  opacity: 0.8;
}

.fs-tree line {
  stroke: var(--color-line-strong);
  stroke-width: 1.5;
  opacity: 0.8;
}

.fs-tree circle {
  fill: var(--color-line-strong);
  opacity: 0.8;
}

.fs-chip-label,
.fs-caption,
.fs-panel-title,
.fs-cell-label {
  font-family: var(--font-sans);
  fill: var(--color-fg);
}

.fs-chip-label {
  font-size: 16px;
}

.fs-caption {
  font-size: 10px;
  fill: var(--color-fg-muted);
}

/* "and more.." reads like the rest of the caption, underlined at the
   browser's default position, with no hover change. */
.fs-caption-more {
  fill: var(--color-fg-muted);
  font-weight: 400;
  text-decoration: underline;
}

.fs-panel-title {
  font-size: 14px;
  font-weight: 500;
}

.fs-cell-label {
  font-size: 10px;
}

.fs-curve {
  stroke: url(#fs-grad-curve);
  stroke-dasharray: 6 6;
  fill: none;
}

.fs-line {
  stroke: url(#fs-grad-right);
  stroke-width: 2;
  fill: none;
}

.fs-stop-near {
  stop-color: var(--color-line-strong);
}

.fs-stop-far {
  stop-color: var(--color-line);
  stop-opacity: 0.4;
}

/* Balls travel their path from the left panel into the app icon (and from
   the icon to the product) during the first third of a cycle, then rest, so a
   pulse appears every now and then. Paths, keyframes and timings come from
   /assets/site.css so every segment moves at the same pace; each path is
   drawn centre-to-left, so the distance runs from 100% down to 0%. */
.fs-ball {
  fill: var(--color-brand);
  opacity: 0;
  offset-rotate: 0deg;
  offset-distance: 100%;
}

/* Bento */

.bento {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bento .span-2 {
    grid-column: span 2;
  }

  .bento .span-3 {
    grid-column: span 3;
  }
}

/* Rounded HTML components follow the flow figure's G2 corners where the
   engine can draw them. Baseline: an ordinary radius for every browser.
   Enhancement: corner-shape in engines that support it (Chromium 139+;
   Firefox and Safari stable do not yet), with a larger radius so the
   squircle's footprint matches the figure's corner budget. */
.bento-card {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  position: relative;
  border-radius: 28px;
}

@supports (corner-shape: squircle) {
  .bento-card {
    border-radius: 40px;
    corner-shape: squircle;
  }
}

.bento-head {
  padding: var(--space-5);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: flex-start;
}

.bento-head p {
  color: var(--color-fg-muted);
  margin-top: var(--space-1);
}

.bento-link {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-line-strong);
  color: var(--color-fg-muted);
}

.bento-link:hover {
  color: var(--color-fg);
  border-color: var(--color-fg);
}

.bento-link svg {
  width: 0.875rem;
  height: 0.875rem;
}

.bento-art {
  position: relative;
  min-height: 16rem;
  padding: 0 var(--space-5) var(--space-5);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* The API window is taller than the card's art area: it hangs from the
   top and the card's curved edge cuts it off, like a real scrollback. */
.bento-art:has(.art-window) {
  min-height: 16rem;
  max-height: 19rem;
  padding-bottom: 0;
  align-items: flex-start;
}

.bento-art.center {
  align-items: center;
}

/* Artwork: search mock */

.art-search {
  width: 100%;
  max-width: 34rem;
  border: 1px solid var(--color-line-strong);
  background: var(--color-bg);
  font-size: 0.8125rem;
}

.art-search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-fg);
}

.art-search-bar svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-fg-faint);
}

.art-cursor {
  display: inline-block;
  width: 1px;
  height: 1em;
  background: var(--color-fg);
  vertical-align: text-bottom;
  animation: cursor-blink 1s step-end infinite;
}

.art-rows {
  display: grid;
}

.art-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-fg-muted);
}

.art-row:last-child {
  border-bottom: none;
}

.art-row strong {
  color: var(--color-fg);
  font-weight: 500;
}

.art-row .art-id {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-fg-faint);
}

.art-check {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  color: var(--color-brand-bright);
}

/* Artwork: fact list */

.art-facts {
  width: 100%;
  display: grid;
  gap: var(--space-2);
  font-size: 0.8125rem;
}

.art-fact {
  display: grid;
  gap: 2px;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  padding: var(--space-2) var(--space-3);
}

.art-fact span {
  color: var(--color-fg-faint);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.art-fact strong {
  font-weight: 500;
  color: var(--color-fg);
  display: inline-block;
}

.art-fact strong.reveal {
  animation: value-reveal 900ms ease-out both;
}

/* Artwork: officers graph */

.art-graph {
  width: 100%;
  height: 15rem;
}

.art-graph line {
  stroke: var(--color-line-strong);
  stroke-width: 1;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: draw 1.4s ease-out both;
}

.art-graph circle {
  fill: var(--color-bg);
  stroke: var(--color-line-strong);
  stroke-width: 1;
}

.art-graph circle.center {
  fill: var(--color-brand);
  stroke: var(--color-brand);
}

.art-graph text {
  fill: var(--color-fg-muted);
  font-family: var(--font-sans);
  font-size: 10px;
}

.art-graph text.label {
  fill: var(--color-fg);
}

.art-graph .source {
  fill: var(--color-brand-bright);
  font-family: var(--font-mono);
  font-size: 9px;
  animation: soft-pulse 3s ease-in-out infinite;
}

/* Artwork: MacBook-style API window. The screen shares the G2 corner
   profile of the card around it. */

.art-window {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-code-bg);
  border: 1px solid var(--color-line-strong);
  border-radius: 16px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 17px;
}

@supports (corner-shape: squircle) {
  .art-window {
    border-radius: 22px;
    corner-shape: squircle;
  }
}

.art-window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-line);
  flex-shrink: 0;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-red {
  background: oklch(0.637 0.237 25.3);
}

.dot-yellow {
  background: oklch(0.795 0.184 86);
}

.dot-green {
  background: oklch(0.723 0.219 149.6);
}

.art-window-title {
  margin-left: auto;
  color: oklch(1 0 0 / 0.35);
}

.art-window-body {
  padding: 10px 14px;
  overflow: hidden;
}

.art-line {
  white-space: nowrap;
}

.art-line.l1 {
  padding-left: 14px;
}

.art-line.l2 {
  padding-left: 28px;
}

.art-line.l3 {
  padding-left: 42px;
}

.art-line.l4 {
  padding-left: 56px;
}

.art-line .k {
  color: oklch(1 0 0 / 0.5);
}

.art-line .p {
  color: oklch(1 0 0 / 0.25);
}

.art-line .s {
  color: var(--color-brand-bright);
}

.art-line .b {
  color: var(--color-fg);
}

.art-line .ts {
  animation: ts-pulse 4s ease-in-out infinite alternate;
}

/* Code window: the API artwork's chrome with a copy button and language
   tabs, so it shares the G2 screen corners above. The radio inputs come
   first in the markup so sibling selectors can show the matching pane and
   mark the active tab without script; panes and tabs match by position,
   up to six tabs. A window with one pane has no inputs and shows it. */

.code-window-group {
  position: relative;
}

.code-tab-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.code-window {
  font-size: 0.8125rem;
  line-height: 1.6;
}

.code-copy {
  margin-left: auto;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: oklch(1 0 0 / 0.5);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.code-copy:hover,
.code-copy[data-copied] {
  color: var(--color-fg);
}

.code-copy-icon {
  display: flex;
}

.code-copy-icon-check,
.code-copy[data-copied] .code-copy-icon-copy {
  display: none;
}

.code-copy[data-copied] .code-copy-icon-check {
  display: block;
}

/* Never a horizontal scrollbar: lines wrap, and a wrapped continuation
   hangs two characters in so it reads as one line. The landing and key
   snippets keep every line short enough not to wrap at desktop widths.
   Every pane sits in the same grid cell and inactive ones are hidden, not
   removed, so the window is always as tall as its tallest snippet and a
   shorter one leaves empty space below. */
.code-window-body {
  display: grid;
  overflow: hidden;
  padding: 14px 18px;
}

.code-pane {
  grid-area: 1 / 1;
  visibility: hidden;
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: oklch(0.9177 0.0063 255.48);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.code-line {
  display: block;
  min-height: 1.6em;
  padding-left: 2ch;
  text-indent: -2ch;
}

.code-pane code {
  font-size: inherit;
}

.code-pane:only-child,
.code-tab-input:nth-of-type(1):checked ~ div .code-pane:nth-of-type(1),
.code-tab-input:nth-of-type(2):checked ~ div .code-pane:nth-of-type(2),
.code-tab-input:nth-of-type(3):checked ~ div .code-pane:nth-of-type(3),
.code-tab-input:nth-of-type(4):checked ~ div .code-pane:nth-of-type(4),
.code-tab-input:nth-of-type(5):checked ~ div .code-pane:nth-of-type(5),
.code-tab-input:nth-of-type(6):checked ~ div .code-pane:nth-of-type(6) {
  visibility: visible;
}

/* Token colours are Shiki's github-dark theme (the VS Code default look
   the reference uses), converted to OKLCH: an exception to the grayscale
   palette that is confined to code windows. */
.t-k {
  color: oklch(0.7214 0.1616 15.49);
}

.t-s {
  color: oklch(0.8289 0.0877 252.46);
}

.t-fn {
  color: oklch(0.7267 0.1367 299.15);
}

.t-v {
  color: oklch(0.7685 0.1214 252.34);
}

.t-p {
  color: oklch(0.8111 0.1242 55.08);
}

.t-c {
  color: oklch(0.5514 0.0190 250.98);
}

/* Under the landing stage the tabs stay square like the search field and
   the agent prompt. */
.code-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.code-tabs label {
  padding: var(--space-1) var(--space-3);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-fg-muted);
  border: 1px solid transparent;
  cursor: pointer;
}

.code-tabs label:hover {
  color: var(--color-fg);
}

.code-tab-input:nth-of-type(1):checked ~ .code-tabs label:nth-of-type(1),
.code-tab-input:nth-of-type(2):checked ~ .code-tabs label:nth-of-type(2),
.code-tab-input:nth-of-type(3):checked ~ .code-tabs label:nth-of-type(3),
.code-tab-input:nth-of-type(4):checked ~ .code-tabs label:nth-of-type(4),
.code-tab-input:nth-of-type(5):checked ~ .code-tabs label:nth-of-type(5),
.code-tab-input:nth-of-type(6):checked ~ .code-tabs label:nth-of-type(6) {
  color: var(--color-fg);
  background: var(--color-surface-strong);
  border-color: var(--color-line-strong);
}

.code-tab-input:nth-of-type(1):focus-visible ~ .code-tabs label:nth-of-type(1),
.code-tab-input:nth-of-type(2):focus-visible ~ .code-tabs label:nth-of-type(2),
.code-tab-input:nth-of-type(3):focus-visible ~ .code-tabs label:nth-of-type(3),
.code-tab-input:nth-of-type(4):focus-visible ~ .code-tabs label:nth-of-type(4),
.code-tab-input:nth-of-type(5):focus-visible ~ .code-tabs label:nth-of-type(5),
.code-tab-input:nth-of-type(6):focus-visible ~ .code-tabs label:nth-of-type(6) {
  outline: 2px solid var(--color-brand-bright);
  outline-offset: 2px;
}

/* On content pages the tab labels sit in the title bar in place of the
   traffic lights, as in the x.ai docs: plain text in the copy label's grey
   that lightens on hover and turns white when selected, with no box. The
   first label lines up with the code below it, and a single-pane window
   names its pane there in the selected colour. Each label and the copy
   button reach over the bar's height and half of each gap, so every touch
   target is 44px tall. */
.code-bar {
  min-height: 2.75rem;
  padding-block: var(--space-2);
  gap: var(--space-3);
}

.code-bar-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  min-width: 0;
}

.code-bar-tabs label,
.code-bar-label {
  padding: 0 var(--space-1);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
}

.code-bar-tabs label {
  position: relative;
  color: oklch(1 0 0 / 0.5);
  cursor: pointer;
}

.code-bar-tabs label:hover {
  color: var(--color-fg-muted);
}

.code-bar-label,
.code-tab-input:nth-of-type(1):checked ~ div .code-bar-tabs label:nth-of-type(1),
.code-tab-input:nth-of-type(2):checked ~ div .code-bar-tabs label:nth-of-type(2),
.code-tab-input:nth-of-type(3):checked ~ div .code-bar-tabs label:nth-of-type(3),
.code-tab-input:nth-of-type(4):checked ~ div .code-bar-tabs label:nth-of-type(4),
.code-tab-input:nth-of-type(5):checked ~ div .code-bar-tabs label:nth-of-type(5),
.code-tab-input:nth-of-type(6):checked ~ div .code-bar-tabs label:nth-of-type(6) {
  color: var(--color-fg);
}

.code-tab-input:nth-of-type(1):focus-visible ~ div .code-bar-tabs label:nth-of-type(1),
.code-tab-input:nth-of-type(2):focus-visible ~ div .code-bar-tabs label:nth-of-type(2),
.code-tab-input:nth-of-type(3):focus-visible ~ div .code-bar-tabs label:nth-of-type(3),
.code-tab-input:nth-of-type(4):focus-visible ~ div .code-bar-tabs label:nth-of-type(4),
.code-tab-input:nth-of-type(5):focus-visible ~ div .code-bar-tabs label:nth-of-type(5),
.code-tab-input:nth-of-type(6):focus-visible ~ div .code-bar-tabs label:nth-of-type(6) {
  outline: 2px solid var(--color-brand-bright);
  outline-offset: 2px;
}

.code-bar .code-copy {
  position: relative;
  line-height: 1rem;
}

.code-bar-tabs label::after,
.code-bar .code-copy::after {
  content: "";
  position: absolute;
  inset: -0.875rem calc(var(--space-3) / -2);
}

/* The landing page stage: an outline box with stepped cut corners, the
   x.ai device drawn here with one clip-path so the square-corner rule
   holds, around the G2 window. The element is the 1px line; the
   ::before layer, inset by 1px and clipped to the same shape, is the
   face (dark gradient with a green glow) and ::after lays the hero's
   halftone over one corner. The height is fixed, so panes of different
   lengths swap inside without moving the page; a pane taller than the
   box scrolls vertically inside the window, never sideways. The padding
   follows the viewport so the window keeps its width on mid-size screens. */
.code-stage {
  --notch: 12px;
  --notch-2: calc(var(--notch) * 2);
  --stage-shape: polygon(
    0 var(--notch-2),
    var(--notch) var(--notch-2),
    var(--notch) var(--notch),
    var(--notch-2) var(--notch),
    var(--notch-2) 0,
    calc(100% - var(--notch-2)) 0,
    calc(100% - var(--notch-2)) var(--notch),
    calc(100% - var(--notch)) var(--notch),
    calc(100% - var(--notch)) var(--notch-2),
    100% var(--notch-2),
    100% calc(100% - var(--notch-2)),
    calc(100% - var(--notch)) calc(100% - var(--notch-2)),
    calc(100% - var(--notch)) calc(100% - var(--notch)),
    calc(100% - var(--notch-2)) calc(100% - var(--notch)),
    calc(100% - var(--notch-2)) 100%,
    var(--notch-2) 100%,
    var(--notch-2) calc(100% - var(--notch)),
    var(--notch) calc(100% - var(--notch)),
    var(--notch) calc(100% - var(--notch-2)),
    0 calc(100% - var(--notch-2))
  );
  position: relative;
  height: 28rem;
  padding: clamp(1.25rem, 0.5rem + 2.5vw, 3rem);
  display: flex;
  align-items: center;
  clip-path: var(--stage-shape);
  background: var(--color-line-strong);
}

.code-stage::before,
.code-stage::after {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--stage-shape);
  pointer-events: none;
}

.code-stage::before {
  background:
    radial-gradient(
      ellipse 70% 65% at 20% 100%,
      oklch(0.4484 0.0647 161 / 0.55),
      transparent 70%
    ),
    radial-gradient(
      ellipse 55% 55% at 100% 0%,
      oklch(0.3 0 0 / 0.9),
      transparent 70%
    ),
    radial-gradient(
      ellipse 45% 45% at 60% 45%,
      oklch(0.21 0 0),
      transparent 72%
    ),
    linear-gradient(170deg, oklch(0.165 0 0), oklch(0.115 0 0));
}

.code-stage::after {
  background-image: radial-gradient(
    circle,
    oklch(0.5969 0.0607 163.2 / 0.55) 1px,
    transparent 1.6px
  );
  background-size: 10px 10px;
  mask-image: radial-gradient(
    ellipse 55% 60% at 100% 0%,
    oklch(0 0 0) 0%,
    oklch(0 0 0 / 0.5) 40%,
    transparent 72%
  );
  animation: hero-drift 60s linear infinite;
}

.code-stage .art-window {
  position: relative;
  z-index: 1;
  max-height: 100%;
  min-height: 0;
  box-shadow: 0 24px 48px oklch(0 0 0 / 0.5);
}

.code-stage .code-window-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: oklch(1 0 0 / 0.22) transparent;
}

/* Engines without scrollbar-color (older Safari) get the same thin bar. */
.code-stage .code-window-body::-webkit-scrollbar {
  width: 6px;
}

.code-stage .code-window-body::-webkit-scrollbar-track {
  background: transparent;
}

.code-stage .code-window-body::-webkit-scrollbar-thumb {
  background: oklch(1 0 0 / 0.22);
}

/* Staggered entrance shared by artwork rows */

.art-stagger > * {
  animation: field-in 700ms ease-out both;
}

.art-stagger > :nth-child(2) { animation-delay: 160ms; }
.art-stagger > :nth-child(3) { animation-delay: 320ms; }
.art-stagger > :nth-child(4) { animation-delay: 480ms; }
.art-stagger > :nth-child(5) { animation-delay: 640ms; }
.art-stagger > :nth-child(6) { animation-delay: 800ms; }

.art-stagger > :nth-child(2) .reveal { animation-delay: 360ms; }
.art-stagger > :nth-child(3) .reveal { animation-delay: 520ms; }
.art-stagger > :nth-child(4) .reveal { animation-delay: 680ms; }
.art-stagger > :nth-child(5) .reveal { animation-delay: 840ms; }

.art-graph line:nth-of-type(2) { animation-delay: 250ms; }
.art-graph line:nth-of-type(3) { animation-delay: 500ms; }
.art-graph line:nth-of-type(4) { animation-delay: 750ms; }

/* Scroll-driven entrances where supported: the sequence plays as the card
   scrolls into view instead of on page load. */
@supports (animation-timeline: view()) {
  .art-stagger > * {
    animation-timeline: view();
    animation-range: entry 10% entry 55%;
    animation-delay: 0s;
  }

  .art-stagger > :nth-child(2) { animation-range: entry 18% entry 63%; }
  .art-stagger > :nth-child(3) { animation-range: entry 26% entry 71%; }
  .art-stagger > :nth-child(4) { animation-range: entry 34% entry 79%; }
  .art-stagger > :nth-child(5) { animation-range: entry 42% entry 87%; }
  .art-stagger > :nth-child(6) { animation-range: entry 50% entry 95%; }

  .art-fact strong.reveal {
    animation-timeline: view();
    animation-range: entry 30% entry 90%;
    animation-delay: 0s;
  }

  .art-graph line {
    animation-timeline: view();
    animation-range: entry 10% entry 80%;
    animation-delay: 0s;
  }
}

/* Developer section: copy and buttons beside the staged code window. */

.dev {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

/* The window's longest line must scroll inside it, not widen the track. */
.dev > *,
.docs > * {
  min-width: 0;
}

@media (min-width: 60rem) {
  .dev {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
    gap: var(--space-8);
  }
}

.dev-copy {
  display: grid;
  gap: var(--space-4);
  max-width: 32rem;
  justify-items: start;
}

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

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

.dev-stat dt {
  font-weight: 500;
  color: var(--color-fg);
}

.dev-stat dd {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-fg-faint);
}

/* Platform cards */

.platform-card h3 {
  margin-bottom: var(--space-2);
}

/* Steps */

.steps {
  display: grid;
  gap: var(--space-head);
}

@media (min-width: 60rem) {
  .steps {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    column-gap: var(--space-8);
    align-items: start;
  }

  .steps-head {
    position: sticky;
    top: 6.5rem;
  }
}

.steps-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.step {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  border-radius: 28px;
}

.step-number {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  border-radius: 6px;
}

/* The same G2 enhancement as the bento cards, scaled to each box. */
@supports (corner-shape: squircle) {
  .card,
  .step {
    border-radius: 40px;
    corner-shape: squircle;
  }

  .icon-box {
    border-radius: 12px;
    corner-shape: squircle;
  }

  .step-number {
    border-radius: 10px;
    corner-shape: squircle;
  }
}

.step h3 {
  margin-bottom: var(--space-1);
}

/* CTA */

.cta {
  background:
    radial-gradient(
      ellipse 60% 120% at 100% 0%,
      oklch(0.4484 0.0647 161),
      transparent 70%
    ),
    linear-gradient(135deg, var(--color-brand-strong), var(--color-brand));
  border: 1px solid var(--color-brand-glow);
  padding: clamp(3rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1rem + 3vw, 4.5rem);
  display: grid;
  gap: var(--space-5);
  color: var(--color-on-brand);
  border-radius: 28px;
  overflow: hidden;
}

@supports (corner-shape: squircle) {
  .cta {
    border-radius: 40px;
    corner-shape: squircle;
  }
}

.cta h2 {
  color: var(--color-on-brand);
}

.cta p {
  color: oklch(0.92 0.02 163.9);
  max-width: 40rem;
}

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

/* Results */

.results-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  color: var(--color-fg-muted);
  font-size: 0.875rem;
}

.result-list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--color-line);
}

.result {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-line);
  display: grid;
  gap: var(--space-1);
}

.result-title {
  font-size: 1.125rem;
  font-weight: 500;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: 0.875rem;
  color: var(--color-fg-muted);
}

.meta > * + *::before {
  content: "\00b7";
  margin-right: var(--space-3);
  color: var(--color-fg-faint);
}

/* Result pager: Previous and Next arrows around page 1, the current page
   and its neighbours. Controls are outlined squares of at least 44px like
   secondary buttons, without the link underline; the current page is
   filled with the brand and set in bold, and an arrow with nowhere to go
   stays visible, dimmed and without a link. Below 34rem the arrows drop
   their labels and the neighbours, which the arrows reach anyway, give way
   to gaps, so the pager fits a 320px screen on one line; when zoom leaves
   less room than that, it wraps instead of scrolling sideways. */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding-top: var(--space-4);
}

.pager-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
}

.pager a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line-strong);
  color: var(--color-fg);
  text-decoration: none;
}

.pager a[href]:hover {
  background: var(--color-surface-strong);
}

.pager a[aria-current="page"],
.pager a[aria-current="page"]:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-on-brand);
  font-weight: 600;
}

.pager a[aria-disabled="true"] {
  border-color: var(--color-line);
  color: var(--color-fg-faint);
}

.pager-arrow {
  flex: none;
}

.pager-gap {
  padding: 0 var(--space-1);
  color: var(--color-fg-muted);
}

.pager-narrow {
  display: none;
}

@media (max-width: 34rem) {
  .pager .pager-step {
    padding: 0;
  }

  .pager-step-label,
  .pager-wide {
    display: none;
  }

  .pager-narrow {
    display: block;
  }
}

/* Company profile */

.profile-head {
  display: grid;
  gap: var(--space-2);
}

.profile-head .meta {
  align-items: center;
}

.profile-head .meta > * + *::before {
  content: none;
}

.classification-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
}

.id {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-fg-muted);
  word-break: break-all;
}

.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-3);
}

.facts dt {
  color: var(--color-fg-muted);
  font-size: 0.875rem;
  padding-top: 0.1rem;
}

.facts dd {
  margin: 0;
}

/* An identifier number keeps the plain code style of the other values: no
   link colour or underline. A chevron follows it, and hover or keyboard
   focus turns it into an arrow as on x.ai: the head slides 3 units right
   while a shaft grows out of where its tip was, from the point at 15 to
   span 9 to 18. A dash pattern draws the shaft so its round caps keep their
   shape. Every part stays in the link's colour: the shaft's right end rides
   on the head's tip, and at rest its zero-length dash is a dot under that
   tip. The site's one hover transition; reduced motion makes it a jump. */
.identifier-link code {
  text-decoration: none;
}

.identifier-link-icon {
  vertical-align: -0.3125em;
}

.identifier-link-shaft,
.identifier-link-head {
  transition-property: stroke-dasharray, stroke-dashoffset, transform;
  transition-duration: 140ms;
  transition-timing-function: ease-out;
}

.identifier-link-shaft {
  stroke-dasharray: 0 24;
  stroke-dashoffset: -6;
}

.identifier-link:hover .identifier-link-shaft,
.identifier-link:focus-visible .identifier-link-shaft {
  stroke-dasharray: 9 24;
  stroke-dashoffset: 0;
}

.identifier-link:hover .identifier-link-head,
.identifier-link:focus-visible .identifier-link-head {
  transform: translateX(3px);
}

@media (max-width: 30rem) {
  .facts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .facts dd {
    margin-bottom: var(--space-2);
  }
}

.table-wrap {
  overflow-x: auto;
}

/* Locked officers preview contains decorative placeholders, never real data. */
.officers-access {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 17rem;
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--color-bg-elevated);
  padding: var(--space-6);
  isolation: isolate;
}

.officers-preview {
  position: absolute;
  inset: var(--space-4) var(--space-5);
  min-width: 40rem;
  filter: blur(5px);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
  z-index: -2;
}

/* Blur the text alone; table rules otherwise leave long rectangular bands. */
.officers-preview th,
.officers-preview td {
  border-bottom: 0;
}

.officers-access::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    oklch(0.155 0 0 / 0.2),
    oklch(0.155 0 0 / 0.9) 35%,
    oklch(0.155 0 0 / 0.9) 65%,
    oklch(0.155 0 0 / 0.2)
  );
  z-index: -1;
}

.officers-unlock {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  max-width: 100%;
}

.officers-unlock-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.officers-lock {
  flex-shrink: 0;
}

.financials-preview {
  position: absolute;
  inset: 1.25rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  min-width: 65rem;
  opacity: 0.48;
  pointer-events: none;
  user-select: none;
  z-index: -2;
}

.financials-statement h4 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.financials-statement p {
  font-size: 12px;
  margin-top: 8px;
}

.financials-statement table {
  margin-top: 8px;
  font-size: 13px;
}

.financials-statement h4,
.financials-statement p,
.financials-preview th,
.financials-preview td {
  filter: blur(4px);
}

.financials-preview th,
.financials-preview td {
  padding: 5px 4px;
  line-height: 1.35;
  border: 0;
  font-variant-numeric: tabular-nums;
}

.financials-preview th:nth-last-child(-n + 2),
.financials-preview td:nth-last-child(-n + 2) {
  padding-block: 3px;
  font-size: 16px;
  filter: blur(3.3px);
  text-align: right;
  white-space: nowrap;
}

.financials-preview td:first-child {
  width: 1.5rem;
}

.financials-access .officers-unlock-heading {
  text-align: center;
}

@media (max-width: 30rem) {
  .officers-access {
    padding: var(--space-5);
  }
}

/* Identifiers page: one section per identifier, addressed by its fragment
   below the sticky header, the opened one marked by its heading. */
.identifier {
  scroll-margin-top: 6rem;
}

.identifier:target > h2 {
  color: var(--color-brand-bright);
}

.names td {
  overflow-wrap: anywhere;
}

.names td:last-child,
.names th:last-child {
  width: 1%;
  white-space: nowrap;
}

/* API docs */

.endpoint {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  border-left: 4px solid var(--color-brand-bright);
  padding-left: var(--space-3);
}

.method {
  font-weight: 700;
  color: var(--color-brand-bright);
}

.params th:first-child,
.params td:first-child {
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* A sticky table of contents beside the sections on wide screens; its
   links are muted text like the header's, without underline. */
.docs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

@media (min-width: 60rem) {
  .docs {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }

  .docs-nav {
    position: sticky;
    top: 6.5rem;
  }
}

.docs-nav-title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-faint);
  margin-bottom: var(--space-3);
}

.docs-nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: 0.9375rem;
}

@media (min-width: 60rem) {
  .docs-nav ul {
    display: grid;
    gap: var(--space-2);
  }
}

.docs-nav a {
  color: var(--color-fg-muted);
}

.docs-nav a:hover {
  color: var(--color-fg);
}

.docs-body > * + * {
  margin-top: var(--space-section);
}

.docs-section {
  scroll-margin-top: 6rem;
}

/* Legal pages: one text column of numbered sections with smaller headings
   than the marketing pages, muted body text, and subsections set off by a
   left rule, as coragrid.com's legal pages lay them out. */

.legal {
  max-width: 44rem;
}

.legal > * + * {
  margin-top: var(--space-block);
}

.legal h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.legal h3 {
  font-size: 1.0625rem;
  color: var(--color-fg);
}

.legal p,
.legal li {
  color: var(--color-fg-muted);
}

.legal strong {
  color: var(--color-fg);
  font-weight: 500;
}

.legal ul {
  padding-left: 1.25rem;
  display: grid;
  gap: var(--space-2);
}

.legal-sub {
  border-left: 1px solid var(--color-line);
  padding-left: var(--space-5);
}

.legal-sub > * + * {
  margin-top: var(--space-5);
}

/* Page actions: copy or view a content page as Markdown and the agent
   setup, under the page title. Text-only states like the docs navigation
   (muted, white on hover), thin dividers and no box, as x.ai's docs chrome;
   every action is a 44px target whose label aligns with the text column. */

.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: calc(-1 * var(--space-2));
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-fg-muted);
}

.stack > .page-actions {
  margin-top: var(--space-1);
}

.page-actions-copy,
.page-actions a {
  font: inherit;
  color: var(--color-fg-muted);
  background: none;
  border: 0;
  min-height: 2.75rem;
  padding: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.page-actions-copy {
  cursor: copy;
}

.page-actions-copy:hover,
.page-actions-copy[data-copied],
.page-actions a:hover {
  color: var(--color-fg);
}

/* About and legal page body links are foreground white over a fixed 1px
   underline of the same colour, like the Coragrid attribution links, so
   they stand out from the muted prose. The page actions are `.plain` and
   keep the bar's own states, as on every content page. */
.legal-page a:not(.plain),
.legal-page a:not(.plain):is(:hover, :focus, :active, :visited) {
  color: var(--color-fg);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.page-actions svg {
  flex: none;
}

.page-actions-icon {
  display: flex;
}

.page-actions-icon-check,
.page-actions-copy[data-copied] .page-actions-icon-copy {
  display: none;
}

.page-actions-copy[data-copied] .page-actions-icon-check {
  display: block;
}

.page-actions-divider {
  color: var(--color-fg-faint);
  user-select: none;
}

/* Phones wrap the actions onto two rows, where a divider would dangle at
   a row's end; the 44px targets keep them apart. */
@media (max-width: 40rem) {
  .page-actions-divider {
    display: none;
  }
}

/* API key page: the two tiers side by side. */

.tier {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  justify-items: start;
}

.tier h2 {
  font-size: 1.5rem;
}

.tier-key {
  border-color: var(--color-brand-glow);
  background: linear-gradient(
    160deg,
    var(--color-brand-tint),
    var(--color-surface) 60%
  );
}

.checklist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--color-fg-muted);
}

.checklist li {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}

.checklist li::before {
  content: "\2713";
  flex: none;
  color: var(--color-brand-bright);
  font-size: 0.875rem;
}

/* Company Data API page, after grata.com/api: four API cards, the data a
   record holds, reasons, audiences and the questions. */

@media (min-width: 48rem) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Four across only where the longest path fits a card on one line. */
@media (min-width: 90rem) {
  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.api-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* The endpoint sits at the foot of its card, so the four line up. */
.api-card-foot {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: 0.875rem;
}

.data-points {
  display: grid;
  gap: var(--space-5) var(--space-6);
}

@media (min-width: 48rem) {
  .data-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 75rem) {
  .data-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.data-points > div {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-4);
}

.data-points dt {
  font-weight: 500;
  margin-bottom: var(--space-2);
}

.data-points dd {
  margin: 0;
  color: var(--color-fg-muted);
}

/* Questions open in place without script, between hairlines; the sign
   turns from plus to minus with no transition. */
.faq {
  max-width: 52rem;
  border-top: 1px solid var(--color-line);
}

.faq-item {
  border-bottom: 1px solid var(--color-line);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 2.75rem;
  padding: var(--space-4) 0;
  font-size: 1.125rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex: none;
  width: 1.25rem;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  color: var(--color-fg-muted);
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item summary:hover::after {
  color: var(--color-fg);
}

.faq-item p {
  max-width: 44rem;
  padding-bottom: var(--space-5);
  color: var(--color-fg-muted);
}

/* Error pages */

.status-code {
  font-family: var(--font-mono);
  color: var(--color-fg-faint);
}

/* Motion */

@keyframes hero-drift {
  from { background-position: 0 0; }
  to { background-position: 140px 84px; }
}

@keyframes hero-breathe {
  from { opacity: 0.7; }
  to { opacity: 1; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes field-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes value-reveal {
  0%, 30% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

@keyframes soft-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes ts-pulse {
  from { color: var(--color-fg-muted); }
  to { color: var(--color-brand-bright); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }

  .art-fact strong.reveal {
    clip-path: none;
  }

  .art-graph line {
    stroke-dashoffset: 0;
  }

  .identifier-link-shaft,
  .identifier-link-head {
    transition: none;
  }

  /* The still list falls back into the content column, each country once. */
  .marquee {
    mask-image: none;
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .marquee-track {
    flex-wrap: wrap;
    width: auto;
  }

  .marquee-repeat {
    display: none;
  }

  .fs-ball {
    display: none;
  }
}