/* ============================================================
   site-chrome.css — GENERATED. Do not edit; regenerate instead.
   ============================================================
   Byte-exact concatenation of, in order:
     static/vendor/design-system/tokens.css
     static/vendor/design-system/base.css
     static/vendor/design-system/motion.css
     static/vendor/design-system/themes/light.css
     static/site/css/site.css

   Why it exists (111 §C): the public site's head loaded these
   sheets as separate render-blocking requests, and Lighthouse's
   performance floor (95, scripts/site-lighthouse.sh) failed on the
   request chain alone. One bundled request, same bytes, same cascade
   order. 145: the theme source is themes/light.css — the public site
   is light-only, so the design system's concrete values are fixed
   here and no swap sheet exists.

   Guard: SiteCssBundleParityTest fails when any source drifts from
   this file. Regenerate:
     scripts/build-site-chrome.sh
   ============================================================ */

/* ============================================================
   DESIGN TOKENS
   ============================================================
   This file declares the semantic contract. Do NOT put
   concrete values here. Concrete values live in themes/.
   Your application and components should reference these tokens.
   ============================================================ */

:root {
  /* --------------------------------------------------------
     Surface (backgrounds)
     -------------------------------------------------------- */
  --surface-page:             var(--_surface-page);
  --surface-default:          var(--_surface-default);
  --surface-raised:           var(--_surface-raised);
  --surface-overlay:          var(--_surface-overlay);
  --surface-inset:            var(--_surface-inset);
  --surface-hover:            var(--_surface-hover);
  --surface-active:           var(--_surface-active);
  --surface-selected:         var(--_surface-selected);

  /* --------------------------------------------------------
     Text
     -------------------------------------------------------- */
  --text-primary:             var(--_text-primary);
  --text-secondary:           var(--_text-secondary);
  --text-muted:               var(--_text-muted);
  --text-inverted:            var(--_text-inverted);
  --text-link:                var(--_text-link);
  --text-link-hover:          var(--_text-link-hover);
  --text-danger:              var(--_text-danger);
  --text-success:             var(--_text-success);
  --text-warning:             var(--_text-warning);

  /* --------------------------------------------------------
     Border
     -------------------------------------------------------- */
  --border-default:           var(--_border-default);
  --border-hover:             var(--_border-hover);
  --border-focus:             var(--_border-focus);
  --border-subtle:            var(--_border-subtle);
  --border-danger:            var(--_border-danger);

  /* --------------------------------------------------------
     Accent (actions + semantics)
     -------------------------------------------------------- */
  --accent-primary:           var(--_accent-primary);
  --accent-primary-hover:     var(--_accent-primary-hover);
  --accent-primary-active:    var(--_accent-primary-active);
  --accent-primary-text:      var(--_accent-primary-text);

  --accent-secondary:         var(--_accent-secondary);
  --accent-secondary-hover:   var(--_accent-secondary-hover);
  --accent-secondary-text:    var(--_accent-secondary-text);

  --accent-danger:            var(--_accent-danger);
  --accent-danger-hover:      var(--_accent-danger-hover);
  --accent-danger-text:       var(--_accent-danger-text);

  --accent-success:           var(--_accent-success);
  --accent-success-bg:        var(--_accent-success-bg);
  --accent-warning:           var(--_accent-warning);
  --accent-warning-bg:        var(--_accent-warning-bg);
  --accent-info:              var(--_accent-info);
  --accent-info-bg:           var(--_accent-info-bg);

  /* --------------------------------------------------------
     Focus Ring
     -------------------------------------------------------- */
  --focus-ring:               var(--_focus-ring);
  --focus-ring-offset:        var(--_focus-ring-offset);

  /* --------------------------------------------------------
     Disabled / Read-only
     -------------------------------------------------------- */
  --opacity-disabled:         0.5;
  --opacity-readonly:         0.7;
  --cursor-disabled:          not-allowed;
  --cursor-readonly:          default;

  /* --------------------------------------------------------
     Z-Index Scale
     -------------------------------------------------------- */
  --z-base:                   0;
  --z-dropdown:               100;
  --z-sticky:                 200;
  --z-fixed:                  300;
  --z-drawer:                 400;
  --z-modal-backdrop:         500;
  --z-modal:                  600;
  --z-popover:                700;
  --z-toast:                  800;
  --z-tooltip:                900;

  /* --------------------------------------------------------
     Breakpoints (reference values in px)
     -------------------------------------------------------- */
  --breakpoint-sm:            640px;
  --breakpoint-md:            768px;
  --breakpoint-lg:            1024px;
  --breakpoint-xl:            1280px;
  --breakpoint-2xl:           1536px;

  /* --------------------------------------------------------
     Icon Sizes
     -------------------------------------------------------- */
  --icon-xs:                  12px;
  --icon-sm:                  16px;
  --icon-md:                  20px;
  --icon-lg:                  24px;
  --icon-xl:                  32px;

  /* --------------------------------------------------------
     Field Heights (inputs, buttons, selects)
     -------------------------------------------------------- */
  --field-height-sm:          32px;
  --field-height-base:        40px;
  --field-height-lg:          48px;

  /* --------------------------------------------------------
     Layout
     -------------------------------------------------------- */
  --container-sm:             640px;
  --container-md:             768px;
  --container-lg:             1024px;
  --container-xl:             1200px;
  --container-2xl:            1400px;
  --sidebar-width:            280px;
  --header-height:            60px;

  /* --------------------------------------------------------
     Elevation (shadows)
     -------------------------------------------------------- */
  --shadow-xs:                var(--_shadow-xs);
  --shadow-sm:                var(--_shadow-sm);
  --shadow-md:                var(--_shadow-md);
  --shadow-lg:                var(--_shadow-lg);
  --shadow-xl:                var(--_shadow-xl);
  --shadow-inset:             var(--_shadow-inset);

  /* --------------------------------------------------------
     Radius
     -------------------------------------------------------- */
  --radius-none:              0px;
  --radius-sm:                4px;
  --radius-base:              6px;
  --radius-md:                8px;
  --radius-lg:                12px;
  --radius-xl:                16px;
  --radius-2xl:               24px;
  --radius-pill:              9999px;
  --radius-full:              50%;

  /* --------------------------------------------------------
     Spacing (rem-based, 1rem = 16px default)
     -------------------------------------------------------- */
  --space-0:                  0rem;
  --space-px:                 1px;
  --space-0-5:                0.125rem;  /* 2px */
  --space-1:                  0.25rem;   /* 4px */
  --space-1-5:                0.375rem;  /* 6px */
  --space-2:                  0.5rem;    /* 8px */
  --space-2-5:                0.625rem;  /* 10px */
  --space-3:                  0.75rem;   /* 12px */
  --space-3-5:                0.875rem;  /* 14px */
  --space-4:                  1rem;      /* 16px */
  --space-5:                  1.25rem;   /* 20px */
  --space-6:                  1.5rem;    /* 24px */
  --space-7:                  1.75rem;   /* 28px */
  --space-8:                  2rem;      /* 32px */
  --space-9:                  2.25rem;   /* 36px */
  --space-10:                 2.5rem;    /* 40px */
  --space-12:                 3rem;      /* 48px */
  --space-14:                 3.5rem;    /* 56px */
  --space-16:                 4rem;      /* 64px */
  --space-20:                 5rem;      /* 80px */
  --space-24:                 6rem;      /* 96px */

  /* Semantic spacing */
  --gap-xs:                   var(--space-1);
  --gap-sm:                   var(--space-2);
  --gap-md:                   var(--space-4);
  --gap-lg:                   var(--space-6);
  --gap-xl:                   var(--space-8);

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

  --text-xs:                  0.75rem;    /* 12px */
  --text-sm:                  0.875rem;   /* 14px */
  --text-base:                1rem;       /* 16px */
  --text-lg:                  1.125rem;   /* 18px */
  --text-xl:                  1.25rem;    /* 20px */
  --text-2xl:                 1.5rem;     /* 24px */
  --text-3xl:                 1.875rem;   /* 30px */
  --text-4xl:                 2.25rem;    /* 36px */

  --weight-normal:            400;
  --weight-medium:            500;
  --weight-semibold:          600;
  --weight-bold:              700;

  --leading-none:             1;
  --leading-tight:            1.25;
  --leading-snug:             1.375;
  --leading-normal:           1.5;
  --leading-relaxed:          1.625;

  --tracking-tight:           -0.025em;
  --tracking-normal:          0em;
  --tracking-wide:            0.025em;

  /* --------------------------------------------------------
     Motion
     -------------------------------------------------------- */
  --duration-instant:         0ms;
  --duration-fast:            100ms;
  --duration-base:            150ms;
  --duration-normal:          200ms;
  --duration-slow:            300ms;
  --duration-slower:          500ms;

  --ease-linear:              linear;
  --ease-in:                  cubic-bezier(0.4, 0, 1, 1);
  --ease-out:                 cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:              cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:              cubic-bezier(0.34, 1.56, 0.64, 1);

  --stagger-none:             0ms;
  --stagger-fast:             20ms;
  --stagger-base:             40ms;
  --stagger-slow:             80ms;

}

/* --------------------------------------------------------
   prefers-contrast: more (WCAG 1.4.11, opt-in amplification)
   --------------------------------------------------------
   The OS asks for more contrast: raise the STRUCTURAL tokens past their
   floors. Both source tokens are audited at 4.5:1 on surface-default, so
   these mappings guarantee the raises with zero concrete values. */
@media (prefers-contrast: more) {
  :root {
    --border-default: var(--text-primary);
    --border-subtle: var(--text-secondary);
  }
}

/* ============================================================
   BASE STYLES
   Modern reset + globals referencing tokens.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Focus styles */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring-offset) var(--surface-default),
              0 0 0 calc(var(--focus-ring-offset) + 2px) var(--focus-ring);
  border-radius: var(--radius-base);
}

/* Links */
a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

/* Typography scale */
.ds-display {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.ds-headline {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.ds-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.ds-subtitle {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.ds-body {
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
}

.ds-body-sm {
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
}

.ds-caption {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.ds-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}

/* Dividers */
hr,
.ds-divider {
  border: 0;
  height: 1px;
  background-color: var(--border-subtle);
  margin: var(--gap-md) 0;
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-focus);
}

/* Selection */
::selection {
  background: var(--accent-primary);
  color: var(--accent-primary-text);
}

/* ============================================================
   MOTION SYSTEM
   Keyframes + utility classes for consistent animation.
   Respects prefers-reduced-motion.
   ============================================================ */

/* --------------------------------------------------------
   Keyframes
   -------------------------------------------------------- */
@keyframes ds-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ds-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes ds-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ds-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ds-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ds-scale-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.96); }
}

@keyframes ds-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

@keyframes ds-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --------------------------------------------------------
   Utility Classes
   -------------------------------------------------------- */
