@font-face { font-family: "Yellix"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd21a73f26db81f180_Yellix-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Yellix"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bddb82800e2bea44362_Yellix-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Yellix"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd3bb86c06d050b493_Yellix-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182fe284c14edec412ca_IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182f3766cd21fbc11742_IBMPlexMono-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
/* union-system.css — union.ai design system for Webflow-handoff prototypes.
   Tokens extracted from the live Webflow CSS bundle (Sept 2026).
   Every class below already exists in the union.ai Webflow project —
   prototypes reuse these names so the dev maps elements 1:1. */

@font-face {
  font-family: "Yellix";
  src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd21a73f26db81f180_Yellix-Regular.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Yellix";
  src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bddb82800e2bea44362_Yellix-Medium.otf) format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Yellix";
  src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd3bb86c06d050b493_Yellix-SemiBold.otf) format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182fe284c14edec412ca_IBMPlexMono-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182f3766cd21fbc11742_IBMPlexMono-Bold.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ═══ _shared/union-system.css ═══ */
/* union-system.css — union.ai design system for Webflow-handoff prototypes.
   Tokens extracted from the live Webflow CSS bundle (Sept 2026).
   Every class below already exists in the union.ai Webflow project —
   prototypes reuse these names so the dev maps elements 1:1. */

@font-face {
  font-family: "Yellix";
  src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd21a73f26db81f180_Yellix-Regular.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Yellix";
  src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bddb82800e2bea44362_Yellix-Medium.otf) format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Yellix";
  src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd3bb86c06d050b493_Yellix-SemiBold.otf) format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182fe284c14edec412ca_IBMPlexMono-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182f3766cd21fbc11742_IBMPlexMono-Bold.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ═══ _shared/union-system.css ═══ */
/* union-system.css — union.ai design system for Webflow-handoff prototypes.
   Tokens extracted from the live Webflow CSS bundle (Sept 2026).
   Every class below already exists in the union.ai Webflow project —
   prototypes reuse these names so the dev maps elements 1:1. */

@font-face {
  font-family: "Yellix";
  src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd21a73f26db81f180_Yellix-Regular.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Yellix";
  src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bddb82800e2bea44362_Yellix-Medium.otf) format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Yellix";
  src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd3bb86c06d050b493_Yellix-SemiBold.otf) format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182fe284c14edec412ca_IBMPlexMono-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182f3766cd21fbc11742_IBMPlexMono-Bold.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
#union-durability {
  /* brand */
  --brand-dark: #18191a;
  --brand-gray-100: #f2f3f3;
  --brand-gray-300: #cccfd1;
  --brand-gray-350: #81858b;
  --brand-gray-400: #72757a;
  --brand-yellow-500: #fcb51f;
  --brand-purple: #6f2aef;
  --brand-red: #cd3234;
  --brand-green: #78b856;
  --brand-orange: #e8883a;
  --brand-blue: #3378f5;
  --brand-pink: #ad3abb;
  --brand-brown: #a65a17;
  --brand-blue-dark: #1648b8;
  --brand-green-dark: #008013;
  --brand-red-dark: #980202;
  --white-12: #ffffff1f;
  /* theme roles */
  --theme-background: #000000;
  --theme-heading: #ffffff;
  --theme-body: var(--brand-gray-300);
  --theme-accent: var(--brand-yellow-500);
  --theme-border: var(--white-12);
  --theme-card: var(--brand-dark);
  /* type */
  --font-body: "Yellix", Arial, sans-serif;
  --font-heading: "Yellix", Arial, sans-serif;
  --font-code: "IBM Plex Mono", Tahoma, sans-serif;
  --heading-weight: 600;
  --heading-line-height: 1.05;
  /* ui — note: tighter radii than flyte.org */
  --radius-small: .5rem;
  --radius-medium: 1rem;
  --radius-large: 1.5rem;
  --border-width: 1px;
}
#union-durability *, #union-durability *::before, #union-durability *::after { box-sizing: border-box; }
#union-durability {
  margin: 0;
  background-color: var(--theme-background);
  color: var(--theme-body);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#union-durability h1, #union-durability h2, #union-durability h3, #union-durability h4, #union-durability h5, #union-durability h6 {
  margin: 0;
  color: var(--theme-heading);
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  line-height: var(--heading-line-height);
}
#union-durability p { margin: 0; }
#union-durability a { color: inherit; }
#union-durability img { max-width: 100%; display: block; }
#union-durability code, #union-durability pre { font-family: var(--font-code); }
/* ---- Client-First structure ---- */
#union-durability .padding-global { padding-left: 5%; padding-right: 5%; }
#union-durability .container-large { width: 100%; max-width: 80rem; margin-left: auto; margin-right: auto; }
#union-durability .container-medium { width: 100%; max-width: 64rem; margin-left: auto; margin-right: auto; }
#union-durability .container-small { width: 100%; max-width: 48rem; margin-left: auto; margin-right: auto; }
#union-durability .padding-section-large { padding-top: 7rem; padding-bottom: 7rem; }
#union-durability .padding-section-medium { padding-top: 5rem; padding-bottom: 5rem; }
#union-durability .padding-section-small { padding-top: 3rem; padding-bottom: 3rem; }
/* Client-First directional modifiers — pair with a padding-section-* class to keep
   the padding on one side only (e.g. `padding-section-large padding-top`). */
#union-durability .padding-top { padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; }
#union-durability .padding-bottom { padding-top: 0 !important; padding-right: 0 !important; padding-left: 0 !important; }
/* ---- headings ---- */
#union-durability .heading-style-h1 { font-size: 3.5rem; line-height: 1.2; font-weight: 700; }
#union-durability .heading-style-h2 { font-size: 3rem; line-height: var(--heading-line-height); font-weight: 700; }
#union-durability .heading-style-h3 { font-size: 2.5rem; line-height: 1.1; font-weight: var(--heading-weight); }
#union-durability .heading-style-h4 { font-size: 2rem; line-height: 1.2; font-weight: var(--heading-weight); }
#union-durability .heading-style-h5 { font-size: 1.5rem; line-height: 1.3; font-weight: var(--heading-weight); }
#union-durability .heading-style-h6 { font-size: 1.25rem; line-height: 1.4; font-weight: var(--heading-weight); }
/* ---- text utilities ---- */
#union-durability .text-size-large { font-size: 1.25rem; }
#union-durability .text-size-medium { font-size: 1.125rem; }
#union-durability .text-size-regular { font-size: 1rem; }
#union-durability .text-size-small { font-size: .875rem; }
#union-durability .text-weight-normal { font-weight: 400; }
#union-durability .text-weight-medium { font-weight: 500; }
#union-durability .text-weight-semibold { font-weight: 600; }
#union-durability .text-align-center { text-align: center; }
#union-durability .max-width-small { max-width: 30rem; }
#union-durability .max-width-medium { max-width: 42rem; }
#union-durability .max-width-large { max-width: 56rem; }
#union-durability .align-center { margin-left: auto; margin-right: auto; }
#union-durability .hide { display: none; }
/* tagline = bordered pill chip (unlike flyte.org's bare text tagline) */
#union-durability .text-style-tagline {
  display: inline-block;
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-large);
  background-color: var(--theme-border);
  padding: .5rem 1rem;
  margin-bottom: 1rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--theme-heading);
  text-decoration: none;
}
/* ---- spacers (empty divs, height only) ---- */
#union-durability .spacer-tiny { height: .25rem; }
#union-durability .spacer-xxsmall { height: .5rem; }
#union-durability .spacer-xsmall { height: .75rem; }
#union-durability .spacer-small { height: 1rem; }
#union-durability .spacer-medium { height: 1.5rem; }
#union-durability .spacer-large { height: 2.5rem; }
#union-durability .spacer-xlarge { height: 3.5rem; }
#union-durability .spacer-xxlarge { height: 5rem; }
/* ---- buttons ---- */
#union-durability .button {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: .375rem;
  row-gap: .375rem;
  border: 1px solid var(--theme-accent);
  border-radius: var(--radius-large);
  background-color: var(--theme-accent);
  color: #000000;
  text-align: center;
  padding: .5rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
#union-durability .button.is-secondary {
  border-color: var(--theme-border);
  background-color: transparent;
  color: var(--theme-accent);
}
#union-durability .button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
  row-gap: 1rem;
}
/* ---- dark card — the site's signature surface ---- */
#union-durability .card {
  background-color: var(--theme-card);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-medium);
}
@media (max-width: 991px) {
  #union-durability .heading-style-h1 { font-size: 3.25rem; }
  #union-durability .heading-style-h2 { font-size: 2.75rem; }
  #union-durability .heading-style-h3 { font-size: 2.25rem; }
  #union-durability .padding-section-large { padding-top: 6rem; padding-bottom: 6rem; }
}
@media (max-width: 767px) {
  #union-durability .heading-style-h1 { font-size: 2.5rem; }
  #union-durability .heading-style-h2 { font-size: 2.25rem; }
  #union-durability .heading-style-h3 { font-size: 2rem; }
  #union-durability .heading-style-h4 { font-size: 1.75rem; }
  #union-durability .padding-section-large { padding-top: 4rem; padding-bottom: 4rem; }
  #union-durability .padding-section-medium { padding-top: 3rem; padding-bottom: 3rem; }
}
/* ── prototype deviation: body-text legibility ──
   The values above are extracted from the live Webflow bundle. These four
   utilities carry almost all the non-heading prose on the three platform
   pages, and at the extracted sizes they read small on the dark ground, so
   each is bumped 1px. Headings are untouched. If the Webflow project adopts
   this, fold the values in above and delete this block. */
#union-durability .text-size-large { font-size: 1.3125rem; }
/* was 1.25rem  / 20px → 21px */
#union-durability .text-size-medium { font-size: 1.1875rem; }
/* was 1.125rem / 18px → 19px */
#union-durability .text-size-regular { font-size: 1.0625rem; }
/* was 1rem     / 16px → 17px */
#union-durability .text-size-small { font-size: .9375rem; }
/* was .875rem  / 14px → 15px *//* ── prototype deviation: scrollbars ──
   The default light scrollbars sit badly on the dark code panels and console
   recreations — they are the first thing you notice in a snippet that scrolls
   sideways. Thin, low-contrast, brighter on hover. Firefox takes the standard
   properties; WebKit the pseudo-elements. Same treatment as ../home/. */
#union-durability * { scrollbar-width: thin; scrollbar-color: rgba(236,234,228,.18) transparent; }
#union-durability ::-webkit-scrollbar { width: 10px; height: 10px; }
#union-durability ::-webkit-scrollbar-track { background: transparent; }
#union-durability ::-webkit-scrollbar-thumb {
  background: rgba(236,234,228,.16);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