.ds-animate-fade-in {
  animation: ds-fade-in var(--duration-normal) var(--ease-out) forwards;
}

.ds-animate-fade-out {
  animation: ds-fade-out var(--duration-normal) var(--ease-in) forwards;
}

.ds-animate-slide-up {
  animation: ds-slide-up var(--duration-normal) var(--ease-out) forwards;
}

.ds-animate-slide-down {
  animation: ds-slide-down var(--duration-normal) var(--ease-out) forwards;
}

.ds-animate-scale-in {
  animation: ds-scale-in var(--duration-normal) var(--ease-spring) forwards;
}

.ds-animate-scale-out {
  animation: ds-scale-out var(--duration-normal) var(--ease-in) forwards;
}

.ds-animate-pulse {
  animation: ds-pulse-soft 2s var(--ease-in-out) infinite;
}

.ds-animate-spin {
  animation: ds-spin 1s linear infinite;
}

/* Stagger children animations */
.ds-stagger-children > * {
  opacity: 0;
  animation: ds-slide-up var(--duration-normal) var(--ease-out) forwards;
}
.ds-stagger-children > *:nth-child(1)  { animation-delay: calc(var(--stagger-base) * 0); }
.ds-stagger-children > *:nth-child(2)  { animation-delay: calc(var(--stagger-base) * 1); }
.ds-stagger-children > *:nth-child(3)  { animation-delay: calc(var(--stagger-base) * 2); }
.ds-stagger-children > *:nth-child(4)  { animation-delay: calc(var(--stagger-base) * 3); }
.ds-stagger-children > *:nth-child(5)  { animation-delay: calc(var(--stagger-base) * 4); }
.ds-stagger-children > *:nth-child(6)  { animation-delay: calc(var(--stagger-base) * 5); }
.ds-stagger-children > *:nth-child(7)  { animation-delay: calc(var(--stagger-base) * 6); }
.ds-stagger-children > *:nth-child(8)  { animation-delay: calc(var(--stagger-base) * 7); }
.ds-stagger-children > *:nth-child(9)  { animation-delay: calc(var(--stagger-base) * 8); }
.ds-stagger-children > *:nth-child(10) { animation-delay: calc(var(--stagger-base) * 9); }

/* Skeleton / Shimmer loading state */
.ds-shimmer {
  background: linear-gradient(
    90deg,
    var(--surface-inset) 25%,
    var(--surface-hover) 50%,
    var(--surface-inset) 75%
  );
  background-size: 200% 100%;
  animation: ds-shimmer 1.5s infinite linear;
  border-radius: var(--radius-base);
}

/* Smooth transitions for interactive elements */
.ds-transition {
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.ds-transition-slow {
  transition: all var(--duration-slow) var(--ease-out);
}

/* Hover lift effect for cards */
.ds-hover-lift {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.ds-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    0ms;
    --duration-base:    0ms;
    --duration-normal:  0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
    --stagger-fast:     0ms;
    --stagger-base:     0ms;
    --stagger-slow:     0ms;
  }

  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .ds-animate-fade-in,
  .ds-animate-fade-out,
  .ds-animate-slide-up,
  .ds-animate-slide-down,
  .ds-animate-scale-in,
  .ds-animate-scale-out,
  .ds-animate-pulse,
  .ds-animate-spin,
  .ds-shimmer,
  .ds-stagger-children > * {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .ds-shimmer {
    background-position: 0 0 !important;
  }

  .ds-hover-lift:hover {
    transform: none;
  }

  /* Preserve focus ring visibility even when motion is reduced */
  :focus-visible {
    transition-duration: var(--duration-fast) !important;
  }
}


/* Toast animations */
@keyframes ds-toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ds-toast-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

/* ============================================================
   THEME: LIGHT
   ============================================================ */

:root {
  color-scheme: light;

  --_surface-page:            #f8f9fb;
  --_surface-default:         #ffffff;
  --_surface-raised:          #ffffff;
  --_surface-overlay:         #ffffff;
  --_surface-inset:           #f1f3f6;
  --_surface-hover:           #f1f3f6;
  --_surface-active:          #e8ecf1;
  --_surface-selected:        #cad2e0;

  --_text-primary:            #0f172a;
  --_text-secondary:          #334155;
  --_text-muted:              #64748b;
  --_text-inverted:           #ffffff;
  --_text-link:               #2563eb;
  --_text-link-hover:         #1d4ed8;
  --_text-danger:             #dc2626;
  --_text-success:            #15803d;
  --_text-warning:            #a16207;

  --_border-default:          #8e94a1;
  --_border-hover:            #87909f;
  --_border-focus:            #7c8a9f;
  --_border-subtle:           #b2b7bf;
  --_border-danger:           #fca5a5;

  --_accent-primary:          #0f172a;
  --_accent-primary-hover:    #1e293b;
  --_accent-primary-active:   #334155;
  --_accent-primary-text:     #ffffff;

  --_accent-secondary:        #f1f5f9;
  --_accent-secondary-hover:  #e2e8f0;
  --_accent-secondary-text:   #0f172a;

  --_accent-danger:           #dc2626;
  --_accent-danger-hover:     #b91c1c;
  --_accent-danger-text:      #ffffff;

  --_accent-success:          #15803d;
  --_accent-success-bg:       #dcfce7;
  --_accent-warning:          #a16207;
  --_accent-warning-bg:       #fef9c3;
  --_accent-info:             #0369a1;
  --_accent-info-bg:          #e0f2fe;

  --_focus-ring:              #3b82f6;
  --_focus-ring-offset:       2px;

  --_shadow-xs:               0 1px 2px 0 rgb(0 0 0 / 0.03);
  --_shadow-sm:               0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --_shadow-md:               0 4px 6px -1px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --_shadow-lg:               0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.06);
  --_shadow-xl:               0 20px 25px -5px rgb(0 0 0 / 0.06), 0 8px 10px -6px rgb(0 0 0 / 0.06);
  --_shadow-inset:            inset 0 2px 4px 0 rgb(0 0 0 / 0.03);

  --_font-sans:               ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --_font-serif:              ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --_font-mono:               ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ============================================================
   SITE STYLES — datapipelines.co public site (v4, the 145 transition)
   A layer over the vendored design system: every colour, spacing,
   radius, motion and surface value below references a token.

   THE DESIGN LAYER (owner approval 2026-09-16; the approved reference is
   previews/website-2026-09-16 in the orchestration store — its composition,
   type, spacing and motion are the spec, adapted to the server templates):
   - Palette: the `--site-*` token set below, LIGHT ONLY. There is one state:
     bare :root. No dark media query, no data-theme attribute, no swap sheet —
     the public site wears the approved light presentation whatever the OS or a
     saved preference says (145 §5). The bundle's theme source is themes/light.css
     (scripts/build-site-chrome.sh), so the design system's `--_*` values are
     fixed too. The bridge block points every semantic token the site reads at
     the site palette; the APP's layouts are untouched and keep their themes.
   - Type: Manrope, proportional, for everything the page SAYS — display and
     body, 700/800 for headlines with tight tracking. JetBrains Mono (the late
     sheet) is for what the product RUNS: code, data labels, the console.
   - Rhythm: open sections separated by hairlines (`.section.border`), generous
     section padding, one head→body gap token, cards as tall as their text.
     The pre-145 slab (`.band`) and the one dark slab (`.dark`) survive for the
     specialist pages in the same language: a soft tint and the navy panel.
   - Motion: finite entrances on first view (site.js adds `.is-entering` once;
     the element rests visible with or without JS), staggered chart bars and
     flow steps, nav underlines, link arrows, card/media lift, pressed buttons.
     Transform/opacity only; prefers-reduced-motion turns all of it off, at
     load and when the preference changes.
   No `style` attributes, no style elements, no JS style injection anywhere on
   the public site — SitePublicPresentationGuardTest sweeps for all three.
   ============================================================ */

/* JetBrains Mono is NOT declared here: its two faces (400, 500) live in
   site-fonts-mono.css, which loads LATE (media="print", flipped to all by
   site.js) so their 39 KB stays off the render-blocking chain (111 §C). */

/* --------------------------------------------------------
   Faces — self-hosted (VendoredFontsAuditTest: no font host, ever).
   Relative URLs: this file is served at /site/css/. Manrope is the one
   face the page says everything in; it is preloaded in the layout and
   `swap` (the approved preview's policy): the h1 is the LCP element and a
   fallback headline for a beat beats an invisible one.
   -------------------------------------------------------- */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../../vendor/fonts/manrope/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../../vendor/fonts/manrope/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------
   SITE TOKENS — the ONE block where concrete values live. Everything
   below this block resolves colour, type, spacing, radius, shadow and
   motion through a token (SitePublicPresentationGuardTest fails a hex,
   rgb() or px colour literal outside it). Names are meaningful and the
   scale is the design system's; the preview's automatically expanded
   numeric aliases were NOT copied.
   -------------------------------------------------------- */

:root {
  color-scheme: light;

  --site-font-sans: "Manrope", var(--font-sans);
  --site-font-mono: "JetBrains Mono", var(--font-mono);

  /* Palette (the approved preview's light palette; muted stepped to 5:1 on the ground). */
  --site-ground: #F5F7FA;
  --site-surface: #FFFFFF;
  --site-surface-2: #EDF1F5;
  --site-band: #E9EEF3;
  --site-ink: #101820;
  --site-ink-2: #4C5B68;
  --site-muted: #5F6C78;
  --site-hair: #D6DDE4;
  --site-hair-2: #C3CCD6;
  --site-accent: #C4740A;
  --site-accent-hover: #B26A09;
  --site-accent-ink: #8C5206;
  --site-accent-btn-ink: #0B1420;
  --site-accent-soft: #FBEFD9;
  --site-panel: #0B1420;
  --site-panel-2: #12203A;
  --site-panel-ink: #EEF2F6;
  --site-panel-muted: #C3CCD6;
  --site-panel-hair: #334152;
  --site-panel-accent: #F7C36B;
  --site-good: #1E8A5A;
  --site-good-panel: #4FCB8B;
  --site-teal: #19785E;
  --site-teal-soft: #E7F3EE;
  --site-shadow: 0 1px 2px rgba(16, 24, 32, .05), 0 8px 24px -12px rgba(16, 24, 32, .18);
  --site-shadow-lift: 0 24px 70px -30px rgba(11, 20, 32, .30);
  --site-accent-line: color-mix(in srgb, var(--site-accent) 38%, transparent);

  /* Type scale extensions over the design system's (display sizes it has no step for). */
  --site-text-display: clamp(2.6rem, 5vw, 3.75rem);
  --site-text-page-title: clamp(2.3rem, 4.4vw, 3.5rem);
  --site-text-h2: clamp(1.8rem, 3vw, 2.25rem);
  --site-text-h2-small: 1.75rem;
  --site-text-h3: 1.3125rem;
  --site-text-lede: 1.0625rem;
  --site-text-price: clamp(4.25rem, 7vw, 5.125rem);
  --site-text-micro: 0.6875rem;
  --site-text-tag: 0.625rem;
  --site-weight-display: 750;
  --site-weight-heavy: 800;
  --site-weight-emphasis: 650;
  --site-leading-display: 1.08;
  --site-leading-copy: 1.65;
  --site-leading-loose: 1.75;
  --site-tracking-display: -0.04em;
  --site-tracking-h2: -0.03em;
  --site-tracking-h3: -0.02em;
  --site-tracking-caps: 0.1em;
  --site-tracking-tag: 0.06em;
  --site-measure: 62ch;
  --site-measure-hero: 46ch;
  --site-measure-title: 18ch;

  /* Rhythm. */
  --site-section-pad: clamp(56px, 8vw, 96px);
  --site-gap-head: clamp(28px, 4vw, 44px);
  --site-radius-panel: calc(var(--radius-xl) + var(--space-1));
  --site-header-height: 4.5rem;
  /* 148: the width at which the wide row replaces the phone menu. A media query cannot
     read a custom property, so the `@media (min-width: 64rem)` in the header block repeats
     this value by hand; site.js reads THIS token to close an open menu when the viewport
     crosses it, so the two agree on one number. */
  --site-nav-wide-min: 64rem;

  /* Motion — every duration and distance the site animates with. */
  --site-motion-fast: var(--duration-normal);
  --site-motion-enter: var(--duration-slower);
  --site-motion-chart: calc(var(--duration-slower) + var(--duration-normal));
  --site-motion-step: var(--stagger-slow);
  --site-motion-ease: var(--ease-out);
  --site-motion-rise: var(--space-3);
  --site-motion-lift: calc(-1 * var(--space-0-5) * 1.5);
  --site-motion-press: .985;
}

/* --------------------------------------------------------
   The bridge: every design-system SEMANTIC the site layer reads resolves
   through the site palette. themes/light.css keeps owning the `--_*`
   concrete values (the APP's layouts read those — untouched); the site's
   rules read the semantics below and therefore the site palette. Cascade:
   tokens.css's mappings sit earlier in the same bundle, so these win.
   -------------------------------------------------------- */

:root {
  --surface-page: var(--site-ground);
  --surface-default: var(--site-surface);
  --surface-raised: var(--site-surface);
  --surface-overlay: var(--site-surface);
  --surface-inset: var(--site-surface-2);
  --surface-hover: var(--site-surface-2);
  --surface-active: var(--site-band);

  --text-primary: var(--site-ink);
  --text-secondary: var(--site-ink-2);
  --text-muted: var(--site-muted);
  --text-tertiary: var(--site-muted);
  --text-link: var(--site-accent-ink);
  --text-link-hover: var(--site-accent);

  --border-default: var(--site-hair-2);
  --border-hover: var(--site-muted);
  --border-focus: var(--site-accent);
  --border-subtle: var(--site-hair);

  --accent-info: var(--site-accent-ink);
  --accent-info-bg: var(--site-accent-soft);
  --accent-success: var(--site-good);
  --accent-success-bg: var(--site-teal-soft);
  --accent-warning: var(--site-accent-ink);
  --accent-warning-bg: var(--site-accent-soft);

  --focus-ring: var(--site-accent);

  --shadow-sm: var(--site-shadow);
  --shadow-md: var(--site-shadow);
  --shadow-lg: var(--site-shadow-lift);
  --shadow-xl: var(--site-shadow-lift);

  /* The body measure: 16/1.6 in the approved preview. */
  --text-base: 1rem;
}

html {
  font-family: var(--site-font-sans);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--site-header-height) + var(--space-4));
}