#union-durability ::-webkit-scrollbar-thumb:hover { background: rgba(236,234,228,.30); background-clip: content-box; }
#union-durability ::-webkit-scrollbar-corner { background: transparent; }
/* ── prototype deviation: in-page anchor behaviour ──
   The hero's secondary CTA and the proof rows link to sections on the same
   page. Without these two rules the browser jumps instantly and lands with
   the heading underneath the sticky navbar. Smooth scroll is disabled for
   visitors who asked for reduced motion. */
#union-durability { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  #union-durability { scroll-behavior: auto; }
}
#union-durability [id] { scroll-margin-top: 6rem; }
/* some anchors target widgets, not sections *//* ═══ durability/style.css ═══ *//* style.css — /durability page styles.
   Loads on top of ../_shared/union-system.css (tokens + site utility classes).
   Every class below is either (a) a class that already exists in the union.ai
   Webflow project, restated here because the shared stylesheet doesn't carry it,
   or (b) a new Client-First component class for this page. The README maps them.

   Values were read out of the live Webflow bundle
   cdn.prod.website-files.com/6aa0903745dd86008ce33074/css/union-staging-*.shared.css
   so the prototype and the site agree. *//* ── theme-token aliases ─────────────────────────────────────────────
   The Webflow project names its theme roles `--_theme---*`. The shared
   prototype stylesheet names them `--theme-*`. Alias one to the other so
   markup and CSS lifted from either side drops in unchanged. */
#union-durability {
  --_theme---background: var(--theme-background);
  --_theme---heading: var(--theme-heading);
  --_theme---body: var(--theme-body);
  --_theme---accent: var(--theme-accent);
  --_theme---border: var(--theme-border);
  --_theme---container: var(--theme-card);
  --_ui-styles---radius--medium: 1rem;
  --_ui-styles---radius--large: 1.5rem;
  --_typography---font-styles--code: var(--font-code);
}
/* ── fluid root type scale ───────────────────────────────────────────
   The live site sizes the root font off the viewport, which is what makes
   `container-large` (80rem) read as ~1440px at 1456px wide rather than 1280px.
   Every rem on the page — including the ones in union-system.css — keys off it.
   Lifted verbatim from the site's page-level <style> block; keep the two in step. */
#union-durability {
  --font-from: 18;
  --font-to: 20;
  --vw-from: calc(1920 / 100);
  --vw-to: calc(2400 / 100);
  --coefficient: calc((var(--font-to) - var(--font-from)) / (var(--vw-to) - var(--vw-from)));
  --base: calc((var(--font-from) - var(--vw-from) * var(--coefficient)) / 16);
}
#union-durability { font-size: calc(var(--base) * 1rem + var(--coefficient) * 1vw); }
@media screen and (max-width: 1920px) {
  #union-durability { --font-from: 16; --font-to: 18; --vw-from: calc(1440 / 100); --vw-to: calc(1920 / 100); }
}
@media screen and (max-width: 1440px) {
  #union-durability { --font-from: 14; --font-to: 16; --vw-from: calc(479 / 100); --vw-to: calc(1440 / 100); }
}
@media screen and (max-width: 479px) {
  #union-durability { --font-from: 14; --font-to: 16; --vw-from: calc(1 / 100); --vw-to: calc(479 / 100); }
}
#union-durability {
  background-color: var(--theme-background);
  color: var(--theme-body);
}
/* `clip` rather than `hidden` on purpose — `hidden` would make this a scroll
   container and break the sticky code callouts. */
#union-durability .main-wrapper { overflow: clip; }
/* ── eyebrows ────────────────────────────────────────────────────────
   Yellow mono caps rather than the union-system bordered pill — matches the
   home, sovereign-ai, ai-factory and advanced-scheduling prototypes and the
   live /durability page's own page-level embed. Keep the four in step. */
#union-durability .text-style-tagline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-style: none;
  background-color: transparent;
  padding: 0;
  color: var(--theme-accent);
  font-family: var(--font-code);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* Section headings on this page use the site's h2 scale without needing the
   utility class on every node — same as the live page, which leaves the <h2>
   bare and lets the Webflow project's base h2 style carry it. */
#union-durability .section_layout3 h2, #union-durability .section_layout1 h2, #union-durability .section_speed h2, #union-durability .section_cta25 h2 {
  font-size: 3rem;
  line-height: 1.05;
  font-weight: 600;
  color: var(--theme-heading);
  margin: 0;
}
/* ── hero ────────────────────────────────────────────────────────── *//* On the live page the navbar is taken out of flow, so `.section_header26`
   starts at page top and its 8rem padding doubles as the bar's clearance.
   The emulated prototype nav is `position: sticky` (in flow), which would push
   the hero down by the bar's height on top of that padding. Pin it so the
   local page reproduces the live rhythm. Prototype-only: at port time the
   site's own navbar component replaces this and the rule goes away. */
#union-durability .unav { position: fixed; top: 0; left: 0; right: 0; }
#union-durability .section_header26 { z-index: 10; padding-top: 8rem; position: relative; }
#union-durability .header26_component { display: block; }
#union-durability .header26_copy { display: block; }
/* `is-hero` replaces the live page's opaque `w-variant-3901369f-…` modifier:
   left-aligned beside the demo on desktop, centered once the row stacks. */
#union-durability .text-align-center.is-hero { text-align: left; }
#union-durability .align-center.is-hero { margin-left: 0; margin-right: 0; }
#union-durability .button-group.is-hero { justify-content: flex-start; }
#union-durability .button-stack { display: flex; flex-direction: column; align-items: stretch; }
#union-durability .button_text { display: block; }
#union-durability .header26_image-wrapper {
  border-radius: var(--_ui-styles---radius--large);
  width: 100%;
  overflow: hidden;
}
#union-durability .header26_video { aspect-ratio: 3 / 2; object-fit: contain; width: 100%; height: auto; }
#union-durability .header26_video.is-16-9 {
  aspect-ratio: 16 / 9;
  border-radius: var(--_ui-styles---radius--medium);
  object-fit: cover;
}
/* ── hero tabs ───────────────────────────────────────────────────── */
#union-durability .layout407_tabs { display: flex; flex-flow: column; }
#union-durability .layout407_tabs.is-reverse { flex-flow: column-reverse; }
#union-durability .tabs-menu.is-alt {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: .5rem;
  margin-top: 1rem;
}
#union-durability .layout407_tab-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--theme-heading);
  text-align: center;
  border-radius: 5rem;
  padding: .75rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
}
#union-durability .layout407_tab-link.is-small { padding: .25rem .75rem; }
#union-durability .layout407_tab-link:hover { color: var(--theme-accent); }
#union-durability .layout407_tab-link.is-active {
  border-color: var(--theme-border);
  background-color: var(--theme-border);
  color: var(--theme-accent);
}
#union-durability .layout407_tab-pane { display: none; }
#union-durability .layout407_tab-pane.is-active { display: block; }
#union-durability .margin-bottom-negative-small { margin-bottom: -1.5rem; }
#union-durability .spacer-huge { width: 100%; padding-top: 6rem; }
/* ── feature rows ────────────────────────────────────────────────── */
#union-durability .layout3_component { display: flex; flex-flow: column; gap: 6rem; }
#union-durability .layout3_component.is-small { gap: 4rem; }
#union-durability .layout3_content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
/* The hero row only. This page's figure is the widest thing on it and scales
   off its column, so the split leans to the figure. Every other
   `.layout3_content` on the page stays 1fr 1fr. */
#union-durability .layout3_content.is-vertical-tablet { display: grid; grid-template-columns: .93fr 1.07fr; }
#union-durability .layout3_image-wrapper { width: calc(45vw - 2rem); max-width: 38rem; }
/* `is-first` replaces the live page's `w-variant-c9973401-…`: image column moves
   left of the copy on desktop, and back below it once the row stacks. */
#union-durability .layout3_image-wrapper.is-first { order: -1; }
#union-durability .layout3_image { border-radius: var(--_ui-styles---radius--medium); object-fit: contain; width: 100%; height: 100%; }
#union-durability .layout3_content-left { display: block; }
/* ── open-source stat band ───────────────────────────────────────── */
#union-durability .fs_numbercount-1_component { display: grid; grid-template-columns: 1fr; gap: 1rem; }
#union-durability .fs_numbercount-1_wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem; position: relative; }
#union-durability .fs_numbercount-1_card {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  text-align: center;
  place-content: center;
  place-items: center;
  padding: 1rem 0;
}
#union-durability .fs_numbercount-1_card p { margin: 0; color: var(--brand-gray-350); font-size: .875rem; }
#union-durability .fs_numbercount-1_number { letter-spacing: -.025em; font-size: 6rem; line-height: 1; color: var(--theme-heading); }
#union-durability .fs_numbercount-1_number.is-small { font-size: 3rem; }
/* Dividers are positional (one before every cell but the first) so the band
   reads the same however many stats sit in it. */