body {
  font-family: var(--site-font-sans);
  line-height: var(--site-leading-copy);
  color: var(--text-primary);
  background: var(--surface-page);
}

/* --------------------------------------------------------
   Type — Manrope for everything the page says. `balance` is the orphan
   fix; the scale never shrinks to fit.
   -------------------------------------------------------- */

h1, h2, h3, h4,
.ds-display, .ds-headline {
  font-family: var(--site-font-sans);
  font-weight: var(--site-weight-display);
  letter-spacing: var(--site-tracking-h2);
  text-wrap: balance;
}

h1,
.ds-display {
  font-size: var(--site-text-display);
  line-height: var(--site-leading-display);
  letter-spacing: var(--site-tracking-display);
}

h2,
.ds-headline {
  font-size: var(--site-text-h2);
  line-height: 1.2;
}

h3 {
  font-size: var(--site-text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--site-tracking-h3);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

/* A cluster page's title: long buyer titles at the home ceiling would wall of text. */
.page-hero .ds-display {
  font-size: var(--site-text-page-title);
  line-height: 1.1;
}

code, pre, kbd, .mono {
  font-family: var(--site-font-mono);
}

a {
  color: var(--text-link);
  text-underline-offset: var(--space-1);
}

/* T271: a prose link reads as a link without its colour — underline, offset, everywhere
   running text carries one. Nav, button, card and site-map links keep their own affordances. */
.prose a,
.section-lede a,
.fact-list a,
.fact-list-plain a,
.split a,
.demo-note a,
.features-pointer a,
.how-footnote a,
.oss-cla a,
.hero-note a,
.card p a,
.engine-strip-more a,
.footer-note a,
.faq details p a,
.caption a,
.support a,
.callout a,
.walkthrough p a,
.use-card p a,
.price-card p a,
.section-title p a,
.dark-band p a {
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

/* Muted prose inside a code chip's inset fill steps up, or the pair drops under 4.5:1. */
.how-footnote code,
.demo-note code,
.features-pointer code,
.footer-note code {
  color: var(--site-ink-2);
}

::selection {
  background: var(--site-accent);
  color: var(--site-accent-btn-ink);
}

button {
  font: inherit;
  cursor: pointer;
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: var(--space-0-5) solid var(--site-accent);
  outline-offset: var(--space-1);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------
   FLOW — two blocks of text never touch (owner, 2026-09-14; T266). base.css
   zeroes every margin; every sibling after the first, in the containers
   that carry running text, gets the body token. Component rules of equal
   or greater weight below still win.
   -------------------------------------------------------- */

.container > * + *,
.prose > * + *,
.split > :where(div) > * + * {
  margin-top: var(--space-4);
}

.feature-group > .prose + .prose {
  margin-top: var(--space-4);
}

/* The same default for the 145 structures — a walkthrough step's column, a use-case
   column, a section opener, a status box, a price card, the closing call, an example's
   panel — measured by the same walk (SiteRhythmBrowserTest's tight-pairs arm): 30 pairs
   of a headline on its lede or a caption on its table at 0px before this rule, 0 after.
   Component rules below of equal or greater weight still set their own rhythm. */
.grid-2 > div > * + *,
.split-hero > div > * + *,
.dark-grid > div > * + *,
.walkthrough > div > * + *,
.use-card > div > * + *,
.section-title > * + *,
.status-box > * + *,
.price-card > * + *,
.final-cta > * + *,
.use-visual > * + *,
.cost-row > * + *,
.knowledge-fact > * + *,
.knowledge-example > * + *,
.media-canvas > * + *,
.walk-card > * + *,
.panel > * + *,
.question > * + * {
  margin-top: var(--space-4);
}

.kicker + *,
.eyebrow + * {
  margin-top: 0;
}

/* The hidden attribute outranks any display a component sets (the tablist and the copy
   buttons ship hidden and the script reveals them). */
[hidden] {
  display: none !important;
}

.split blockquote + .fact-list {
  margin-top: var(--space-4);
}

.prose + .shot {
  margin-top: var(--space-4);
}

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 48rem) {
  .container {
    padding-inline: var(--space-6);
  }
}

/* --------------------------------------------------------
   Sections — open on the ground, separated by hairlines. `.border`
   draws the hairline above (the approved rhythm); `.band` is the
   specialist pages' soft slab; `.dark` the one navy panel per page.
   -------------------------------------------------------- */

.section {
  padding-block: var(--site-section-pad);
}

.section.border {
  border-top: var(--space-px) solid var(--site-hair);
}

.section.band {
  background: var(--site-band);
  border-block: var(--space-px) solid var(--site-hair);
  /* Quiet text on the tint steps up to ink-2 (Lighthouse contrast on the slab). */
  --text-muted: var(--site-ink-2);
}

.section.band + .section.band {
  border-top: 0;
}

.section.dark {
  margin-inline: clamp(8px, 2vw, 28px);
  border-radius: var(--site-radius-panel);
  background: var(--site-panel);
  border: var(--space-px) solid var(--site-panel-hair);
  color: var(--site-panel-ink);
}

.section.dark h2,
.section.dark h3 {
  color: var(--site-panel-ink);
}

.section.dark .kicker {
  color: var(--site-panel-accent);
}

.section.dark .section-lede,
.section.dark .prose p,
.section.dark .prose li,
.section.dark .demo-note {
  color: var(--site-panel-muted);
}

.section.dark a {
  color: var(--site-panel-accent);
}

/* ONE rule for the gap between a section's headline and its body (119 §A.1): an h2's
   first sibling gets the token; a .section-lede stays 16px under its h2 and passes the
   head gap on to ITS first sibling. SiteRhythmBrowserTest holds the two readings. */
.section .container > h2 + * {
  margin-top: var(--site-gap-head);
}

.section .container > h2 + .section-lede {
  margin-top: var(--space-4);
}

.section .container > .section-lede + * {
  margin-top: var(--site-gap-head);
}

.faq-group > h2 + *,
.faq-block > h2 + * {
  margin-top: var(--site-gap-head);
}

.section-lede {
  max-width: var(--site-measure);
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--site-text-lede);
  line-height: var(--site-leading-loose);
}

/* The section opener (the approved preview's eyebrow): a short accent rule and an
   uppercase heavy line in accent-ink. One rule serves the pre-145 `.kicker` and the
   preview's `.eyebrow` alike. */
.kicker,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  font-family: var(--site-font-sans);
  font-size: var(--text-xs);
  font-weight: var(--site-weight-heavy);
  letter-spacing: var(--site-tracking-caps);
  text-transform: uppercase;
  color: var(--site-accent-ink);
  margin-bottom: var(--space-3-5);
}

.kicker::before,
.eyebrow::before {
  content: "";
  width: var(--space-6);
  height: var(--space-0-5);
  background: var(--site-accent);
  flex: none;
}

.kicker:has(> .status:only-child)::before {
  content: none;
}

code {
  font-family: var(--site-font-mono);
  font-size: 0.9em;
  background: var(--surface-inset);
  padding-inline: var(--space-1);
  border-radius: var(--radius-sm);
}

/* Long machine tokens — s3 URIs, JDBC URLs, pipeline paths — break rather than widen the page. */
.prose code,
.fact-list code,
.fact-list-plain code {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------- */

.skip-link {
  position: fixed;
  inset-inline-start: var(--space-4);
  top: calc(-1 * var(--space-16));
  z-index: var(--z-toast);
  padding: var(--space-2-5) var(--space-4);
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  background: var(--surface-raised);
  color: var(--text-primary);
  border: var(--space-px) solid var(--border-default);
  border-radius: var(--radius-md);
  transition: top var(--duration-base) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-3);
  text-decoration: none;
}

/* --------------------------------------------------------
   Header + navigation — the Product disclosure (148), five pages, the
   docs, and the host-aware entry. Sticky, translucent; the hairline
   appears once the page has scrolled.
   -------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--site-ground) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--space-px) solid transparent;
  transition: border-color var(--duration-slow) var(--ease-out);
}

.site-header.scrolled {
  border-bottom-color: var(--site-hair);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--site-header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  margin-inline-end: auto;
  min-height: 2.75rem;
  font-size: var(--text-lg);
  font-weight: var(--site-weight-heavy);
  letter-spacing: var(--site-tracking-h3);
  color: var(--text-primary);
  text-decoration: none;
}

.brand:hover {
  color: var(--text-primary);
  text-decoration: none;
}

.brand svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
  flex: none;
  color: var(--site-accent);
}

.nav-wide {
  display: none;
  align-items: center;
  gap: var(--space-5);
}

/* 148: the Product disclosure's summary is a nav item like its sibling links — ONE rule for
   both, so the row's height, type and colour come from one place. Direct children only:
   the disclosure's panel hangs inside the row and its links are panel items, not row items. */
.nav-wide > a,
.nav-wide > .nav-menu > summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

/* The underline: a link draws it with ::after; the summary keeps ::after for its chevron
   and draws the same line with ::before. */
.nav-wide > a:not(.btn)::after,
.nav-wide > .nav-menu > summary::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-1-5);
  height: var(--space-0-5);
  background: var(--site-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--site-motion-fast) var(--site-motion-ease);
}

.nav-wide > a:not(.btn):hover,
.nav-wide > a:not(.btn):focus-visible,
.nav-wide > .nav-menu > summary:hover,
.nav-wide > .nav-menu > summary:focus-visible,
.nav-menu[open] > summary {
  color: var(--text-primary);
}

.nav-wide > a:not(.btn):hover::after,
.nav-wide > a:not(.btn):focus-visible::after,
.nav-wide > a[aria-current="page"]::after,
.nav-wide > .nav-menu > summary:hover::before,
.nav-wide > .nav-menu > summary:focus-visible::before,
.nav-menu[open] > summary::before {
  transform: scaleX(1);
}

.nav-wide > a[aria-current="page"] {
  color: var(--text-primary);
  font-weight: var(--weight-bold);
}

/* The summary wears the current-page mark when the page being read is inside its panel.
   `:has()` sits in rules of its own: a browser without it drops the whole selector list
   it appears in, and these are an enhancement over the link's own aria-current. */
.nav-menu:has(a[aria-current="page"]) > summary {
  color: var(--text-primary);
  font-weight: var(--weight-bold);
}

.nav-menu:has(a[aria-current="page"]) > summary::before {
  transform: scaleX(1);
}

.nav-wide > .btn {
  margin-inline-start: var(--space-2);
}

/* 148 — the Product disclosure (APG disclosure navigation: a <details> whose summary shows
   a list of links; not role="menu"). Open/close, focus and Enter/Space are the element's;
   site.js adds Escape, click-outside, one-open-at-a-time and a close on a breakpoint
   change. Click and keyboard only — no hover-to-open, so touch and pointer behave alike. */
.nav-menu {
  position: relative;
}

.nav-menu > summary {
  gap: var(--space-2);
  list-style: none;
  cursor: pointer;
}

.nav-menu > summary::-webkit-details-marker {
  display: none;
}

/* The chevron: a bordered square turned 45°, so its size and stroke are tokens, not an
   icon file; it turns over on open (motion.css zeroes the duration under reduced motion). */
.nav-menu > summary::after {
  content: "";
  width: var(--space-1-5);
  height: var(--space-1-5);
  margin-block-start: calc(-1 * var(--space-0-5));
  border-inline-end: var(--space-0-5) solid currentColor;
  border-block-end: var(--space-0-5) solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-out);
}

.nav-menu[open] > summary::after {
  margin-block-start: var(--space-0-5);
  transform: rotate(225deg);
}

/* The disclosure's panel hangs from its start edge; the phone menu's from its end edge. */
.nav-menu > .nav-panel {
  inset-inline-start: 0;
}

.nav-mobile {
  position: relative;
}

.nav-mobile > .nav-panel {
  inset-inline-end: 0;
  /* 148: with the Product group the phone menu is thirteen items; on the shortest
     supported viewport (320×568) that is taller than the screen, and a panel hanging
     from a sticky header cannot be scrolled INTO — so the panel scrolls itself. */
  max-height: calc(100vh - var(--site-header-height) - var(--space-4));
  max-height: calc(100dvh - var(--site-header-height) - var(--space-4));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-mobile summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-md);
  background: var(--surface-default);
  cursor: pointer;
}

.nav-mobile summary::-webkit-details-marker {
  display: none;
}

.nav-mobile summary:hover,
.nav-mobile[open] summary {
  background: var(--surface-hover);
}

.nav-mobile summary svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

/* The dropped panel — ONE definition shared by the phone menu and the Product disclosure
   (148); which edge it hangs from is the only thing each parent sets. */
.nav-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 15rem;
  padding: var(--space-3);
  gap: var(--space-1);
  background: var(--surface-raised);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--site-shadow-lift);
}

.nav-panel a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--space-3);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
}

.nav-panel a:hover,
.nav-panel a:focus-visible {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.nav-panel a[aria-current="page"] {
  color: var(--text-primary);
  background: var(--site-accent-soft);
  font-weight: var(--weight-bold);
}

.nav-panel .btn {
  margin-top: var(--space-2);
  justify-content: center;
}

/* 148 — the phone menu's Product group: a labelled run of the same seven, the label a
   muted eyebrow in the panel's own rhythm, a hairline closing the group. */
.nav-panel .nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block-end: var(--space-2);
  margin-block-end: var(--space-1);
  border-block-end: var(--space-px) solid var(--site-hair);
}

.nav-panel .menu-heading {
  margin: var(--space-1) 0 0;
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The breakpoint is `--site-nav-wide-min` (token block) — repeated here by hand because a
   media query cannot read a custom property; SitePublicPresentationGuardTest holds the two
   equal. */
@media (min-width: 64rem) {
  .nav-wide {
    display: flex;
  }

  .nav-mobile {
    display: none;
  }
}

/* --------------------------------------------------------
   Buttons — `.btn` is the site's control (every template uses it); the
   approved preview's shape: a 10px radius, the accent primary with navy
   ink, a hairline secondary, a light variant for the navy panel. Hover
   lifts, focus shows the ring, :active presses (motion block below).
   -------------------------------------------------------- */

.btn-row,
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2-5) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--site-weight-display);
  color: var(--text-primary);
  background: var(--site-surface);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--space-2-5);
  text-decoration: none;
  transition: transform var(--site-motion-fast) var(--site-motion-ease),
              border-color var(--site-motion-fast),
              color var(--site-motion-fast),
              background-color var(--site-motion-fast);
}

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

.btn-primary {
  background: var(--site-accent);
  border-color: var(--site-accent);
  color: var(--site-accent-btn-ink);
}

.btn-primary:hover {
  background: var(--site-accent-soft);
  color: var(--site-accent-btn-ink);
  border-color: var(--site-accent);
}

.btn-primary code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

.btn-secondary {
  background: var(--site-surface);
  color: var(--text-primary);
}

.btn-light {
  background: var(--site-surface);
  color: var(--site-panel);
  border-color: var(--site-surface);
}

.btn-light:hover {
  color: var(--site-panel);
  background: var(--site-accent-soft);
}

.btn span[aria-hidden] {
  transition: transform var(--site-motion-fast) var(--site-motion-ease);
}

.btn-icon {
  width: var(--icon-md);
  height: var(--icon-md);
}

/* A text link with a moving arrow — the section's onward path. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  font-weight: var(--site-weight-display);
  color: var(--site-accent-ink);
}

.text-link span {
  transition: transform var(--site-motion-fast) var(--site-motion-ease);
}

/* --------------------------------------------------------
   Code blocks + copy button (the specialist pages' blocks and the
   quickstart's command). Buttons ship `hidden`; site.js reveals them.
   -------------------------------------------------------- */

.code-block {
  position: relative;
  margin-top: var(--space-6);
  background: var(--surface-inset);
  border: var(--space-px) solid var(--border-default);
  border-radius: var(--radius-lg);
}

.code-block pre {
  overflow-x: auto;
  padding: var(--space-4);
  padding-inline-end: var(--space-16);
  font-family: var(--site-font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}

.code-block code {
  background: transparent;
  padding-inline: 0;
}

.copy-btn {
  position: absolute;
  top: var(--space-2);
  inset-inline-end: var(--space-2);
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: var(--surface-raised);
  border: var(--space-px) solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.copy-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.install {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3-5);
  padding: var(--space-2-5) var(--space-2-5) var(--space-2-5) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--site-panel);
  color: var(--site-panel-ink);
  font-family: var(--site-font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
}

.install code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

.install .copy-btn {
  position: static;
  min-height: 2rem;
  min-width: 0;
  padding-inline: var(--space-2-5);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--site-panel-ink);
  background: var(--site-panel-2);
  border: var(--space-px) solid var(--site-panel-hair);
  border-radius: var(--radius-base);
}

.install .copy-btn:hover {
  background: var(--site-panel-hair);
  color: var(--site-panel-ink);
  border-color: var(--site-panel-hair);
}

/* --------------------------------------------------------
   Cards — as tall as their text; the approved lift on hover.
   Padding is the rhythm token (24px from 64rem, 20px below;
   SiteRhythmBrowserTest holds it).
   -------------------------------------------------------- */

.features-grid,
.grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-md);
  margin-top: var(--space-8);
}

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

@media (min-width: 64rem) {
  .features-grid,
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-lg);
  }
}

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

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

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

.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

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

.card {
  display: flex;
  flex-direction: column;
  /* 12px, the approved preview's title → body gap. Not the 8px design-system --gap-sm: with
     Manrope's metrics the rendered h3 → p distance rounded to 7.99px on /security's cards
     at 1440 and failed the tight-pairs floor (gate run 2 on e7d49c13); a value on the floor
     is a value that fails by rounding. */
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--site-surface);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-xl);
  transition: border-color var(--site-motion-fast) var(--site-motion-ease),
              transform var(--site-motion-fast) var(--site-motion-ease),
              box-shadow var(--site-motion-fast) var(--site-motion-ease);
}