#union-durability .fs_numbercount-1_wrapper > * + * { border-left: 1px solid var(--theme-border); }
#union-durability #flyte-lf-cell { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
#union-durability #flyte-lf-cell img { display: block; width: 100%; max-width: 11.875rem; height: auto; }
/* ── rich text ───────────────────────────────────────────────────── */
#union-durability .text-rich-text p { margin: 0 0 1rem; }
#union-durability .text-rich-text ul { margin: 0; padding-left: 1.25rem; }
#union-durability .text-rich-text li { margin-bottom: .75rem; }
#union-durability .text-rich-text li strong { color: var(--theme-heading); }
#union-durability .text-rich-text a { color: var(--theme-accent); }
#union-durability .text-rich-text a:hover { color: var(--theme-heading); }
/* ── code showcase ───────────────────────────────────────────────── */
#union-durability .code-showcase { position: relative; overflow: hidden; }
#union-durability .code-showcase-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 1rem; align-items: start; position: relative; }
#union-durability .code-window { width: 100%; border-radius: var(--_ui-styles---radius--large); overflow: hidden; background: var(--theme-card); }
#union-durability .code-titlebar { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--theme-border); }
#union-durability .code-dot { width: 10px; height: 10px; border-radius: 50%; }
#union-durability .code-filename { margin-left: .75rem; font-size: .75rem; color: var(--brand-gray-350); font-family: var(--font-code); }
#union-durability .code-body { overflow-x: auto; }
#union-durability .code-body pre {
  padding: 2rem;
  margin: 0;
  font-family: var(--font-code);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--theme-body);
  tab-size: 4;
  width: max-content;
  min-width: 100%;
}
#union-durability .code-line {
  display: block;
  margin: 0 -2rem;
  padding: 0 2rem;
  border-left: 2px solid transparent;
  font-size: .75rem;
  position: relative;
  transition: background .25s;
}
#union-durability .code-line.highlight { background: var(--theme-card); border-left-color: var(--theme-accent); color: #ffffff; }
#union-durability .code-callouts { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 5.5rem; z-index: 2; }
#union-durability .code-callout {
  border: 1px solid var(--theme-border);
  border-radius: var(--_ui-styles---radius--large);
  color: var(--theme-body);
  font-size: .875rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: border-color .25s, background .25s;
}
#union-durability .code-callout:hover { border-color: var(--theme-accent); }
#union-durability .code-callout.is-active { background: var(--theme-card); border-color: var(--theme-accent); }
#union-durability .code-callout h4 { font-size: .95rem; font-weight: 700; color: #fafafa; margin: 0 0 .4rem; }
#union-durability .code-callout p { margin: 0; }
#union-durability .code-window-lg { font-size: .9rem; }
/* ── node-level optimizations ────────────────────────────────────── */
#union-durability .speed_kicker-icon { width: 1rem; height: 1rem; flex: 0 0 auto; }
#union-durability .speed_list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
#union-durability .speed_item {
  display: flex;
  flex-direction: column;
  row-gap: .5rem;
  border-top: 1px solid var(--theme-border);
  padding: 1.375rem 0 .25rem;
  text-decoration: none;
  /* The card carries the heading color and the title inherits it, so the hover
     below reaches the title without a descendant selector Webflow can't express. */
  color: var(--theme-heading);
  min-width: 0;
}
#union-durability .speed_item:hover { color: var(--theme-accent); }
#union-durability .speed_icon { width: 1.25rem; height: 1.25rem; color: var(--theme-accent); margin-bottom: .125rem; }
#union-durability .speed_kicker {
  font-family: var(--font-code);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--theme-accent);
}
#union-durability .speed_title { font-size: 1.125rem; line-height: 1.25; font-weight: 600; color: inherit; margin: 0; }
#union-durability .speed_body { font-size: .9375rem; line-height: 1.55; color: var(--brand-gray-350); margin: 0; }
/* The long `reusable=flyte.ReusePolicy(...)` token is wider than a quarter of the
   row. Without the wrap (and `minmax(0, 1fr)` above) the first column steals
   ~16px from each of the other three. */
#union-durability .text-code { font-family: var(--font-code); font-size: .9em; color: var(--brand-gray-100); overflow-wrap: anywhere; }
/* ── case-study cards ────────────────────────────────────────────── */
#union-durability .layout250_list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem 1.5rem; place-items: start stretch; }
#union-durability .layout250_item { display: flex; flex-direction: column; width: 100%; height: 100%; }
#union-durability .layout250_link { display: flex; flex-direction: column; align-items: center; width: 100%; text-decoration: none; color: inherit; position: relative; }
#union-durability .layout250_link:hover { color: var(--theme-accent); }
#union-durability .home4-features_image-wrapper { border-radius: var(--_ui-styles---radius--large); flex: 1; width: 100%; position: relative; overflow: hidden; }
#union-durability .layout250_image { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: 100%; transition: transform .4s; }
#union-durability .layout250_link:hover .layout250_image { transform: scale(1.03); }
#union-durability .layout250_list h3 { margin: 0; }
/* ── CTA ─────────────────────────────────────────────────────────── */
#union-durability .section_cta25 { position: relative; }
#union-durability .cta25_component { display: block; }
#union-durability .button-group.is-center { justify-content: center; }
#union-durability .button-group.is-home-hero { justify-content: flex-start; align-items: flex-start; }
#union-durability .button-group.is-home-hero.is-center { justify-content: center; align-items: flex-start; }
#union-durability .text-size-tiny { font-size: .75rem; color: var(--brand-gray-350); margin: 0; }
/* ── footer placeholder (prototype only — the site uses its footer symbol) ── */
#union-durability .footer-placeholder { border-top: 1px solid var(--theme-border); padding: 2rem 0; }
#union-durability .footer-placeholder_row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
#union-durability .footer-placeholder_note { color: var(--brand-gray-400); margin: 0; }
#union-durability .nav-placeholder_logo { font-weight: 600; color: var(--theme-heading); }
@media (max-width: 991px) {
  #union-durability .section_header26 { padding-top: 6rem; }
  #union-durability .layout3_content { grid-template-columns: 1fr 1fr; }
  #union-durability .layout3_content.is-vertical-tablet { display: flex; flex-flow: column; }
  #union-durability .layout3_image-wrapper { width: auto; max-width: calc(47.5vw - 2rem); }
  #union-durability .layout250_list { display: flex; flex-flow: column; }
  #union-durability .code-showcase-grid { grid-template-columns: 1fr; }
  #union-durability .code-callouts { flex-direction: row; gap: .5rem; order: -1; overflow-x: auto; position: static; }
  #union-durability .code-callout { min-width: 80vw; border-radius: var(--_ui-styles---radius--medium); padding: .75rem 1rem; font-size: .75rem; }
  #union-durability .speed_list { grid-template-columns: 1fr 1fr; }
  #union-durability .spacer-huge { padding-top: 5rem; }
  #union-durability .fs_numbercount-1_number { font-size: 5rem; }
  #union-durability .tabs-menu.is-alt { gap: .5rem 1rem; }
}
@media (max-width: 767px) {
  #union-durability .text-align-center.is-hero { text-align: center; }
  #union-durability .align-center.is-hero { margin-left: auto; margin-right: auto; }
  #union-durability .button-group.is-hero { justify-content: center; }
  #union-durability .section_layout3 h2, #union-durability .section_layout1 h2, #union-durability .section_speed h2, #union-durability .section_cta25 h2 { font-size: 2.25rem; }
  #union-durability .layout3_component { gap: 5rem; }
  #union-durability .layout3_content { grid-template-columns: 1fr; gap: 3rem; }
  #union-durability .layout3_image-wrapper { max-width: 90vw; }
  #union-durability .layout3_image-wrapper.is-first { order: 0; }
  #union-durability .fs_numbercount-1_wrapper { display: flex; flex-flow: column; gap: 0; }
  #union-durability .fs_numbercount-1_wrapper > * + * { border-left: 0; border-top: 1px solid var(--theme-border); }
  #union-durability .fs_numbercount-1_card { padding: 2rem 0; }
  #union-durability .speed_list { grid-template-columns: 1fr; gap: 0; }
  #union-durability .spacer-huge { padding-top: 3.5rem; }
  #union-durability .header26_image-wrapper { margin-top: 1rem; }
  #union-durability .tabs-menu.is-alt {
    flex-flow: row nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin-left: -5vw;
    margin-right: -5vw;
    padding: 0 5vw;
  }
  #union-durability .layout407_tab-link { border-color: var(--theme-border); flex: none; padding-left: 1.25rem; padding-right: 1.25rem; }
}
@media (max-width: 479px) {
  #union-durability .layout3_content { gap: 2rem; }
  #union-durability .header26_video { aspect-ratio: 1; }
  #union-durability .fs_numbercount-1_number { font-size: 4.5rem; }
  #union-durability .button-group.is-center { flex-flow: column; }
}
/* ============================================
   WEBFLOW: paste into an Embed / page <head>
   (not expressible in the Designer)
   ============================================ *//* Hero frame fades into the page ground at its bottom edge. */
#union-durability .header26_image-wrapper {
  -webkit-mask-image: linear-gradient(#000 40% 85%, #0000 100%);
  mask-image: linear-gradient(#000 40% 85%, #0000 100%);
}
/* Logos are supplied in brand color; the site flattens them to white at 40%. *//* Code-showcase ground: the yellow-tinted vertical wash plus a 40px grid. */
#union-durability .code-showcase {
  background: linear-gradient(180deg, #09090b 0%, #141100 50%, #09090b 100%);
  border-top: 1px solid var(--theme-border);
  border-bottom: 1px solid var(--theme-border);
}
#union-durability .code-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(251, 191, 36, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 191, 36, .03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
#union-durability .code-showcase .padding-global { position: relative; }
/* Traffic-light dots. */
#union-durability .code-dot:nth-child(1) { background: #ef4444; }
#union-durability .code-dot:nth-child(2) { background: var(--theme-accent); }
#union-durability .code-dot:nth-child(3) { background: #22c55e; }
/* Syntax tokens. */
#union-durability .code-body .kw { color: #fbbf24; }
#union-durability .code-body .fn { color: #60a5fa; }
#union-durability .code-body .str { color: #34d399; }
#union-durability .code-body .num { color: #fb923c; }
#union-durability .code-body .cmt { color: #52525b; font-style: italic; }
#union-durability .code-body .cls { color: #f472b6; }
#union-durability .code-body .op { color: #a1a1aa; }
#union-durability .code-body .arg { color: #e8b931; }
#union-durability .code-body .err { color: #f87171; }
#union-durability .code-line.highlight .cmt { color: #a7a7ba; }
/* Inline code inside the callouts. */
#union-durability .code-callout code {
  background: rgba(251, 191, 36, .12);
  color: #f59e0b;
  padding: .1rem .35rem;
  border-radius: .25rem;
  font-family: var(--font-code);
  font-size: .75rem;
}
@media (max-width: 991px) {
  #union-durability .code-callouts {
    position: sticky;
    top: 0;
    margin: 0 -5vw;
    padding: 1rem 5vw;
    z-index: 1000;
    background: rgba(0, 0, 0, .8);
    -webkit-backdrop-filter: saturate(200%) blur(20px);
    backdrop-filter: saturate(200%) blur(20px);
  }
}
/* ── above-the-fold rhythm ──
   padding-section-large is 7rem top and bottom, and on the ported page the
   wrapper already carries 8rem to clear the fixed navbar — so the hero opened
   a full screen below the bar. Tighten the hero and the top of the section
   under it, the same way every other platform page does. *//* union-system gives .section_header26 its own 8rem of nav clearance, for a
   standalone page where nothing above it does that. On the port the wrapper
   already clears the fixed navbar, so keeping both stacked 19rem above the
   eyebrow. Zero the section's copy and let padding-section-large set the gap. */