@media (min-width: 64rem) {
  .card {
    padding: var(--space-6);
  }
}

.card h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.card p {
  font-size: var(--text-sm);
  line-height: var(--site-leading-loose);
  color: var(--text-secondary);
}

.card > a,
.card-link {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--site-weight-display);
  color: var(--site-accent-ink);
}

.glyph,
.card-icon {
  width: var(--icon-xl);
  height: var(--icon-xl);
  color: var(--site-accent);
}

/* The approved preview's icon tile: a tinted square holding a 24px stroke icon. */
.card-icon {
  width: var(--space-10);
  height: var(--space-10);
  display: grid;
  place-items: center;
  background: var(--site-accent-soft);
  border-radius: var(--space-2-5);
  color: var(--site-accent-ink);
  transition: transform var(--site-motion-fast) var(--site-motion-ease);
}

.card-icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.card-number {
  font-family: var(--site-font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--site-tracking-tag);
  color: var(--site-accent-ink);
}

.feature-group + .feature-group {
  margin-top: var(--space-8);
}

.group-title {
  font-size: var(--text-xs);
  font-weight: var(--site-weight-heavy);
  letter-spacing: var(--site-tracking-caps);
  text-transform: uppercase;
  color: var(--site-accent-ink);
  margin-top: var(--space-8);
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.feature-group .features-grid {
  margin-top: var(--space-4);
  align-items: start;
}

.features-pointer {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --------------------------------------------------------
   Tags, status chips, datelines
   -------------------------------------------------------- */

.tag,
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-0-5) var(--space-2);
  font-family: var(--site-font-sans);
  font-size: var(--site-text-tag);
  font-weight: var(--site-weight-display);
  letter-spacing: var(--site-tracking-tag);
  text-transform: uppercase;
  color: var(--text-secondary);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-sm);
  line-height: var(--leading-normal);
}

.tag.live,
.status-shipped {
  background: var(--site-teal-soft);
  color: var(--site-teal);
  border-color: var(--site-teal-soft);
}

.status .dateline {
  margin-inline-start: var(--space-2);
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
}

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

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--site-weight-heavy);
  letter-spacing: var(--site-tracking-caps);
  text-transform: uppercase;
  color: var(--site-accent-ink);
  background: var(--site-accent-soft);
  border: var(--space-px) solid var(--site-accent-line);
  border-radius: var(--radius-pill);
}

.subtle-label {
  display: block;
  font-size: var(--site-text-micro);
  font-weight: var(--site-weight-display);
  letter-spacing: var(--site-tracking-caps);
  text-transform: uppercase;
  color: var(--site-accent-ink);
}

.caption {
  margin-top: var(--space-3);
  font-size: var(--site-text-micro);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

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

/* --------------------------------------------------------
   HOME — the outcome-led hero: copy on the left, the worked example on
   the right (a tabbed panel over the recorded demo run), the engine
   strip beneath. Nothing here is a screenshot.
   -------------------------------------------------------- */

.hero {
  padding-block: clamp(48px, 7vw, 72px) clamp(40px, 5vw, 52px);
}

.home-hero .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 64rem) {
  .home-hero .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: clamp(32px, 5vw, 52px);
  }
}

.hero-copy {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.hero-copy h1 span {
  color: var(--site-accent-ink);
}

.hero-sub,
.intro {
  max-width: var(--site-measure-hero);
  font-size: var(--text-lg);
  line-height: var(--site-leading-copy);
  color: var(--text-secondary);
}

.hero-note,
.support {
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.hero-note b {
  color: var(--text-secondary);
  font-weight: var(--weight-semibold);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* The worked example — a raised panel with a title bar, the question, the tabs and the panels. */
.demo {
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--site-radius-panel);
  background: var(--site-surface);
  box-shadow: var(--site-shadow-lift);
  overflow: hidden;
}

.demo-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--space-px) solid var(--site-hair);
  font-size: var(--text-xs);
}

.demo-head strong {
  font-weight: var(--site-weight-heavy);
}

.question {
  padding: var(--space-5) var(--space-6) var(--space-4);
}

.question .small {
  font-size: var(--site-text-micro);
  letter-spacing: var(--site-tracking-caps);
  text-transform: uppercase;
}

.question p {
  margin-top: var(--space-1-5);
  font-size: var(--text-xl);
  font-weight: var(--site-weight-display);
  line-height: var(--leading-snug);
  letter-spacing: var(--site-tracking-h3);
}

.tabs {
  display: flex;
  gap: var(--space-5);
  padding: 0 var(--space-6);
  border-bottom: var(--space-px) solid var(--site-hair);
}

.tabs button {
  padding: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  background: none;
  border: 0;
  border-bottom: var(--space-0-5) solid transparent;
  border-radius: 0;
  transition: color var(--site-motion-fast), border-color var(--site-motion-fast);
}

.tabs button:hover {
  color: var(--text-primary);
}

.tabs button[aria-selected="true"] {
  color: var(--site-accent-ink);
  font-weight: var(--site-weight-heavy);
  border-bottom-color: var(--site-accent);
}

.panel {
  padding: var(--space-5) var(--space-6);
  min-height: 17.5rem;
}

.panel[hidden] {
  display: none;
}

/* No JS: the tablist stays hidden and the three panels stack, each under its own label. */
.panel-label {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.tabs:not([hidden]) ~ .panel > .panel-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.chart-title {
  margin: 0 0 var(--space-3-5);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* The bar chart: label / track / value, one grid row per borough; the bar itself is an
   SVG whose width attribute is the share from the demo block — data, not a style. */
.bar-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 6.5rem;
  gap: var(--space-3);
  align-items: center;
  margin: var(--space-3) 0;
  font-size: var(--text-xs);
}

.bar-track {
  display: block;
  width: 100%;
  height: var(--space-3);
  background: var(--site-ground);
  border-radius: var(--space-0-5);
  overflow: hidden;
}

.bar-fill {
  fill: var(--site-accent);
  transform-origin: left center;
}

.bar-row strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  white-space: nowrap;
}

.chart-note {
  margin: var(--space-4) 0 0;
  font-size: var(--site-text-micro);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.code {
  font-family: var(--site-font-mono);
  font-size: var(--site-text-micro);
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.panel .code {
  padding: var(--space-4);
  background: var(--site-ground);
  border-radius: var(--radius-md);
}

.evidence {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
}

.evidence li {
  margin-bottom: var(--space-3);
  color: var(--text-secondary);
}

.demo-foot {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3-5) var(--space-6);
  border-top: var(--space-px) solid var(--site-hair);
  background: var(--site-ground);
  font-size: var(--site-text-micro);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.demo-foot b {
  color: var(--text-primary);
}

/* The engine strip under the hero — the fold's proof line. */
.compat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5) 0;
  border-top: var(--space-px) solid var(--site-hair);
  border-bottom: var(--space-px) solid var(--site-hair);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.compat .small {
  margin-right: auto;
  font-weight: var(--site-weight-heavy);
  letter-spacing: var(--site-tracking-caps);
  text-transform: uppercase;
}

.compat strong {
  font-size: var(--text-sm);
  font-weight: var(--site-weight-emphasis);
  color: var(--text-primary);
}

.compat a {
  font-weight: var(--site-weight-display);
}

@media (max-width: 47.99rem) {
  .compat .small {
    flex-basis: 100%;
  }
}

/* Section titles — the approved preview's opener block: eyebrow, h2, one paragraph. */
.section-title {
  max-width: var(--site-measure);
  margin-bottom: var(--space-8);
}

.section-title > p,
.lede {
  font-size: var(--site-text-lede);
  line-height: var(--site-leading-loose);
  color: var(--text-secondary);
}

.section-title h2 + p {
  margin-top: var(--space-4);
}

/* The video slot and the screenshot slots — clearly labelled placeholders with a reserved
   aspect ratio, no fake control, no invented capture. When a real asset arrives the frame
   keeps its layout and the media replaces the canvas (handback: capture brief). */
.demo-section .grid-2 {
  gap: var(--space-10);
}

.demo-sequence {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0;
}

.demo-sequence li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2-5) 0;
  color: var(--text-secondary);
}

.demo-sequence span {
  font-family: var(--site-font-mono);
  font-size: var(--text-xs);
  color: var(--site-accent-ink);
}

.media-frame {
  position: relative;
  margin: 0;
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--site-radius-panel);
  background: var(--site-surface);
  overflow: hidden;
  transition: transform var(--site-motion-fast) var(--site-motion-ease),
              border-color var(--site-motion-fast),
              box-shadow var(--site-motion-fast);
}

.media-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3-5) var(--space-5);
  border-bottom: var(--space-px) solid var(--site-hair);
  font-size: var(--site-text-micro);
  color: var(--text-muted);
}

.media-bar .tag {
  margin-left: auto;
}

.media-dots {
  letter-spacing: var(--site-tracking-caps);
  color: var(--site-hair-2);
  white-space: nowrap;
}

.media-canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 14rem;
  padding: var(--space-6);
  text-align: center;
  background: linear-gradient(145deg, var(--site-surface), var(--site-accent-soft));
}

.media-video {
  aspect-ratio: 16 / 9;
}

.media-symbol {
  display: grid;
  place-items: center;
  width: var(--space-14);
  height: var(--space-14);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-xl);
  background: var(--site-surface);
  color: var(--site-accent-ink);
  font-size: var(--text-3xl);
}

.media-canvas h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-xl);
}

.media-canvas p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.media-frame figcaption {
  padding: var(--space-4) var(--space-5);
  border-top: var(--space-px) solid var(--site-hair);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.media-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}

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

  .media-gallery .media-bar .tag {
    margin-left: 0;
  }
}

/* The learned-context example: two illustrative facts, one asserted, one observed. */
.knowledge .grid-2 {
  align-items: center;
}

.knowledge-example {
  min-width: 0;
}

.knowledge-fact {
  padding: var(--space-5) 0;
  border-bottom: var(--space-px) solid var(--site-hair);
}

.knowledge-fact:last-of-type {
  border-bottom: 0;
}

.knowledge-fact h3 {
  margin: var(--space-3) 0;
  font-size: var(--text-lg);
}

.knowledge-fact p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.knowledge-fact .tag {
  display: inline-flex;
}

/* The navy band — the one dark panel a page carries, with its proof list. */
.dark-band {
  padding: var(--space-12);
  margin: 0;
  border-radius: var(--site-radius-panel);
  background: var(--site-panel);
  color: var(--site-panel-ink);
}

.dark-band .eyebrow,
.dark-band .kicker {
  color: var(--site-panel-accent);
}

.dark-band .eyebrow::before,
.dark-band .kicker::before {
  background: var(--site-panel-accent);
}

.dark-band h2 {
  color: var(--site-panel-ink);
}

.dark-band .lede,
.dark-band p {
  color: var(--site-panel-muted);
}

.dark-band a {
  color: var(--site-panel-accent);
}

.dark-band .btn-light {
  color: var(--site-panel);
}

.dark-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 48rem) {
  .dark-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(32px, 5vw, 60px);
  }
}

.proof-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.proof-list li {
  padding: var(--space-4) 0;
  border-bottom: var(--space-px) solid var(--site-panel-hair);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--site-panel-muted);
}

.proof-list li:last-child {
  border-bottom: 0;
}

.proof-list b {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-base);
  color: var(--site-panel-ink);
}

.proof-list b::before {
  content: "\2713";
  margin-right: var(--space-2-5);
  color: var(--site-panel-accent);
}

@media (max-width: 47.99rem) {
  .dark-band {
    padding: var(--space-7) var(--space-5);
  }
}

/* Available today / planned. */
.status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

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

.status-box {
  padding: var(--space-6);
  background: var(--site-surface);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-xl);
}

.status-box h3 {
  margin: var(--space-3) 0;
  font-size: var(--text-lg);
}

.status-box ul {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  line-height: 2;
  color: var(--text-secondary);
}

.status-box > a {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--site-weight-display);
}

/* The closing call. */
.final-cta {
  padding: var(--space-14) var(--space-7);
  margin: 0 0 var(--space-16);
  text-align: center;
  background: var(--site-accent-soft);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--site-radius-panel);
}

.final-cta h2 {
  max-width: 23ch;
  margin: 0 auto var(--space-4);
}

.final-cta p {
  max-width: 55ch;
  margin: 0 auto var(--space-6);
  color: var(--text-secondary);
}

.final-cta .actions {
  justify-content: center;
}

@media (max-width: 47.99rem) {
  .final-cta {
    padding: var(--space-9) var(--space-5);
    margin-bottom: var(--space-10);
  }

  .final-cta .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------
   Page hero (cluster pages and the redesigned core pages) and breadcrumbs
   -------------------------------------------------------- */

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

.breadcrumbs ol {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-4);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

@media (min-width: 48rem) {
  .breadcrumbs ol {
    padding-inline: var(--space-6);
  }
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--site-hair-2);
}

.breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--text-primary);
}

.breadcrumbs [aria-current="page"] {
  color: var(--text-secondary);
}

.page-hero {
  padding-block: clamp(40px, 6vw, 60px) clamp(36px, 5vw, 48px);
}

.page-hero .ds-display {
  max-width: 22ch;
}

.page-hero .section-lede,
.page-hero .lede {
  max-width: var(--site-measure);
  font-size: var(--text-lg);
}

.page-hero .btn-row,
.page-hero .actions {
  margin-top: var(--space-6);
}

.split-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 64rem) {
  .split-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: clamp(32px, 5vw, 60px);
  }
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.pill-list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: var(--site-surface);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-base);
  text-decoration: none;
  transition: color var(--site-motion-fast), border-color var(--site-motion-fast);
}

.pill-list a:hover {
  color: var(--site-accent-ink);
  border-color: var(--site-accent);
}

/* The mini flow — databases → reviewed pipeline → application or BI tool. */
.mini-flow {
  padding: var(--space-7);
  background: var(--site-panel);
  color: var(--site-panel-ink);
  border-radius: var(--site-radius-panel);
}

.flow-item {
  padding: var(--space-4);
  border: var(--space-px) solid var(--site-panel-hair);
  border-radius: var(--space-2-5);
  font-size: var(--text-sm);
}

.flow-item b {
  display: block;
}

.flow-item small {
  font-size: var(--site-text-micro);
  color: var(--site-panel-muted);
}

.flow-item.accent {
  border-color: var(--site-accent);
}

.flow-arrow {
  margin: var(--space-2) 0;
  text-align: center;
  color: var(--site-panel-accent);
}

/* --------------------------------------------------------
   HOW IT WORKS — the walkthrough (01–04), the walk cards, the quickstart.
   -------------------------------------------------------- */

.walkthrough {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
  padding: var(--space-10) 0;
  border-top: var(--space-px) solid var(--site-hair);
}

@media (min-width: 64rem) {
  .walkthrough {
    grid-template-columns: var(--space-16) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
    padding: var(--space-12) 0;
  }
}

.walk-number {
  font-size: var(--text-3xl);
  font-weight: var(--site-weight-emphasis);
  line-height: 1;
  color: var(--site-accent-ink);
}

.walkthrough h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--site-text-h2-small);
  letter-spacing: var(--site-tracking-h3);
}

.walkthrough > div > p {
  color: var(--text-secondary);
}

.walkthrough > div > p + p {
  margin-top: var(--space-4);
}

.walk-card {
  grid-column: 2;
  padding: var(--space-6);
  background: var(--site-surface);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-xl);
}

@media (min-width: 64rem) {
  .walk-card {
    grid-column: auto;
  }
}

.walk-card .code {
  padding: var(--space-4);
  background: var(--site-ground);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}

.connection-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--space-px) solid var(--site-hair);
  font-size: var(--text-sm);
}

.connection-row:last-of-type {
  border-bottom: 0;
}

.connection-row span {
  color: var(--text-secondary);
}

.walk-card .quote {
  font-size: var(--text-xl);
  font-weight: var(--site-weight-emphasis);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}

.check-row {
  display: flex;
  gap: var(--space-2-5);
  padding: var(--space-2-5) 0;
  font-size: var(--text-sm);
}

.check-row span {
  color: var(--site-teal);
}

.callout {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-left: var(--space-1) solid var(--site-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--site-accent-soft);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.quickstart {
  padding: var(--space-6);
  background: var(--site-surface);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--site-radius-panel);
}

@media (min-width: 48rem) {
  .quickstart {
    padding: var(--space-10);
  }
}

.quickstart .grid-2 {
  align-items: start;
}

.quickstart ol {
  padding-left: var(--space-5);
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.quickstart li {
  padding-bottom: var(--space-3);
}

.quick-code {
  position: relative;
  padding: var(--space-12) var(--space-6) var(--space-6);
  background: var(--site-panel);
  color: var(--site-panel-ink);
  border-radius: var(--radius-lg);
}

.quick-code .code {
  font-size: var(--text-xs);
}

.quick-code .copy-btn {
  top: var(--space-3);
  inset-inline-end: var(--space-3);
  min-height: 2.25rem;
  min-width: 0;
  color: var(--site-panel-ink);
  background: var(--site-panel);
  border-color: var(--site-panel-hair);
}

.quick-code .copy-btn:hover {
  background: var(--site-panel-2);
  color: var(--site-panel-ink);
}

/* The engineering depth's own opener: a hairline and a heavier kicker. */
.depth-intro {
  padding-top: var(--space-10);
  border-top: var(--space-px) solid var(--site-hair);
}

.jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.jump-list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: var(--site-surface);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-base);
  text-decoration: none;
}

.jump-list a:hover {
  color: var(--site-accent-ink);
  border-color: var(--site-accent);
}

/* --------------------------------------------------------
   USE CASES — one worked example per audience, the illustration beside it.
   -------------------------------------------------------- */

.use-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-10) 0;
  border-top: var(--space-px) solid var(--site-hair);
}

@media (min-width: 64rem) {
  .use-card {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 44px);
  }
}

.use-card h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-3xl);
}

.use-card > div > p {
  color: var(--text-secondary);
}

.use-card > div > p + p {
  margin-top: var(--space-4);
}

.output-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.output-chips span {
  padding: var(--space-1) var(--space-2-5);
  font-size: var(--site-text-micro);
  font-weight: var(--weight-medium);
  color: var(--site-accent-ink);
  background: var(--site-accent-soft);
  border-radius: var(--radius-sm);
}

.use-visual {
  padding: var(--space-6);
  background: var(--site-surface);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-xl);
}

@media (min-width: 48rem) {
  .use-visual {
    padding: var(--space-7);
  }
}

.use-visual .subtle-label {
  color: var(--text-muted);
}

.use-visual h3 {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
}

.mini-table {
  width: 100%;
  margin: var(--space-4) 0;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.mini-table th {
  text-align: left;
  font-size: var(--site-text-micro);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}

.mini-table td,
.mini-table th {
  padding: var(--space-3) 0;
  border-bottom: var(--space-px) solid var(--site-hair);
}

.mini-table td:last-child,
.mini-table th:last-child {
  text-align: right;
}

.mini-table strong {
  color: var(--site-teal);
}

.api-demo {
  margin: var(--space-4) 0;
  padding: var(--space-6);
  background: var(--site-panel);
  color: var(--site-panel-ink);
  border-radius: var(--radius-lg);
}

.api-demo .code {
  font-size: var(--text-xs);
}

.metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3-5) 0;
  border-bottom: var(--space-px) solid var(--site-hair);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.metric-row b {
  font-size: var(--text-xl);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------
   PRICING — the $0 card and the costs you provide.
   -------------------------------------------------------- */

.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: stretch;
  margin-top: var(--space-8);
}

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

.price-card {
  padding: var(--space-7);
  background: var(--site-surface);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--site-radius-panel);
}

@media (min-width: 48rem) {
  .price-card {
    padding: var(--space-10);
  }
}

.price-card.featured {
  border-top: var(--space-1) solid var(--site-accent);
  box-shadow: var(--site-shadow-lift);
}

.price {
  margin: var(--space-5) 0 var(--space-1-5);
  font-size: var(--site-text-price);
  font-weight: var(--site-weight-display);
  line-height: 1.1;
  letter-spacing: var(--site-tracking-display);
}

.price small {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--text-secondary);
}

.price-card h2 {
  font-size: var(--site-text-h2-small);
  letter-spacing: var(--site-tracking-h3);
}

.price-card > p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.price-card .btn {
  width: 100%;
  margin-top: var(--space-6);
}

.plain-list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}

.plain-list li {
  padding: var(--space-2-5) 0;
  border-bottom: var(--space-px) solid var(--site-hair);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.plain-list li:last-child {
  border-bottom: 0;
}

.cost-row {
  padding: var(--space-5) 0;
  border-bottom: var(--space-px) solid var(--site-hair);
}

.cost-row:last-child {
  border-bottom: 0;
}

.cost-row h3 {
  margin: 0 0 var(--space-2-5);
  font-size: var(--text-base);
}

.cost-row p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* --------------------------------------------------------
   EXPLORE — the directory: a two-column grid of resource links.
   -------------------------------------------------------- */

.resource-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3-5);
  margin-top: var(--space-8);
  padding: 0;
  list-style: none;
}

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