#union-durability .section_header26 { padding-top: 0; }
#union-durability .section_header26 .padding-section-large { padding-top: 3rem; }
#union-durability .section_header26 + .fig-sec.is-first .padding-section-large { padding-top: 4rem; }
@media (max-width: 991px) {
  #union-durability .section_header26 .padding-section-large { padding-top: 2.5rem; }
}
/* ═══ _shared/union-fig.css ═══ *//* ══════════════════════════════════════════════════════════════════════════
   union-fig.css — the home page's design language, shared by the platform
   pages (advanced-scheduling, agents, ai-factory, durability, inference,
   sovereign-ai).

   Source of truth: the "Home — Redesign" comp (Figma L1U2YQLR…, page 14:8)
   as realised in union/home/style.css. The geometry it encodes:

     · 1440 frame, 64px gutters, 1312 of content            (.u-wrap)
     · 130px of air above and below every section           (.fig-sec)
     · alternating grounds, black / near-black              (.is-alt)
     · centred intro pairs — big h2 over a 700px lead       (.fig-intro)
     · content rows as a 420 / 804 split with an 88px gap,
       sides alternating down the page                      (.fig-row .is-flip)
     · each row led by a numbered eyebrow, a yellow
       uppercase label, an h2, a lead, dot points, a link    (.fig-eyebrow …)
     · a full-bleed yellow closing block                     (.fig-cta)

   Two token systems are in play across these pages — union-system.css
   (--theme-* and --brand-*) and union-nocturne.css (--color-*). The two share no
   names, so every colour below reads the theme token first and falls back to
   the nocturne one. Nothing here needs a per-page bridge.
   ══════════════════════════════════════════════════════════════════════════ */
#union-durability {
  --fig-accent:  var(--theme-accent,  var(--color-accent, #fcb51f));
  --fig-heading: var(--theme-heading, var(--color-text, #ffffff));
  --fig-body:    var(--theme-body,    var(--color-neutral-400, #cccfd1));
  --fig-muted:   var(--brand-gray-350, var(--color-neutral-500, #aeb2b5));
  --fig-faint:   var(--brand-gray-400, var(--color-neutral-600, #81858b));
  --fig-border:  var(--theme-border,  var(--color-divider, rgba(255,255,255,.12)));
  --fig-ground:  #0c0c0d;   /* the alternating band, one step off black */
  --fig-ink:     #0b0b0c;   /* type on the yellow block */
}
/* ── container ─────────────────────────────────────────────────────── */
#union-durability .u-wrap {
  max-width: 1440px; margin: 0 auto;
  padding-left: clamp(20px, 4.4vw, 64px);
  padding-right: clamp(20px, 4.4vw, 64px);
}
/* ── section rhythm + alternating grounds ──────────────────────────── */
#union-durability .fig-sec { padding-top: clamp(56px, 9vw, 130px); padding-bottom: clamp(56px, 9vw, 130px); }
#union-durability .fig-sec.is-alt { background: var(--fig-ground); }
#union-durability .fig-sec.is-tight { padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(40px, 6vw, 84px); }
/* ── centred intro pair ────────────────────────────────────────────── */
#union-durability .fig-intro { text-align: center; }
#union-durability .fig-intro_h2 {
  font-size: clamp(28px, 4.6vw, 56px); line-height: 1.12; letter-spacing: -0.025em;
  margin: 0 0 18px; color: var(--fig-heading); text-wrap: balance;
}
#union-durability .fig-intro_sub {
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--fig-body);
  max-width: 700px; margin: 0 auto; text-wrap: pretty;
}
#union-durability .fig-intro_body { margin-top: clamp(40px, 5.5vw, 72px); text-align: left; }
/* ── content row: copy one side, visual the other ──────────────────── */
#union-durability .fig-row {
  display: grid; grid-template-columns: minmax(0, 420fr) minmax(0, 804fr);
  gap: clamp(28px, 5.2vw, 88px);
  /* start, not center: the comp top-aligns both columns, and centring left the
     heading stranded 200-400px down a tall row — so a contents card that jumped
     to the section landed with its title well below the fold line. */
  align-items: start;
}
/* `order` moves items between grid CELLS, so a flipped row has to swap the
   track widths too — otherwise the visual lands in the narrow column. */
#union-durability .fig-row.is-flip { grid-template-columns: minmax(0, 804fr) minmax(0, 420fr); }
#union-durability .fig-row.is-flip .fig-copy { order: 2; }
#union-durability .fig-row.is-flip .fig-visual { order: 1; }
/* for rows whose visual is denser than the comp's 470px placeholder */
#union-durability .fig-row.is-roomy { grid-template-columns: minmax(0, 360fr) minmax(0, 864fr); }
#union-durability .fig-row.is-roomy.is-flip { grid-template-columns: minmax(0, 864fr) minmax(0, 360fr); }
/* for rows whose copy carries a code block rather than a widget */
#union-durability .fig-row.is-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
#union-durability .fig-copy { min-width: 0; }
#union-durability .fig-visual { min-width: 0; }
/* ── row furniture ─────────────────────────────────────────────────── */
#union-durability .fig-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
#union-durability .fig-eyebrow_n { font-size: 13px; letter-spacing: 0.06em; color: var(--fig-faint); }
#union-durability .fig-eyebrow_rule { display: block; width: 24px; height: 1px; background: var(--fig-border); }
#union-durability .fig-label {
  font-size: 15px; font-weight: 600; letter-spacing: 0.085em; text-transform: uppercase;
  color: var(--fig-accent); margin-bottom: 18px;
}
#union-durability .fig-h2 {
  font-size: clamp(27px, 3.9vw, 52px); line-height: 1.1; letter-spacing: -0.025em;
  margin: 0 0 22px; color: var(--fig-heading); text-wrap: balance;
}
#union-durability .fig-h3 {
  font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.02em;
  margin: 0 0 14px; color: var(--fig-heading); text-wrap: balance;
}
#union-durability .fig-lead {
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.62; color: var(--fig-body);
  margin: 0 0 26px; text-wrap: pretty;
}
#union-durability .fig-lead:last-child { margin-bottom: 0; }
#union-durability .fig-points { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; }
#union-durability .fig-points li {
  position: relative; padding-left: 18px; font-size: 16px; line-height: 1.6;
  color: var(--fig-body); text-wrap: pretty;
}
#union-durability .fig-points li::before {
  content: ""; position: absolute; left: 0; top: 0.58em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--fig-accent);
}
#union-durability .fig-points li b, #union-durability .fig-points li strong { color: var(--fig-heading); font-weight: 600; }
#union-durability .fig-link {
  display: inline-block; font-size: 15px; font-weight: 500;
  color: var(--fig-accent); text-decoration: none;
}
#union-durability .fig-link:hover { opacity: 0.8; }
/* caption under a visual — the comp puts a title + note inside the placeholder */
#union-durability .fig-cap { margin-top: 18px; display: flex; flex-direction: column; gap: 5px; }
#union-durability .fig-cap_t { font-size: 15.5px; font-weight: 600; color: var(--fig-heading); }
#union-durability .fig-cap_d { font-size: 14.5px; line-height: 1.55; color: var(--fig-muted); text-wrap: pretty; }
/* ── closing CTA: the full-bleed yellow block ──────────────────────── */
#union-durability .fig-cta {
  background: var(--fig-accent); color: var(--fig-ink); text-align: center;
  padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(56px, 8vw, 120px);
}
#union-durability .fig-cta.has-strip { padding-bottom: clamp(40px, 5vw, 64px); }
#union-durability .fig-cta_h2 {
  font-size: clamp(30px, 5.2vw, 64px); line-height: 1.08; letter-spacing: -0.03em;
  margin: 0 0 24px; color: var(--fig-ink); text-wrap: balance;
}
#union-durability .fig-cta_lead {
  font-size: clamp(16px, 1.8vw, 21px); line-height: 1.6; color: rgba(11, 11, 12, 0.78);
  max-width: 680px; margin: 0 auto 30px; text-wrap: pretty;
}
#union-durability .fig-cta_btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
#union-durability .fig-cta_btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fig-ink); border: 1px solid var(--fig-ink); color: var(--fig-accent);
  border-radius: 999px; padding: 14px 28px; font-size: 16px; font-weight: 600;
  white-space: nowrap; text-decoration: none; cursor: pointer; font-family: inherit;
}
#union-durability .fig-cta_btn.is-ghost { background: transparent; border-color: rgba(11, 11, 12, 0.35); color: var(--fig-ink); }
/* The host pages carry a bare `a { color: accent }`, which would repaint these.
   `.button` is excluded as well as `.fig-cta_btn`: the union-system pages state
   their CTA buttons as `a.button`, and `a:not(.fig-cta_btn)` (0,2,1) outranks
   `.fig-cta .button` (0,2,0) — which painted the label black on a black pill. */
#union-durability .fig-cta a:not(.fig-cta_btn):not(.button):not(.btn), #union-durability .fig-cta a:not(.fig-cta_btn):not(.button):not(.btn):hover { color: var(--fig-ink); }
#union-durability .fig-cta a.fig-cta_btn { color: var(--fig-accent); }
#union-durability .fig-cta a.fig-cta_btn.is-ghost { color: var(--fig-ink); }
#union-durability .fig-cta a.fig-cta_btn:hover { background: #1c1c1e; border-color: #1c1c1e; color: var(--fig-accent); }
#union-durability .fig-cta a.fig-cta_btn.is-ghost:hover { background: rgba(11, 11, 12, 0.08); border-color: var(--fig-ink); }
#union-durability .fig-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 28px; text-align: left;
  margin-top: clamp(40px, 5.5vw, 72px); padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(11, 11, 12, 0.2);
}
#union-durability .fig-strip_text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#union-durability .fig-strip_h { font-size: clamp(17px, 1.9vw, 22px); font-weight: 600; letter-spacing: -0.015em; color: var(--fig-ink); }
#union-durability .fig-strip_p { font-size: 15px; color: rgba(11, 11, 12, 0.7); text-wrap: pretty; }
@media (max-width: 1080px) {
  #union-durability .fig-row, #union-durability .fig-row.is-flip, #union-durability .fig-row.is-roomy, #union-durability .fig-row.is-roomy.is-flip, #union-durability .fig-row.is-even {
    grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 44px);
  }
  #union-durability .fig-row.is-flip .fig-copy, #union-durability .fig-row.is-flip .fig-visual { order: 0; }
  #union-durability .fig-points { margin-bottom: 24px; }
}
@media (max-width: 640px) {
  #union-durability .fig-eyebrow { margin-bottom: 10px; }
  #union-durability .fig-label { margin-bottom: 12px; font-size: 13.5px; }
  #union-durability .fig-strip { justify-content: flex-start; }
}
/* ══════════════════════════════════════════════════════════════════════════
   BRIDGE — the platform pages in the union-system family (advanced-scheduling,
   ai-factory, durability, sovereign-ai) are built from Client-First utilities:

     section > .padding-global > .container-large > .padding-section-large
       > .align-center.max-width-large.text-align-center
           > .text-style-tagline  +  h2.heading-style-h2  +  p.text-size-medium

   Rather than rewrite that markup on four pages, re-express those utilities in
   the home page's language. Everything is scoped under .fig-sec, which is added
   per section — so a section opts in by gaining the class, and the heroes,
   which keep their own composition, are never touched.
   ══════════════════════════════════════════════════════════════════════════ *//* .fig-sec owns the vertical rhythm; the container is left alone so every
   section lines up with the hero, which keeps the page's own .padding-global
   (5%) and .container-large (80rem). Overriding those to the home page's
   1440/64px made the sections 33px wider than the hero on both edges. */