.resource-grid a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--site-surface);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform var(--site-motion-fast) var(--site-motion-ease),
              border-color var(--site-motion-fast),
              box-shadow var(--site-motion-fast);
}

.resource-grid a span {
  color: var(--site-accent-ink);
  transition: transform var(--site-motion-fast) var(--site-motion-ease);
}

/* --------------------------------------------------------
   FAQ — native <details> as hairline rows, the answer in the reading measure.
   The same list renders the FAQPage JSON-LD.
   -------------------------------------------------------- */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--gap-xl);
  margin-top: var(--space-6);
  max-width: 53rem;
}

@media (min-width: 64rem) {
  .faq-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}

.faq details {
  padding-block: var(--space-4);
  border-bottom: var(--space-px) solid var(--site-hair);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-md);
  align-items: baseline;
  min-height: 2.75rem;
  list-style: none;
  cursor: pointer;
  font-size: var(--site-text-lede);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

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

.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--site-font-mono);
  color: var(--site-accent);
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq details > p,
.faq details > ul {
  margin: var(--space-3) 0 0;
  max-width: 68ch;
  font-size: var(--text-sm);
  line-height: var(--site-leading-loose);
  color: var(--text-secondary);
}

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

.faq-group h2 {
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------
   The specialist pages' structures, in the same language.
   -------------------------------------------------------- */

.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-xl);
  margin-top: var(--space-8);
}

@media (min-width: 64rem) {
  .how-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.steps {
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-inline-start: var(--space-12);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  font-size: var(--text-sm);
  font-weight: var(--site-weight-heavy);
  color: var(--site-accent-ink);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-full);
}

.steps h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.steps p {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.how-figure {
  margin: 0;
}

.how-footnote {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.diagram {
  width: 100%;
  height: auto;
  max-width: 34rem;
  margin-inline: auto;
  color: var(--text-primary);
}

.dg-box {
  fill: var(--surface-default);
  stroke: var(--text-muted);
  stroke-width: 1.5;
}

.dg-box-accent {
  fill: var(--accent-info-bg);
  stroke: var(--accent-info);
  stroke-width: 1.5;
}

.dg-label {
  fill: var(--text-primary);
  font-family: var(--site-font-sans);
  font-weight: var(--weight-semibold);
}

.dg-sub {
  fill: var(--text-secondary);
  font-family: var(--site-font-sans);
}

.dg-arrow {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.5;
}

.dg-arrowhead {
  fill: var(--text-muted);
}

.fact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.fact-list li {
  position: relative;
  padding-inline-start: var(--space-6);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.fact-list li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  color: var(--site-teal);
  font-weight: var(--weight-semibold);
}

.fact-list strong {
  color: var(--text-primary);
}

.fact-list-plain li::before {
  content: "\2014";
  color: var(--text-muted);
  font-weight: inherit;
}

.fact-list + p {
  margin-top: var(--space-5);
}

.ds-headline + .fact-list,
.ds-headline + .features-grid,
.ds-headline + .steps,
.ds-headline + .doc-index,
.ds-headline + .engine-links,
.ds-headline + .code-block {
  margin-top: var(--space-5);
}

.demo-note {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.shots {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-lg);
  margin-top: var(--space-8);
}

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

.shot {
  margin: 0;
}

.shot--wide {
  grid-column: 1 / -1;
}

.shot .dag-embed {
  margin-top: var(--space-3);
  overflow-x: auto;
}

.shot img {
  border: var(--space-px) solid var(--border-subtle);
  border-radius: var(--radius-md);
}

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

.sec-list {
  margin-top: var(--space-8);
  max-width: var(--site-measure);
}

.oss-cla {
  margin-top: var(--space-4);
  max-width: var(--site-measure);
  color: var(--text-secondary);
}

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

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

.split > div {
  padding: var(--space-5);
  background: var(--surface-default);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-xl);
}

.split h3 {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin: 0 0 var(--space-3);
}

.split ul {
  margin: 0;
  padding-inline-start: var(--space-5);
  color: var(--text-secondary);
}

.split li {
  margin-block: var(--space-2);
}

.split li b {
  color: var(--text-primary);
}

.prose {
  max-width: var(--site-measure);
}

.prose p, .prose li {
  color: var(--text-secondary);
  line-height: var(--site-leading-loose);
}

.prose h2 {
  margin-top: var(--space-10);
}

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

.engine-strip .container > h2 {
  margin-top: 0;
}

.engine-links {
  list-style: none;
  margin-top: var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.engine-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--space-4);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-base);
  background: var(--site-surface);
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color var(--site-motion-fast), color var(--site-motion-fast);
}

.engine-links a:hover {
  border-color: var(--site-accent);
  color: var(--site-accent-ink);
}

.engine-strip-more {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
}

.engine-grid {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

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

.engine-card {
  padding: var(--space-4);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.engine-card h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

.engine-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

.engine-card .engine-card-note {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.facts-table {
  margin-top: var(--space-6);
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  display: block;
  overflow-x: auto;
}

.facts-table caption {
  caption-side: bottom;
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-align: left;
}

.facts-table th,
.facts-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--space-px) solid var(--site-hair);
  text-align: left;
  vertical-align: top;
}

.facts-table th[scope="row"] {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.facts-table thead th {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.tool-list {
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tool-list code {
  font-size: var(--text-xs);
}

.roadmap-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-lg);
  margin-top: var(--space-8);
}

@media (min-width: 64rem) {
  .roadmap-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }
}

.roadmap-hero {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--space-5);
  background: var(--surface-default);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-lg);
}

.roadmap-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-warning);
  background: var(--accent-warning-bg);
  border-radius: var(--radius-pill);
}

.roadmap-hero h3 {
  font-size: var(--text-xl);
}

.roadmap-hero p {
  color: var(--text-secondary);
}

.roadmap-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.roadmap-item {
  padding: var(--space-4) var(--space-5);
  background: var(--surface-default);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-lg);
}

.roadmap-item h3 {
  font-size: var(--text-base);
}

.roadmap-item p {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* The proof strip (the specialist pages that still carry one). */
.strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--site-surface);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.strip > div {
  display: grid;
  gap: var(--space-1-5);
  align-content: start;
  padding: var(--space-5) var(--space-6);
  border-top: var(--space-px) solid var(--site-hair);
}

.strip > div:first-child {
  border-top: 0;
}

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

  .strip > div {
    border-top: 0;
    border-inline-start: var(--space-px) solid var(--site-hair);
  }

  .strip > div:nth-child(3n + 1) {
    border-inline-start: 0;
  }

  .strip > div:nth-child(n + 4) {
    border-top: var(--space-px) solid var(--site-hair);
  }
}

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

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

  .strip > div,
  .strip > div:nth-child(n + 4) {
    border-top: 0;
    border-inline-start: var(--space-px) solid var(--site-hair);
  }

  .strip > div:first-child {
    border-inline-start: 0;
  }
}

.strip-k {
  font-size: var(--site-text-micro);
  font-weight: var(--site-weight-heavy);
  letter-spacing: var(--site-tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.strip-v {
  font-size: var(--text-2xl);
  font-weight: var(--site-weight-display);
  letter-spacing: var(--site-tracking-h3);
  line-height: 1.1;
  color: var(--text-primary);
}

.strip-v small,
.strip-sub {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--text-muted);
}

/* --------------------------------------------------------
   Public documentation pages — the site chrome around the rendered spec;
   scoped to `.doc-section` so the in-app viewer's typography is untouched.
   -------------------------------------------------------- */

.doc-section {
  border-top: 0;
  padding-block: var(--space-8) var(--space-12);
}

.doc-section .doc-body {
  overflow-wrap: break-word;
  font-size: var(--text-base);
  max-width: 48rem;
}

.doc-section .doc-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.doc-section .doc-body th,
.doc-section .doc-body td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--space-px) solid var(--site-hair);
  text-align: left;
  vertical-align: top;
  font-size: var(--text-sm);
}

.doc-section .doc-body thead th {
  background: var(--site-surface-2);
  font-weight: var(--weight-semibold);
}

.doc-section .doc-body pre {
  padding: var(--space-4);
  background: var(--site-panel);
  color: var(--site-panel-ink);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.doc-section .doc-body pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

.doc-section .doc-body h1 {
  font-size: var(--site-text-page-title);
  line-height: 1.1;
}

.doc-section .doc-body h2 {
  font-size: var(--site-text-h2-small);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--space-px) solid var(--site-hair);
}

.doc-section .doc-body h3 {
  font-size: var(--text-xl);
  margin-top: var(--space-8);
}

.doc-section .doc-body h4 {
  font-size: var(--text-base);
}

.doc-section .doc-body :is(h1, h2, h3, h4, h5, h6) {
  scroll-margin-top: calc(var(--site-header-height) + var(--space-4));
}

.doc-section .doc-body a {
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.doc-section .doc-body blockquote {
  padding: var(--space-3) var(--space-5);
  border-left: var(--space-1) solid var(--site-accent);
  background: var(--site-accent-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-secondary);
}

.doc-source {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--space-px) solid var(--site-hair);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.doc-index {
  list-style: none;
  margin-top: var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.doc-index li {
  padding-bottom: var(--space-4);
  border-bottom: var(--space-px) solid var(--site-hair);
}

.doc-index a {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.doc-index-desc {
  display: block;
  margin-top: var(--space-1);
  max-width: var(--site-measure);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------
   Footer — the brand line, the primary links, the site map, the beta line.
   -------------------------------------------------------- */

.site-footer {
  margin-top: var(--space-8);
  padding-block: var(--space-10) var(--space-8);
  border-top: var(--space-px) solid var(--site-hair);
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 48rem) {
  .footer-top {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-12);
  }
}

.footer-brand {
  max-width: 34ch;
}

.footer-brand .brand {
  margin-inline-end: 0;
}

.footer-brand p {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--text-secondary);
}

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

.footer-signals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.nav-github {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.nav-github:hover {
  border-color: var(--site-accent);
  color: var(--text-primary);
}

.nav-star-count {
  font-family: var(--site-font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--site-accent-ink);
}

.nav-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  font-family: var(--site-font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--site-accent-ink);
  background: var(--site-accent-soft);
  border: var(--space-px) solid var(--site-accent-line);
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
}

.nav-chip:hover {
  color: var(--site-accent);
}

.footer-map {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: var(--space-px) solid var(--site-hair);
}

@media (min-width: 40rem) {
  .footer-map {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .footer-map {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-col h2 {
  font-size: var(--site-text-micro);
  font-weight: var(--site-weight-heavy);
  letter-spacing: var(--site-tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1-5);
}

.footer-col a {
  display: inline-block;
  padding-block: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.footer-inner {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--space-px) solid var(--site-hair);
}

.footer-note {
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

/* ============================================================
   THE PRODUCT COMPONENTS — the console, the DAG, the compare and the
   family rows (133), fed by SiteFacts' demo block. Panel tokens are the
   navy on the light page. Every colour below is a token.
   ============================================================ */

.console {
  position: relative;
  background: var(--site-panel);
  color: var(--site-panel-ink);
  border: var(--space-px) solid var(--site-panel-hair);
  border-radius: var(--radius-xl);
  box-shadow: var(--site-shadow-lift);
  overflow: hidden;
}

.console,
.dag-embed,
.section.dark {
  --site-good: var(--site-good-panel);
}

.console-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3-5);
  border-bottom: var(--space-px) solid var(--site-panel-hair);
  font-family: var(--site-font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--site-panel-muted);
}

.console-bar i {
  width: var(--space-2-5);
  height: var(--space-2-5);
  border-radius: 50%;
  background: var(--site-panel-hair);
}

.console-bar span {
  margin-inline-start: var(--space-2);
}

.console-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-6);
}

.console-prompt {
  font-family: var(--site-font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.5;
}

.console-prompt .you {
  color: var(--site-panel-muted);
}

.console-prompt .q {
  color: var(--site-panel-ink);
}

.console-steps {
  display: grid;
  gap: var(--space-1-5);
  font-family: var(--site-font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--site-panel-muted);
}

.console-steps ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1-5);
}

.console-steps li {
  list-style: none;
  display: flex;
  gap: var(--space-2-5);
  align-items: baseline;
}

.console-steps li::before {
  content: "\2713";
  color: var(--site-good);
  font-weight: 700;
}

.console-steps li.live::before {
  content: "\25CF";
  color: var(--site-panel-accent);
}

.console-result {
  border: var(--space-px) solid var(--site-panel-hair);
  border-radius: var(--radius-lg);
  overflow: hidden;
  overflow-x: auto;
}

.console-result table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--site-font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.35;
}

.console-result th {
  text-align: start;
  font-weight: var(--weight-medium);
  color: var(--site-panel-muted);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--space-px) solid var(--site-panel-hair);
  background: var(--site-panel-2);
  letter-spacing: var(--site-tracking-tag);
  font-size: var(--site-text-micro);
  text-transform: uppercase;
  white-space: nowrap;
}

.console-result td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--space-px) solid var(--site-panel-hair);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.console-result tr:last-child td {
  border-bottom: 0;
}

.console-result .num {
  text-align: end;
}

.console-result .share,
.console .share {
  color: var(--site-panel-accent);
}

.console-endpoint {
  display: flex;
  gap: var(--space-2-5);
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--site-font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--site-panel-muted);
}

.console-endpoint b {
  color: var(--site-good);
  font-weight: var(--weight-semibold);
}

.console-endpoint code,
.console-result code {
  background: var(--site-panel-2);
  color: var(--site-panel-ink);
}

.console-src {
  font-family: var(--site-font-mono);
  font-size: var(--site-text-micro);
  color: var(--site-panel-muted);
}

.console-verb {
  color: var(--site-good);
  font-weight: var(--weight-semibold);
}

.console-result .access {
  color: var(--site-good);
}

.dag-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

@media (max-width: 63.99rem) {
  .dag-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dag-scroll {
  overflow-x: auto;
}

@media (max-width: 47.99rem) {
  .dag {
    min-width: 620px;
  }
}

.dag {
  width: 100%;
  height: auto;
  display: block;
}

.dag-embed {
  background: var(--site-panel);
  border: var(--space-px) solid var(--site-panel-hair);
  border-radius: var(--radius-xl);
  box-shadow: var(--site-shadow-lift);
  padding: var(--space-5);
}

.dag text {
  font-family: var(--site-font-mono);
  font-size: 12.5px;
  fill: var(--site-panel-ink);
}

.dag .lbl {
  fill: var(--site-panel-muted);
  font-size: 11px;
  letter-spacing: .06em;
}

.dag .node {
  fill: var(--site-panel-2);
  stroke: var(--site-panel-hair);
  stroke-width: 1;
}

.dag .node.hot {
  stroke: var(--site-accent);
}

.dag .edge {
  stroke: var(--site-panel-hair);
  stroke-width: 1.5;
  fill: none;
}

.dag .flow {
  stroke: var(--site-panel-accent);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 4 6;
}

.dag .pill {
  fill: var(--site-accent);
}

.dag .pill-t {
  fill: var(--site-accent-btn-ink);
  font-weight: 700;
  font-family: var(--site-font-sans);
  font-size: 10px;
}

.dag .rel {
  font-size: 11.5px;
}

.dag-notes {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.dag-notes h2 + .row {
  margin-top: calc(var(--site-gap-head) - var(--space-5));
}

.dag-notes .row {
  display: grid;
  grid-template-columns: var(--space-7) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.dag-notes .row p {
  color: var(--site-panel-muted);
}

.dag-notes .row b {
  display: block;
  color: var(--site-panel-ink);
  font-weight: var(--weight-semibold);
}

.dag-notes .n {
  display: grid;
  place-items: center;
  width: var(--space-6);
  height: var(--space-6);
  margin-top: var(--space-0-5);
  font-size: var(--text-xs);
  font-weight: var(--site-weight-heavy);
  line-height: 1;
  color: var(--site-panel-accent);
  border: var(--space-px) solid var(--site-panel-hair);
  border-radius: 50%;
}

.dag-notes > p {
  color: var(--site-panel-muted);
}

.dag-notes a {
  color: var(--site-panel-accent);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--space-14) minmax(0, 1fr);
  align-items: stretch;
}

@media (max-width: 47.99rem) {
  .compare {
    grid-template-columns: minmax(0, 1fr);
  }

  .compare .compare-arrow {
    transform: rotate(90deg);
    padding: var(--space-1-5) 0;
  }
}

.compare .col {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-7);
  background: var(--site-surface);
  border: var(--space-px) solid var(--site-hair);
  border-radius: var(--radius-xl);
}

.compare .col.after {
  border-color: var(--site-accent-line);
  background: linear-gradient(180deg, var(--site-accent-soft), var(--site-surface) 55%);
}

.compare .compare-arrow {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: var(--text-xl);
}

.compare .quote {
  font-size: var(--text-lg);
  font-weight: var(--site-weight-emphasis);
  line-height: 1.35;
  color: var(--text-primary);
}

.ticket {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2-5);
}

.ticket li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  color: var(--text-secondary);
}

.ticket li::before {
  content: "";
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--space-0-5);
  background: var(--site-hair-2);
}

.ticket li:last-child {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.receipt {
  padding: var(--space-3) var(--space-3-5);
  font-family: var(--site-font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  background: var(--site-panel);
  color: var(--site-panel-ink);
  border-radius: var(--radius-lg);
}

.receipt span {
  color: var(--site-panel-muted);
}

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

.fam .row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: baseline;
  padding-top: var(--space-3-5);
  border-top: var(--space-px) solid var(--site-hair);
}

.fam .row:first-child {
  border-top: 0;
  padding-top: 0;
}

.fam .name {
  font-weight: var(--site-weight-heavy);
  color: var(--text-primary);
}

.fam .row code {
  white-space: nowrap;
}

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

/* ============================================================
   MOTION — finite entrances and feedback, transform/opacity only. Every
   element rests VISIBLE: `.is-entering` is added once by site.js when the
   element first scrolls into view (or by the page-load stagger on the
   hero); without JS nothing is parked at opacity 0. Reduced motion turns
   the block off at load, and site.js removes `.is-entering` when the
   preference changes while the page is open.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .is-entering:not(.demo):not(.mini-flow) {
    animation: site-enter var(--site-motion-enter) var(--site-motion-ease) backwards;
  }

  .hero-copy > * {
    animation: site-enter var(--site-motion-enter) var(--site-motion-ease) backwards;
  }

  .hero-copy > *:nth-child(2) { animation-delay: calc(var(--site-motion-step) * 1); }
  .hero-copy > *:nth-child(3) { animation-delay: calc(var(--site-motion-step) * 2); }
  .hero-copy > *:nth-child(4) { animation-delay: calc(var(--site-motion-step) * 3); }
  .hero-copy > *:nth-child(5) { animation-delay: calc(var(--site-motion-step) * 4); }

  .home-hero .demo {
    animation: site-enter var(--site-motion-enter) calc(var(--site-motion-step) * 2) var(--site-motion-ease) backwards;
  }

  .demo.is-entering .bar-fill,
  .home-hero .bar-fill {
    animation: site-chart-enter var(--site-motion-chart) var(--site-motion-ease) backwards;
    animation-delay: calc(var(--order, 0) * var(--site-motion-step) + var(--site-motion-enter));
  }

  .bar-row:nth-of-type(2) .bar-fill, .flow-item:nth-of-type(3) { --order: 1; }
  .bar-row:nth-of-type(3) .bar-fill, .flow-item:nth-of-type(5) { --order: 2; }
  .bar-row:nth-of-type(4) .bar-fill { --order: 3; }
  .bar-row:nth-of-type(5) .bar-fill { --order: 4; }

  .mini-flow.is-entering .flow-item {
    animation: site-enter var(--site-motion-enter) var(--site-motion-ease) backwards;
    animation-delay: calc(var(--order, 0) * var(--site-motion-step));
  }

  .panel.is-entering {
    animation: site-enter var(--site-motion-fast) var(--site-motion-ease) backwards;
  }

  .kicker::before,
  .eyebrow::before {
    animation: site-rule var(--site-motion-enter) var(--site-motion-ease) both;
    transform-origin: left;
  }

  .dag .flow {
    animation: dag-flow 1.6s linear infinite;
  }

  .btn:focus-visible span[aria-hidden],
  .text-link:focus-visible span {
    transform: translateX(calc(-1 * var(--site-motion-lift)));
  }

  .btn:active {
    transform: scale(var(--site-motion-press));
  }

  @media (hover: hover) and (pointer: fine) {
    .btn:hover,
    .card:hover,
    .media-frame:hover,
    .resource-grid a:hover {
      transform: translateY(var(--site-motion-lift));
    }

    .card:hover,
    .media-frame:hover,
    .resource-grid a:hover {
      border-color: var(--site-accent);
    }

    .media-frame:hover,
    .resource-grid a:hover {
      box-shadow: var(--site-shadow-lift);
    }

    .card:hover .card-icon {
      transform: translateY(var(--site-motion-lift));
    }

    .btn:hover span[aria-hidden],
    .text-link:hover span,
    .resource-grid a:hover span {
      transform: translateX(calc(-1 * var(--site-motion-lift)));
    }
  }
}

@keyframes site-enter {
  from {
    opacity: 0;
    transform: translateY(var(--site-motion-rise));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes site-chart-enter {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes site-rule {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes dag-flow {
  to {
    stroke-dashoffset: -20;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .dag .flow {
    animation: none;
  }
}