#union-durability .fig-sec .padding-section-large, #union-durability .fig-sec .padding-section-medium { padding-top: 0; padding-bottom: 0; }
/* the tagline chip becomes the comp's yellow uppercase label */
#union-durability .fig-sec .text-style-tagline {
  display: block; border: 0; background: none; padding: 0;
  margin: 0 0 18px; font-size: 15px; font-weight: 600;
  letter-spacing: 0.085em; text-transform: uppercase; color: var(--fig-accent);
}
/* the section heading pair */
#union-durability .fig-sec .heading-style-h2 {
  font-size: clamp(28px, 4.6vw, 56px); line-height: 1.12; letter-spacing: -0.025em;
  font-weight: 600; text-wrap: balance;
}
#union-durability .fig-sec .heading-style-h3 {
  font-size: clamp(24px, 3.4vw, 42px); line-height: 1.14; letter-spacing: -0.022em;
  font-weight: 600; text-wrap: balance;
}
#union-durability .fig-sec .text-align-center .text-size-medium, #union-durability .fig-sec .fig-intro .text-size-medium {
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--fig-body);
  max-width: 700px; margin-left: auto; margin-right: auto; text-wrap: pretty;
}
/* the comp sets the header block off from the body by a fixed measure rather
   than the utility spacers, which vary section to section */
#union-durability .fig-sec .spacer-xxlarge { height: clamp(40px, 5.5vw, 72px); }
#union-durability .fig-sec .spacer-xlarge { height: clamp(32px, 4.4vw, 56px); }
/* ── the nocturne family (agents, inference) states its headers inline ────
   Those two pages are authored against union-nocturne.css, the same tokens as
   the home page, so only the type scale needs restating. */
#union-durability .fig-sec > h2, #union-durability .fig-sec > .fig-head > h2 {
  font-size: clamp(28px, 4.6vw, 56px) !important; line-height: 1.12 !important;
  letter-spacing: -0.025em; text-wrap: balance;
}
/* ── the closing CTA on a union-system page ─────────────────────────
   Those pages state the CTA as a bordered card inside the section
   (.sched-cta_band, .sovereign-cta_band, .model-factory-cta_band …). The comp
   makes it a full-bleed yellow block instead, so the card loses its frame and
   the type and buttons invert onto the accent ground. */
#union-durability .fig-cta .padding-section-large, #union-durability .fig-cta .padding-section-medium { padding-top: 0; padding-bottom: 0; }
#union-durability .fig-cta [class*="cta_band"] { border: 0; background: none; padding: 0; text-align: center; }
#union-durability .fig-cta .heading-style-h2, #union-durability .fig-cta .heading-style-h3 {
  font-size: clamp(30px, 5.2vw, 64px); line-height: 1.08; letter-spacing: -0.03em;
  font-weight: 600; color: var(--fig-ink); text-wrap: balance;
}
#union-durability .fig-cta .text-size-medium, #union-durability .fig-cta [class*="cta_band"] p {
  font-size: clamp(16px, 1.8vw, 21px); line-height: 1.6; color: rgba(11, 11, 12, 0.78);
  max-width: 680px; margin-left: auto; margin-right: auto; text-wrap: pretty;
}
#union-durability .fig-cta .text-style-tagline {
  display: block; border: 0; background: none; padding: 0; margin: 0 0 16px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.085em;
  text-transform: uppercase; color: rgba(11, 11, 12, 0.66);
}
#union-durability .fig-cta .button-group { justify-content: center; }
#union-durability .fig-cta .button {
  border-color: var(--fig-ink); background-color: var(--fig-ink);
  color: var(--fig-accent); border-radius: 999px;
}
#union-durability .fig-cta .button:hover { border-color: #1c1c1e; background-color: #1c1c1e; color: var(--fig-accent); }
#union-durability .fig-cta .button.is-secondary {
  border-color: rgba(11, 11, 12, 0.35); background-color: transparent; color: var(--fig-ink);
}
#union-durability .fig-cta .button.is-secondary:hover { background-color: rgba(11, 11, 12, 0.08); border-color: var(--fig-ink); }
#union-durability .fig-cta .cta-note { color: rgba(11, 11, 12, 0.6); }
#union-durability .fig-cta .spacer-large { height: clamp(24px, 3vw, 34px); }
/* ── the Flyte band keeps the comp's purple callback ────────────────
   Home gives "Open source at the core." a dark-violet ground with purple
   hairlines and a purple eyebrow, rather than the alternating grey. */
#union-durability .fig-oss {
  background: #0d0717;
  border-top: 1px solid rgba(139, 92, 246, 0.32);
  border-bottom: 1px solid rgba(139, 92, 246, 0.32);
}
#union-durability .fig-oss .text-style-tagline { color: #8b5cf6; }
#union-durability .fig-oss .flyte-stat { border-left-color: rgba(139, 92, 246, 0.38); }
#union-durability .fig-oss .flyte-stat:first-child { border-left: 0; }
/* ── the nocturne family's section furniture ────────────────────────
   agents/ and inference/ label their sections with a small mono kicker and a
   17px lede. Both become the comp's label and lead. */
#union-durability .fig-sec .ag-kicker, #union-durability .fig-sec .in-kicker {
  display: block; font-family: inherit; font-size: 15px; font-weight: 600;
  letter-spacing: 0.085em; text-transform: uppercase;
  color: var(--fig-accent); margin-bottom: 18px;
}
#union-durability .fig-sec .ag-lede, #union-durability .fig-sec .in-lede {
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--fig-body);
  max-width: 760px; text-wrap: pretty;
}
#union-durability .fig-sec .u-wrap > h2 {
  font-size: clamp(28px, 4.6vw, 56px); line-height: 1.12;
  letter-spacing: -0.025em; text-wrap: balance;
}
/* ── CTA sections that state their heading and buttons without the
      Client-First utility classes (durability's section_cta25) ──────── */
#union-durability .fig-cta h2 {
  font-size: clamp(30px, 5.2vw, 64px); line-height: 1.08; letter-spacing: -0.03em;
  color: var(--fig-ink); text-wrap: balance;
}
#union-durability .fig-cta p, #union-durability .fig-cta .text-size-tiny, #union-durability .fig-cta .text-size-small {
  color: rgba(11, 11, 12, 0.72);
}
/* the label may be wrapped in .button_text rather than sitting on the anchor */
#union-durability .fig-cta .button .button_text, #union-durability .fig-cta .button > * { color: inherit; }
#union-durability .fig-cta .button-group { justify-content: center; }
#union-durability .fig-cta .button-stack { display: flex; flex-direction: column; align-items: center; }
/* ── the proof band ─────────────────────────────────────────────────
   Every platform page opens with a "proved in production" list under its own
   heading class (.sched-proof_h, .model-factory-proof_h, .sovereign-proof_h).
   Home centres that block and sets it at the intro scale. */
#union-durability .fig-sec [class*="proof_head"] {
  max-width: 700px; margin-left: auto; margin-right: auto;
  margin-bottom: clamp(32px, 4.5vw, 56px); text-align: center;
}
#union-durability .fig-sec [class*="proof_h"]:not([class*="proof_head"]) {
  font-size: clamp(28px, 4.6vw, 56px); line-height: 1.12;
  letter-spacing: -0.025em; margin: 0 0 18px; text-wrap: balance;
}
#union-durability .fig-sec [class*="proof_head"] p {
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6;
  color: var(--fig-body); text-wrap: pretty;
}
/* ── the first section after the hero ───────────────────────────────
   The hero on every platform page is tuned so the next heading just breaks
   the fold. The full 130px of section air pushes that heading under it, so the
   first section runs tighter at the top — the rhythm resumes from there down. */
#union-durability .fig-sec.is-first { padding-top: clamp(36px, 4.6vw, 66px); }
/* the nocturne pages' CTA band (.ag-cta / .in-cta) carries its own gradient
   ground and its own button classes, so both are overridden onto the block */
#union-durability .fig-cta.ag-cta, #union-durability .fig-cta.in-cta { background: var(--fig-accent); color: var(--fig-ink); }
#union-durability .fig-cta.ag-cta h2, #union-durability .fig-cta.in-cta h2 { color: var(--fig-ink); }
#union-durability .fig-cta.ag-cta p, #union-durability .fig-cta.in-cta p { color: rgba(11, 11, 12, 0.78); }
#union-durability .fig-cta .btn.cta-accent {
  background: var(--fig-ink); border-color: var(--fig-ink); color: var(--fig-accent);
}
#union-durability .fig-cta .btn.cta-accent:hover { background: #1c1c1e; border-color: #1c1c1e; color: var(--fig-accent); }
#union-durability .fig-cta .btn.btn-secondary {
  background: transparent; border-color: rgba(11, 11, 12, 0.35); color: var(--fig-ink);
}
#union-durability .fig-cta .btn.btn-secondary:hover { background: rgba(11, 11, 12, 0.08); border-color: var(--fig-ink); }
#union-durability .fig-cta .mono { color: rgba(11, 11, 12, 0.6); }
/* The nocturne CTA states its measure, alignment and every colour inline
   (max-width in ch, a white button label, a mono note, an accent code chip),
   so the block has to out-rank the style attribute to invert onto yellow. */
#union-durability .fig-cta.ag-cta h2, #union-durability .fig-cta.in-cta h2, #union-durability .fig-cta.ag-cta p, #union-durability .fig-cta.in-cta p {
  margin-left: auto !important; margin-right: auto !important;
}
#union-durability .fig-cta.ag-cta > div, #union-durability .fig-cta.in-cta > div { padding-left: 0; padding-right: 0; }
#union-durability .fig-cta.ag-cta > div > div, #union-durability .fig-cta.in-cta > div > div { justify-content: center; }
#union-durability .fig-cta .btn.btn-secondary {
  color: var(--fig-ink) !important;
  box-shadow: inset 0 0 0 1px rgba(11, 11, 12, 0.35) !important;
}
#union-durability .fig-cta .mono { color: rgba(11, 11, 12, 0.6) !important; }
#union-durability .fig-cta code {
  color: rgba(11, 11, 12, 0.82) !important;
  background: rgba(11, 11, 12, 0.08); border-radius: 4px; padding: 0 4px;
}
/* ══════════════════════════════════════════════════════════════════════════
   TOC CARDS + CASE STUDIES — ported from union/home's .cap-grid / .proof-grid.

   The platform pages opened with a two-column proof list: the property on the
   left linking down the page, the customer result on the right linking out to
   a case study. Home splits those two jobs — a grid of contents cards that
   jump down the page, and the case studies gathered below the sections they
   belong to — so the same split is applied here.
   ══════════════════════════════════════════════════════════════════════════ *//* Flex, not grid: a fixed 3-up grid leaves a ragged hole whenever the item
   count isn't a multiple of three (4 items -> 3+1, 5 -> 3+2).
   Every card keeps ONE width — an exact column of --cap-cols — and a partial
   last row centres instead of stretching, so a row of two sits under the row
   of three at the same width rather than widening to fill. */
#union-durability .cap-grid, #union-durability .proof-grid {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  /* pull the grid back out to the section edge — the cells' own padding would
     otherwise indent the first column past every other heading on the page */
  margin-inline: -22px; text-align: left;
}
#union-durability .cap-grid > *, #union-durability .proof-grid > * {
  /* fixed basis, no grow: (row - the gaps between columns) / columns */
  flex: 0 0 calc((100% - (var(--cap-cols, 3) - 1) * 10px) / var(--cap-cols, 3));
  max-width: calc((100% - (var(--cap-cols, 3) - 1) * 10px) / var(--cap-cols, 3));
}
#union-durability .cap-grid.is-4up, #union-durability .proof-grid.is-4up { --cap-cols: 4; }
#union-durability .cap-grid.is-5up, #union-durability .proof-grid.is-5up { --cap-cols: 5; }
#union-durability .cap-cell, #union-durability .proof-cell {
  position: relative;          /* the hover sweep below is absolutely placed */
  overflow: hidden;            /* so the sweep follows the corner radius */
  display: flex; flex-direction: column;
  padding: 22px 22px 26px;
  border-radius: var(--radius-medium, var(--radius-md, 14px));
  text-decoration: none; color: inherit;
  transition: background-color .18s ease, transform .18s cubic-bezier(.2, .7, .3, 1);
}
/* the two hover layers paint inside the cell, so the content has to sit above
   them — otherwise the accent wash tints the icon and the type */
#union-durability .cap-cell > *, #union-durability .proof-cell > * { position: relative; z-index: 1; }
#union-durability .cap-cell:hover, #union-durability .proof-cell:hover {
  background: color-mix(in srgb, var(--fig-heading) 5%, transparent);
  transform: translateY(-3px);
}
#union-durability .cap-cell:focus-visible, #union-durability .proof-cell:focus-visible { outline: 2px solid var(--fig-accent); outline-offset: -2px; }
#union-durability .cap-cell::before, #union-durability .proof-cell::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--fig-accent) 11%, transparent) 0%, transparent 52%);
  opacity: 0; transition: opacity .28s ease;
}
#union-durability .cap-cell::after, #union-durability .proof-cell::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 0;
  height: 1.5px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%,
    color-mix(in srgb, var(--fig-accent) 55%, transparent) 14%,
    var(--fig-accent) 42%,
    color-mix(in srgb, var(--fig-accent) 40%, transparent) 78%, transparent 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform .34s cubic-bezier(.2, .7, .3, 1);
}
#union-durability .cap-cell:hover::before, #union-durability .proof-cell:hover::before { opacity: 1; }
#union-durability .cap-cell:hover::after, #union-durability .proof-cell:hover::after { transform: scaleX(1); }
/* contents card — the glyph is a ↓ because the card jumps down the page */
#union-durability .cap-cell_name {
  font-size: 21px; font-weight: 600; color: var(--fig-heading);
  letter-spacing: -0.01em; margin-bottom: 7px; transition: color .18s ease;
}
#union-durability .cap-cell_desc { font-size: 16px; line-height: 1.5; color: var(--fig-muted); text-wrap: pretty; transition: color .18s ease; }
#union-durability .cap-cell_name::after {
  content: "↓"; display: inline-block; margin-left: 8px;
  font-weight: 400; color: var(--fig-faint);
  transition: color .18s ease, transform .22s cubic-bezier(.2, .7, .3, 1);
}
#union-durability .cap-cell:hover .cap-cell_name { color: var(--fig-accent); }
#union-durability .cap-cell:hover .cap-cell_desc { color: var(--fig-body); }
#union-durability .cap-cell:hover .cap-cell_name::after { color: var(--fig-accent); transform: translateY(-3px); }
/* case-study card — the result leads, the company and the property frame it */
#union-durability .proof-cell_co {
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fig-accent); margin-bottom: 10px;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1); transform-origin: left;
}
#union-durability .proof-cell:hover .proof-cell_co { transform: translateX(2px); }
#union-durability .proof-cell_result {
  font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--fig-heading);
  letter-spacing: -0.01em; text-wrap: pretty;
}
#union-durability .proof-cell_result::after {
  content: "↗"; display: inline-block; margin-left: 9px;
  font-weight: 400; color: var(--fig-faint);
  transition: color .18s ease, transform .22s cubic-bezier(.2, .7, .3, 1);
}
#union-durability .proof-cell:hover .proof-cell_result::after { color: var(--fig-accent); transform: translate(3px, -3px); }
#union-durability .proof-cell_cap { margin-top: auto; padding-top: 14px; font-size: 14px; color: var(--fig-faint); transition: color .18s ease; }
#union-durability .proof-cell:hover .proof-cell_cap { color: var(--fig-muted); }
@media (prefers-reduced-motion: reduce) {
  #union-durability .cap-cell, #union-durability .proof-cell, #union-durability .cap-cell_name, #union-durability .cap-cell_desc, #union-durability .cap-cell_name::after, #union-durability .cap-cell::after, #union-durability .proof-cell::after, #union-durability .proof-cell_co, #union-durability .proof-cell_result::after { transition: none; }
  #union-durability .cap-cell:hover, #union-durability .proof-cell:hover { transform: none; }
  #union-durability .cap-cell:hover .cap-cell_name::after, #union-durability .proof-cell:hover .proof-cell_co, #union-durability .proof-cell:hover .proof-cell_result::after { transform: none; }
  #union-durability .cap-cell::before, #union-durability .proof-cell::before, #union-durability .cap-cell::after, #union-durability .proof-cell::after { display: none; }
}
@media (max-width: 1080px) {
  #union-durability .cap-grid, #union-durability .proof-grid { --cap-cols: 2; }
}
@media (max-width: 860px) {
  #union-durability .cap-grid, #union-durability .proof-grid { margin-inline: 0; }
  #union-durability .cap-cell, #union-durability .proof-cell { padding-left: 0; padding-right: 0; }
}
@media (max-width: 640px) {
  #union-durability .cap-grid, #union-durability .proof-grid { --cap-cols: 1; gap: 4px; }
  #union-durability .cap-grid > *, #union-durability .proof-grid > * { flex-basis: 100%; max-width: 100%; }
  #union-durability .cap-cell, #union-durability .proof-cell { padding: 16px 22px 18px; }
  #union-durability .cap-cell_name, #union-durability .proof-cell_result { font-size: 19px; }
}
/* ── headings inside a staggered row's copy column ──────────────────
   The intro scale (up to 56px) is set for a centred 700px measure; in the
   420px copy column it wraps to five or six lines. The row scale is smaller,
   matching home's .fig-h2 against the same column width. */
#union-durability .fig-copy .heading-style-h2, #union-durability .fig-copy .heading-style-h3 {
  font-size: clamp(25px, 2.7vw, 40px); line-height: 1.12; letter-spacing: -0.02em;
}
#union-durability .fig-copy .text-size-medium, #union-durability .fig-copy .text-size-regular {
  font-size: clamp(15.5px, 1.4vw, 17.5px); line-height: 1.6;
  color: var(--fig-body); max-width: none; margin-left: 0; margin-right: 0;
}
#union-durability .fig-copy .text-style-tagline { margin-bottom: 14px; }
#union-durability .fig-copy > div { max-width: none; }
/* ── anchor landings ────────────────────────────────────────────────
   The navbar is sticky, so a bare #anchor jump puts the section's first line
   underneath it. union-system.css sets this for its own pages; the nocturne
   pages (agents, inference) carry no equivalent, so it is stated here for
   every section the contents cards can target. */
#union-durability .fig-sec[id], #union-durability .fig-cta[id] { scroll-margin-top: 6rem; }
/* durability states this band's heading as a bare <h2> inside a layout3 row,
   so it renders small; the other pages use .heading-style-h2 */
#union-durability .fig-oss h2 {
  font-size: clamp(26px, 4vw, 48px); line-height: 1.12;
  letter-spacing: -0.025em; text-wrap: balance;
}
/* ── one button size across every closing CTA ───────────────────────
   Measured before this rule, at 1440: the union-system pages rendered 42px
   tall (.button, 16px/8-20 padding) while the nocturne pages rendered 39px
   for the primary and 30px for the secondary (.btn, 14px, with padding set
   inline). Three sizes across six pages, and two of them inside one block.
   Everything is pinned to the larger format here — the inline padding and
   font-size on the nocturne anchors need !important to give way. */
#union-durability .fig-cta .button, #union-durability .fig-cta .btn {
  padding: 14px 28px !important;
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 999px !important;
  border-width: 1px; border-style: solid;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; white-space: nowrap; text-decoration: none;
}
#union-durability .fig-cta .button .button_text, #union-durability .fig-cta .btn .button_text { font-size: inherit; font-weight: inherit; }
/* the mono note that sits beside them ("pip install flyte") sits on the baseline */
#union-durability .fig-cta .button-group, #union-durability .fig-cta .fig-cta_btns { align-items: center; }
/* ── one content column across the platform pages ──
   container-large's 80rem resolved to 1333px against the site's fluid root.
   Pin it to the measure the home page's .u-wrap produces (1440 less its 64px
   gutters) so every platform page reads at the same width as home.
   (pricing does not load this file.) */
#union-durability .container-large { max-width: 1312px; }
/* ══ the isometric widget (union-iso3d.js) ═══════════════════════════════
   The drawing itself is built in JS; what it needs from CSS is the page's
   own type and neutrals, so the same renderer reads correctly on every
   ground. Font sizes are NOT set here on purpose — union-iso3d.js writes
   font-size and letter-spacing as presentation attributes, scaled to the
   render width, and a CSS rule would beat the attribute and pin the type
   to one size however wide the visual gets.

   Markup each page repeats:

     <div class="fig-factory" id="x-iso">
       <div class="fig-factory_stage" id="x-iso-stage"></div>
       <div class="fig-factory_caps" aria-hidden="true">… legend …</div>
     </div>

   No card: the drawing sits straight on the page ground so the geometry
   gets the whole column instead of paying for a frame and its padding. */
#union-durability .fig-factory { overflow: visible; }
/* Stacked under the copy, a hero row's gap bottoms out at its clamp and the
   plate's top corner ends up crowded against the CTAs. Only the narrow
   layout needs it — beside the copy the drawing is centred and has room. */
#union-durability .fig-factory.is-compact { padding-top: 28px; }
#union-durability .fig-factory_stage { display: block; min-height: 1px; }
#union-durability .fig-factory_stage svg { display: block; width: 100%; height: auto; }
#union-durability .fig-factory_leader {
  fill: none; stroke: var(--brand-gray-500, var(--color-neutral-700, #4a4e52)); stroke-width: 1;
}
#union-durability .fig-factory_anchor {
  fill: var(--fig-heading); stroke: var(--theme-bg, var(--color-bg, #000));
}
#union-durability .fig-factory_lt { font-family: var(--font-code, ui-monospace, monospace); fill: var(--fig-heading); }
#union-durability .fig-factory_ls { font-family: var(--font-body, system-ui, sans-serif); fill: var(--fig-muted); }
/* ── narrow containers ──
   Below 560px the side labels leave the SVG (union-iso3d.js filters them and
   sets .is-compact) and reappear here as captions. Their leader lines are
   laid out in screen units, so at phone widths they ate more of the viewBox
   than the drawing did. */
#union-durability .fig-factory_caps { display: none; }
#union-durability .fig-factory.is-compact .fig-factory_caps { display: grid; gap: 7px; margin: 14px 2px 2px; }
#union-durability .fig-factory_cap {
  display: flex; align-items: baseline; gap: 8px; font-size: 12px; line-height: 1.4;
  color: var(--fig-muted);
}
#union-durability .fig-factory_cap i {
  flex: none; width: 8px; height: 8px; border-radius: 2px;
  transform: translateY(-1px);
  background-color: var(--brand-gray-500, var(--color-neutral-700, #4a4e52));
}
/* yellow is Union, in the legend exactly as in the drawing */
#union-durability .fig-factory_cap i.is-union { background-color: var(--fig-accent); }
/* run state — see N.state in union-iso3d.js. Same three colours the drawing
   uses for a step that fails, retries and succeeds. */
#union-durability .fig-factory_cap i.is-fail { background-color: #e04b4d; }
#union-durability .fig-factory_cap i.is-retry { background-color: #5b90f7; }
#union-durability .fig-factory_cap i.is-ok { background-color: #8bcb6a; }
#union-durability .fig-factory_cap i.is-union-out {
  background-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--fig-accent);
}
#union-durability .fig-factory_cap i.is-mat { background-color: var(--fig-heading); }
/* The one legend entry standing for something that moves, so it marches
   instead of sitting still: a repeating radial-gradient of dots stepped
   exactly one tile per cycle, which loops seamlessly and mirrors the mote
   stream in the drawing. background-position is compositor-friendly, so this
   costs nothing next to the canvas beside it. */
#union-durability .fig-factory_cap i.is-raw {
  background-color: transparent;
  background-image: radial-gradient(circle at 1.5px 50%, var(--fig-body) 1.4px, transparent 1.6px);
  background-size: 4px 100%;
  background-repeat: repeat-x;
  animation: fig-factory-stream 900ms linear infinite;
}

@keyframes fig-factory-stream { from { background-position-x: 0; } to { background-position-x: 4px; } }
@media (prefers-reduced-motion: reduce) {
  #union-durability .fig-factory_cap i.is-raw { animation: none; }
}
#union-durability .fig-factory_cap-k {
  font-family: var(--font-code, ui-monospace, monospace); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fig-heading); white-space: nowrap;
}
#union-durability .fig-factory_cap-v { color: var(--fig-muted); }
/* A scene used as a band of its own rather than as a cell in a hero row — the
   durability page, whose hero already spends its right column on a tabbed
   product demo. Capped well short of the container: at the full 1312 the
   drawing outgrew the copy around it and its plate ran under the sticky nav.
   860 keeps the leaders (the compact breakpoint is 560) without letting the
   scene become the page. */
#union-durability .fig-factory.is-band { max-width: 860px; margin: 0 auto; }
#union-durability .fig-factory.is-band .fig-factory_caps { justify-content: center; }


/* ═══ port-only: the page's relationship to the host site ═══
   Carried over from the deployed sheet — these have no counterpart
   in the repo, because the standalone prototype has its own navbar
   and no host chrome to clear. */
#union-durability {
  /* brand */
  --brand-dark: #18191a;
  --brand-gray-100: #f2f3f3;
  --brand-gray-300: #cccfd1;
  --brand-gray-350: #81858b;
  --brand-gray-400: #72757a;
  --brand-yellow-500: #fcb51f;
  --brand-purple: #6f2aef;
  --brand-red: #cd3234;
  --brand-green: #78b856;
  --brand-orange: #e8883a;
  --brand-blue: #3378f5;
  --brand-pink: #ad3abb;
  --brand-brown: #a65a17;
  --brand-blue-dark: #1648b8;
  --brand-green-dark: #008013;
  --brand-red-dark: #980202;
  --white-12: #ffffff1f;
  /* theme roles */
  --theme-background: #000000;
  --theme-heading: #ffffff;
  --theme-body: var(--brand-gray-300);
  --theme-accent: var(--brand-yellow-500);
  --theme-border: var(--white-12);
  --theme-card: var(--brand-dark);
  /* type */
  --font-body: "Yellix", Arial, sans-serif;
  --font-heading: "Yellix", Arial, sans-serif;
  --font-code: "IBM Plex Mono", Tahoma, sans-serif;
  --heading-weight: 600;
  --heading-line-height: 1.05;
  /* ui — note: tighter radii than flyte.org */
  --radius-small: .5rem;
  --radius-medium: 1rem;
  --radius-large: 1.5rem;
  --border-width: 1px;
}
#union-durability {
  margin: 0;
  background-color: var(--theme-background);
  color: var(--theme-body);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#union-durability p { margin: 0; }
#union-durability a { color: inherit; }
#union-durability img { max-width: 100%; display: block; }
#union-durability code, #union-durability pre { font-family: var(--font-code); }
/* ── prototype deviation: in-page anchor behaviour ──
   The hero's secondary CTA and the proof rows link to sections on the same
   page. Without these two rules the browser jumps instantly and lands with
   the heading underneath the sticky navbar. Smooth scroll is disabled for
   visitors who asked for reduced motion. */
#union-durability { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  #union-durability { scroll-behavior: auto; }
}
#union-durability [id] { scroll-margin-top: 6rem; }
/* some anchors target widgets, not sections *//* ═══ durability/style.css ═══ *//* style.css — /durability page styles.
   Loads on top of ../_shared/union-system.css (tokens + site utility classes).
   Every class below is either (a) a class that already exists in the union.ai
   Webflow project, restated here because the shared stylesheet doesn't carry it,
   or (b) a new Client-First component class for this page. The README maps them.

   Values were read out of the live Webflow bundle
   cdn.prod.website-files.com/6aa0903745dd86008ce33074/css/union-staging-*.shared.css
   so the prototype and the site agree. *//* ── theme-token aliases ─────────────────────────────────────────────
   The Webflow project names its theme roles `--_theme---*`. The shared
   prototype stylesheet names them `--theme-*`. Alias one to the other so
   markup and CSS lifted from either side drops in unchanged. */
#union-durability {
  --_theme---background: var(--theme-background);
  --_theme---heading: var(--theme-heading);
  --_theme---body: var(--theme-body);
  --_theme---accent: var(--theme-accent);
  --_theme---border: var(--theme-border);
  --_theme---container: var(--theme-card);
  --_ui-styles---radius--medium: 1rem;
  --_ui-styles---radius--large: 1.5rem;
  --_typography---font-styles--code: var(--font-code);
}
/* ── fluid root type scale ───────────────────────────────────────────
   The live site sizes the root font off the viewport, which is what makes
   `container-large` (80rem) read as ~1440px at 1456px wide rather than 1280px.
   Every rem on the page — including the ones in union-system.css — keys off it.
   Lifted verbatim from the site's page-level <style> block; keep the two in step. */
#union-durability {
  --font-from: 18;
  --font-to: 20;
  --vw-from: calc(1920 / 100);
  --vw-to: calc(2400 / 100);
  --coefficient: calc((var(--font-to) - var(--font-from)) / (var(--vw-to) - var(--vw-from)));
  --base: calc((var(--font-from) - var(--vw-from) * var(--coefficient)) / 16);
}
#union-durability { font-size: calc(var(--base) * 1rem + var(--coefficient) * 1vw); }
@media screen and (max-width: 1920px) {
  #union-durability { --font-from: 16; --font-to: 18; --vw-from: calc(1440 / 100); --vw-to: calc(1920 / 100); }
}
@media screen and (max-width: 1440px) {
  #union-durability { --font-from: 14; --font-to: 16; --vw-from: calc(479 / 100); --vw-to: calc(1440 / 100); }
}
@media screen and (max-width: 479px) {
  #union-durability { --font-from: 14; --font-to: 16; --vw-from: calc(1 / 100); --vw-to: calc(479 / 100); }
}
#union-durability {
  background-color: var(--theme-background);
  color: var(--theme-body);
}
/* ═══ _shared/union-fig.css ═══ *//* ══════════════════════════════════════════════════════════════════════════
   union-fig.css — the home page's design language, shared by the platform
   pages (advanced-scheduling, agents, ai-factory, durability, inference,
   sovereign-ai).

   Source of truth: the "Home — Redesign" comp (Figma L1U2YQLR…, page 14:8)
   as realised in union/home/style.css. The geometry it encodes:

     · 1440 frame, 64px gutters, 1312 of content            (.u-wrap)
     · 130px of air above and below every section           (.fig-sec)
     · alternating grounds, black / near-black              (.is-alt)
     · centred intro pairs — big h2 over a 700px lead       (.fig-intro)
     · content rows as a 420 / 804 split with an 88px gap,
       sides alternating down the page                      (.fig-row .is-flip)
     · each row led by a numbered eyebrow, a yellow
       uppercase label, an h2, a lead, dot points, a link    (.fig-eyebrow …)
     · a full-bleed yellow closing block                     (.fig-cta)

   Two token systems are in play across these pages — union-system.css
   (--theme-* and --brand-*) and union-nocturne.css (--color-*). The two share no
   names, so every colour below reads the theme token first and falls back to
   the nocturne one. Nothing here needs a per-page bridge.
   ══════════════════════════════════════════════════════════════════════════ */
#union-durability {
  --fig-accent:  var(--theme-accent,  var(--color-accent, #fcb51f));
  --fig-heading: var(--theme-heading, var(--color-text, #ffffff));
  --fig-body:    var(--theme-body,    var(--color-neutral-400, #cccfd1));
  --fig-muted:   var(--brand-gray-350, var(--color-neutral-500, #aeb2b5));
  --fig-faint:   var(--brand-gray-400, var(--color-neutral-600, #81858b));
  --fig-border:  var(--theme-border,  var(--color-divider, rgba(255,255,255,.12)));
  --fig-ground:  #0c0c0d;   /* the alternating band, one step off black */
  --fig-ink:     #0b0b0c;   /* type on the yellow block */
}
/* ═══ port-only: the page's relationship to the host site ═══
   Carried over from the deployed sheet — these have no counterpart
   in the repo, because the standalone prototype has its own navbar
   and no host chrome to clear. */
#union-durability {
  /* brand */
  --brand-dark: #18191a;
  --brand-gray-100: #f2f3f3;
  --brand-gray-300: #cccfd1;
  --brand-gray-350: #81858b;
  --brand-gray-400: #72757a;
  --brand-yellow-500: #fcb51f;
  --brand-purple: #6f2aef;
  --brand-red: #cd3234;
  --brand-green: #78b856;
  --brand-orange: #e8883a;
  --brand-blue: #3378f5;
  --brand-pink: #ad3abb;
  --brand-brown: #a65a17;
  --brand-blue-dark: #1648b8;
  --brand-green-dark: #008013;
  --brand-red-dark: #980202;
  --white-12: #ffffff1f;
  /* theme roles */
  --theme-background: #000000;
  --theme-heading: #ffffff;
  --theme-body: var(--brand-gray-300);
  --theme-accent: var(--brand-yellow-500);
  --theme-border: var(--white-12);
  --theme-card: var(--brand-dark);
  /* type */
  --font-body: "Yellix", Arial, sans-serif;
  --font-heading: "Yellix", Arial, sans-serif;
  --font-code: "IBM Plex Mono", Tahoma, sans-serif;
  --heading-weight: 600;
  --heading-line-height: 1.05;
  /* ui — note: tighter radii than flyte.org */
  --radius-small: .5rem;
  --radius-medium: 1rem;
  --radius-large: 1.5rem;
  --border-width: 1px;
}
#union-durability {
  margin: 0;
  background-color: var(--theme-background);
  color: var(--theme-body);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#union-durability p { margin: 0; }
#union-durability a { color: inherit; }
#union-durability img { max-width: 100%; display: block; }
#union-durability code, #union-durability pre { font-family: var(--font-code); }
/* ── prototype deviation: in-page anchor behaviour ──
   The hero's secondary CTA and the proof rows link to sections on the same
   page. Without these two rules the browser jumps instantly and lands with
   the heading underneath the sticky navbar. Smooth scroll is disabled for
   visitors who asked for reduced motion. */
#union-durability { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  #union-durability { scroll-behavior: auto; }
}
#union-durability [id] { scroll-margin-top: 6rem; }
/* some anchors target widgets, not sections */

/* union-code-theme.css — syntax highlighting for every code block in website/union/.
   Tokens lifted verbatim from ../../color-palette/union-code-theme.css
   ("Union Yellow Dark" v1). That file is the source of truth: if the palette
   changes, re-copy sections 1 and 1c below rather than editing them here.

   Every token meets WCAG AA (4.5:1) on its own card background in both themes.
   Section 2 maps the tokens onto the class names the prototypes already use:
     .tok-*      model-factory, advanced-scheduling
     .sov-tok-*  sovereign-ai
     .code-*     home (emitted by script.js)
*/

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
#union-durability {
  /* surface */
  --code-bg:            #18191a;  /* = --brand-dark, the design-system card  */
  --code-border:        #ffffff1f;/* = --theme-border                        */
  --code-radius:        1rem;     /* = --radius-medium                       */

  /* neutrals — carry ~70% of the characters in a snippet */
  --code-fg:            #e6e8ea;  /* identifiers, variables, plain text      */
  --code-param:         #c9ced4;  /* keyword-argument + parameter names      */
  --code-punct:         #9aa0a6;  /* = -> , : ( ) [ ] and all operators      */
  --code-comment:       #848c95;  /* italic — the quietest token             */

  /* accents — four hues, nothing else */
  --code-decorator:     #fdb51f;  /* Union Yellow · @env.task, @flyte.trace  */
  --code-keyword:       #b69bf5;  /* async def await return try except for   */
  --code-constant:      #b69bf5;  /* None True False self cls (italic)       */
  --code-function:      #74b6f2;  /* function definitions + call sites       */
  --code-class:         #5fcbc0;  /* classes, type annotations, builtins     */
  --code-string:        #8fcb7a;  /* string + f-string literals              */
  --code-number:        #ef9b55;  /* numeric literals                        */

  /* console / diff extras (terminal blocks, +/- blocks) */
  --code-error:         #e8676a;
  --code-added:         #8fcb7a;
  --code-removed:       #e8676a;
  --code-muted:         #848c95;

  /* chrome */
  --code-selection:     rgba(253, 181, 31, .22);
  --code-line-highlight:rgba(253, 181, 31, .08);
  --code-inline-bg:     #242628;
  --code-scrollbar:     #3a3d40;
}
#union-durability pre {
  border: 1px solid var(--code-border);
  border-radius: var(--code-radius);
  padding: 1.5rem;
  overflow-x: auto;
}
/* ══════════════════════════════════════════════════════════════════════════
   WEBFLOW PORT ONLY — none of this is in the repo's style.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* This page was duplicated from Home, so it carries Home's stock sections and
   the "section - cta" ComponentInstance above the prototype. set_visibility is
   unsupported on ComponentInstances and remove_element is irreversible, so
   they are suppressed here. This stylesheet loads only on this page, so the
   unscoped rules are page-scoped by virtue of that. */
.main-wrapper > section.section_cta25 { display: none; }
/* The host site styles BARE elements, and those rules reach inside embeds — a
   scoped rule only wins for properties it actually declares. Same trap the
   /signup port hit with blockquote and figcaption. */
#union-durability figure, #union-durability blockquote, #union-durability figcaption {
  margin: 0; padding: 0; border: 0; text-align: inherit;
}
#union-durability ul, #union-durability ol { margin: 0; padding: 0; }
#union-durability button { font: inherit; color: inherit; }
/* The site's .navigation is position:fixed (~8rem tall), so page content would
   start underneath it. Clear it the way the site's own first section does
   (.section_header26 { padding-top: 8rem }), and keep anchor targets from
   landing under the bar. The 8.5rem matches the 136px the port shim subtracts
   in its click handler — change both together. */
#union-durability { padding-top: 8rem; }
#union-durability [id] { scroll-margin-top: 8.5rem; }
/* ── host navbar CTA (port only) ──────────────────────────────────────────
   Deliberately UNSCOPED: the site's navbar renders outside the wrapper. The
   shim relabels the navbar's "Chat with an engineer" to "Get Started" and
   flips the attribute once the hero scrolls away. Hidden from FIRST PAINT so
   the wrong label never flashes before the deferred script runs; visibility
   (not display) keeps the navbar from reflowing when it appears. */
.navigation .navbar2_button-wrapper > a.button { opacity: 0; visibility: hidden; }
.navigation a[data-nav-signup] {
  opacity: 0; visibility: hidden;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.navigation a[data-nav-signup][data-nav-signup-on="1"] {
  opacity: 1; visibility: visible;
  transition: opacity 240ms ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .navigation a[data-nav-signup] { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   PORT-ONLY RULES — these lived in a <style> tag inside the stylesheet
   embed until now. Same rules, same order, same place in the cascade:
   they sat immediately after the <link>, so appending them to the end of
   the sheet it loads keeps them winning the same ties. Moving them here
   leaves that embed a single <link> line and puts every rule the page
   uses into one versioned file.
   ══════════════════════════════════════════════════════════════════════ */
/* Hold the fixed nav's height open; the next embed replaces it with the
     measured value. Keep this embed free of script tags, including inside
     comments — Webflow flags any embed whose code contains that token and
     renders none of its contents on the Designer canvas. */
  #union-durability { padding-top: 138px; }
  @media (max-width: 991px) { #union-durability { padding-top: 96px; } }

  /* ── host navbar ────────────────────────────────────────────
     Unscoped on purpose: the bar renders outside the wrapper above. */
  .navigation .navbar2_button-wrapper > a.navbar2_link {
    padding: 0;
    margin-right: .75rem;
    color: rgba(255, 255, 255, .62);
    white-space: nowrap;
    text-decoration: none;
    transition: color .18s ease;
  }
  .navigation .navbar2_button-wrapper > a.navbar2_link:hover,
  .navigation .navbar2_button-wrapper > a.navbar2_link:focus-visible { color: #fff; }
  .navigation .navbar2_button-wrapper > a.button,
  .navigation .navbar2_button-wrapper > a.button .button_text { white-space: nowrap; }
  .navigation .navbar2_button-wrapper > a.button {
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms ease, visibility 0s linear 240ms;
  }
  .navigation .navbar2_button-wrapper > a.button[data-nav-cta-on="1"] {
    opacity: 1;
    visibility: visible;
    transition: opacity 240ms ease, visibility 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    .navigation .navbar2_button-wrapper > a.button,
    .navigation .navbar2_button-wrapper > a.navbar2_link { transition: none; }
  }

  /* ── mobile ────────────────────────────────────────────────
     The five walkthrough tabs sit in a nowrap flex row — 498px of links in a
     351px column — and nothing above them scrolls or clips, so on a phone
     the whole page could be dragged 54px sideways. Let them wrap onto as
     many lines as they need, and stop the flex children from refusing to
     shrink below their content width. */
  @media (max-width: 991px) {
    #union-durability .layout407_tabs { max-width: 100%; min-width: 0; }
    #union-durability .layout407_tabs > * { min-width: 0; max-width: 100%; }
    #union-durability .layout407_tabs .tabs-menu { flex-wrap: wrap; }
  }

  /* ── mobile widgets ────────────────────────────────────────
     Drawn at desktop density, so on a phone the labels land below 13px.
     Raise the floor to 13px, 12.5px for the monospace runs. This page has
     no SVG diagrams — its widgets are all HTML. */
  @media (max-width: 767px) {
    #union-durability .speed_kicker,
    #union-durability .text-size-tiny,
    #union-durability .text-style-tagline { font-size: 13px; }

    #union-durability .code-callout,
    #union-durability .code-filename,
    #union-durability .code-line { font-size: 12.5px; }

    /* A little more room now that the type is bigger. */
    #union-durability .layout407_tab-link.is-small { padding: 9px 12px; }
    #union-durability .code-line { line-height: 1.6; }
  }