/* Feature previews share one baseline; each preview opens from the bottom right. */
.framer-15gusd4 .framer-f45yg8 { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: 560px auto; align-items: stretch !important; overflow: visible; }
.framer-15gusd4 .framer-p6wumi { display: grid !important; grid-template-rows: repeat(2,minmax(0,1fr)); gap: 24px !important; height: 100% !important; min-height: 0; }
.framer-15gusd4 .framer-g39jjz { height: 100% !important; min-height: 0; }
.framer-15gusd4 .framer-1v8jko1,
.framer-15gusd4 .framer-1oke5uq,
.framer-15gusd4 .framer-813zsj { position: relative; width: 100%; height: 100% !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; background-color: #09090b !important; border-radius: 16px; }
.framer-15gusd4 .framer-1v8jko1 > [data-framer-name="Content"],
.framer-15gusd4 .framer-1oke5uq > [data-framer-name="Content"] { position: absolute !important; top: 28px; left: 28px; width: 39% !important; padding: 0 !important; height: auto; z-index: 3; }
.framer-15gusd4 .framer-1i69qy9,
.framer-15gusd4 .framer-jcm8ue { position: absolute !important; right: 0 !important; bottom: 0 !important; top: auto !important; left: auto !important; width: 54% !important; height: 84% !important; margin: 0 !important; padding: 0 !important; border-radius: 12px 0 0 0 !important; overflow: hidden; z-index: 2; box-shadow: -10px -8px 36px #0006; }
.framer-15gusd4 [data-crux-demo] { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; border-radius: inherit; }
.framer-15gusd4 .framer-1oke5uq .cd-msgs { justify-content: flex-start; }
.framer-15gusd4 [data-framer-name="Glow@2x"], .framer-15gusd4 .framer-g39jjz > [data-framer-name="Glow"] { display: none !important; }
.framer-15gusd4 .framer-1xdmuml { position: absolute !important; top: 28px; left: 28px; right: 28px; padding: 0 !important; width: auto !important; z-index: 3; }
.framer-15gusd4 .framer-6nlk1i { position: absolute !important; top: 154px !important; right: 0 !important; bottom: 0 !important; left: 28px !important; width: auto !important; height: auto !important; padding: 0 !important; transform: none !important; border-radius: 12px 0 0 0 !important; overflow: hidden; z-index: 2; }
.framer-15gusd4 .framer-15tbny3-container { grid-column: 1 / -1; width: 100%; height: auto !important; }
/* Keep the backdrop flush with the entire Watch demo wrapper. */
.framer-19fm57d .framer-1ab51x5 { isolation: isolate; overflow: hidden; border-radius: 24px; }
.framer-19fm57d .framer-li0xpw { inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: inherit !important; margin: 0 !important; padding: 0 !important; }
.framer-19fm57d .framer-li0xpw > .crux-ascii-layer { inset: 0 !important; mask-image: none !important; -webkit-mask-image: none !important; }
.framer-19fm57d .framer-li0xpw .gradient-ascii-container { width: 100%; height: 100%; }
/* Verified resource counts over the same native horizon preset. */
.crux-metrics { position: relative; isolation: isolate; overflow: hidden; border: 1px solid #ffffff20; border-radius: 16px; padding: 32px 36px 24px; background: #000; color: #f6f8ff; }
.crux-metrics-heading, .crux-metrics-grid, .crux-metrics-note { position: relative; z-index: 1; }
.crux-metrics-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 30px; }
.crux-metrics-heading > span { color: #a5d8ff; font: 10px/1.5 'Geist Mono',monospace; letter-spacing: .14em; }
.crux-metrics-heading > p { margin: 0; color: #bfc7d5; font: 13px/1.5 Geist,sans-serif; }
.crux-metrics-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; margin: 0; }
.crux-metrics-grid > div { display: flex; flex-direction: column-reverse; gap: 8px; padding-left: 24px; border-left: 1px solid #a5d8ff30; }
.crux-metrics-grid > div:first-child { padding-left: 0; border: 0; }
.crux-metrics-grid dd { margin: 0; font: 400 clamp(44px,4vw,64px)/1 'Arial MT',Arial,sans-serif; letter-spacing: -.06em; color: #f6f8ff; font-variant-numeric: tabular-nums; }
.crux-metrics-grid dt { color: #c5cfde; font: 14px/1.5 Geist,sans-serif; }
.crux-metrics-note { margin: 24px 0 0; color: #a1acbd; font: 12px/1.6 Geist,sans-serif; }
.crux-metrics[data-ascii-kind="metrics"] > .crux-ascii-layer {
 inset: 0; height: 100%; opacity: 1;
 /* Fade the native artwork behind the numbers; no tinted overlay. */
 mask-image: linear-gradient(#0002,#0003 55%,#0009), linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
 -webkit-mask-image: linear-gradient(#0002,#0003 55%,#0009), linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
 mask-composite: intersect; -webkit-mask-composite: source-in;
}
.crux-metrics-heading, .crux-metrics-grid, .crux-metrics-note { text-shadow: 0 2px 8px #000; }
/* All six capability cards receive a renderer; artwork recedes beneath their copy. */
.crux-ascii-surface[data-ascii-kind="capability"] { background-color: #09090b !important; }
.crux-ascii-surface[data-ascii-kind="capability"] > .crux-ascii-layer {
 mask-image: linear-gradient(#000b,#0007 25%,#0002 56%,transparent 90%);
 -webkit-mask-image: linear-gradient(#000b,#0007 25%,#0002 56%,transparent 90%);
}
/* Process illustrations share the native gradient, with plain readable copy below. */
.framer-1ujvdky .framer-d3c5zt { align-items: stretch !important; }
.crux-ascii-surface[data-ascii-kind="process"] { border-radius: 16px; overflow: hidden; background: #09090b !important; gap: 0 !important; height: auto !important; align-self: stretch; }
.crux-ascii-surface[data-ascii-kind="process"] > [data-framer-name="Content"] { padding: 24px !important; width: 100% !important; box-sizing: border-box; flex: 1; }
.crux-ascii-surface[data-ascii-kind="process"] > [data-framer-name="illustration"],
.crux-ascii-surface[data-ascii-kind="process"] > .framer-32pahq { height: 278px !important; flex: none !important; overflow: hidden; }
.crux-ascii-surface[data-ascii-kind="process"] > .crux-ascii-layer {
 inset: 0 0 auto; height: 278px;
 mask-image: linear-gradient(#000c,#000 35%,#0008 72%,transparent);
 -webkit-mask-image: linear-gradient(#000c,#000 35%,#0008 72%,transparent);
}
.framer-1ujvdky .framer-1npdje6,
.framer-1ujvdky .framer-1jqhire,
.framer-1ujvdky .framer-32pahq { background: transparent !important; }
/* Authentic local SVG brand marks: no badges, no text pills. */
.framer-olbck2 .crux-ticker-track { display: flex; flex-wrap: nowrap !important; gap: 52px !important; width: max-content !important; margin: 0; padding: 0; list-style: none; animation: crux-tool-loop 42s linear infinite !important; }
.framer-olbck2 .crux-logo { flex: none; padding: 0; border: 0; background: none; }
.framer-olbck2 .crux-logo a { display: inline-flex; justify-content: center; align-items: center; width: 72px; height: 64px; padding: 0 !important; border: 0; border-radius: 0; background: none; }
.framer-olbck2 .crux-logo img { width: 42px !important; height: 42px !important; object-fit: contain; opacity: .78; filter: brightness(0) invert(1); transition: opacity 180ms ease; }
.framer-olbck2 .crux-logo a:hover img, .framer-olbck2 .crux-logo a:focus-visible img { opacity: 1; }
.framer-olbck2 .crux-logo a:focus-visible { outline: 2px solid #a5d8ff; outline-offset: -2px; }
.framer-olbck2 section:has(> .crux-ticker-track) { padding: 12px 0 !important; mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) !important; -webkit-mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) !important; }
.framer-olbck2 section:has(> .crux-ticker-track):hover .crux-ticker-track,
.framer-olbck2 section:has(> .crux-ticker-track):focus-within .crux-ticker-track { animation-play-state: paused !important; }
@keyframes crux-tool-loop { to { transform: translateX(calc(-50% - 26px)); } }
@media(min-width:768px) and (max-width:1100px) {
 .framer-15gusd4 .framer-f45yg8 { grid-template-rows: 640px auto; }
 .framer-15gusd4 .framer-1v8jko1 > [data-framer-name="Content"], .framer-15gusd4 .framer-1oke5uq > [data-framer-name="Content"] { top: 22px; left: 22px; right: 22px; width: auto !important; }
 .framer-15gusd4 .framer-1i69qy9, .framer-15gusd4 .framer-jcm8ue { width: 76% !important; height: 52% !important; }
 .framer-15gusd4 .framer-6nlk1i { top: 190px !important; }
}
@media(max-width:767px) {
 .framer-15gusd4 .framer-f45yg8 { display: flex !important; flex-direction: column; gap: 20px !important; }
 .framer-15gusd4 .framer-p6wumi { display: grid !important; width: 100%; height: auto !important; grid-template-rows: repeat(2,320px); gap: 20px !important; }
 .framer-15gusd4 .framer-g39jjz { height: 440px !important; width: 100% !important; }
 .framer-15gusd4 .framer-1v8jko1 > [data-framer-name="Content"], .framer-15gusd4 .framer-1oke5uq > [data-framer-name="Content"] { top: 24px; left: 24px; right: 24px; width: auto !important; }
 .framer-15gusd4 .framer-1i69qy9, .framer-15gusd4 .framer-jcm8ue { width: 82% !important; height: 52% !important; }
 .framer-15gusd4 .framer-6nlk1i { top: 162px !important; left: 24px !important; }
 .crux-metrics { padding: 28px 24px; }
 .crux-metrics-heading { display: block; margin-bottom: 24px; }
 .crux-metrics-heading > p { margin-top: 8px; }
 .crux-metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 16px; }
 .crux-metrics-grid > div { padding-left: 0; border: 0; }
 .framer-olbck2 .crux-ticker-track { gap: 32px !important; animation-name: crux-tool-loop-mobile !important; }
 .framer-olbck2 .crux-logo a { width: 64px; }
 .framer-olbck2 .crux-logo img { width: 36px !important; height: 36px !important; }
}
@keyframes crux-tool-loop-mobile { to { transform: translateX(calc(-50% - 16px)); } }
@media(prefers-reduced-motion:reduce) {
 .framer-olbck2 .crux-ticker-track { animation: none !important; width: auto !important; flex-wrap: wrap !important; justify-content: center; gap: 20px !important; transform: none !important; }
 .framer-olbck2 .is-duplicate { display: none; }
 .framer-olbck2 section:has(> .crux-ticker-track) { mask-image: none !important; -webkit-mask-image: none !important; }
}
.framer-15gusd4 .framer-p6wumi { grid-template-columns: minmax(0,1fr) !important; justify-items: stretch !important; }
.framer-15gusd4 .framer-p6wumi > .framer-1v8jko1, .framer-15gusd4 .framer-p6wumi > .framer-1oke5uq { width: 100% !important; min-width: 0 !important; }
/* Keep labels crisp while the binary texture rises behind the previews. */
.framer-15gusd4 .framer-1v8jko1 > .crux-ascii-layer,
.framer-15gusd4 .framer-1oke5uq > .crux-ascii-layer { mask-image: linear-gradient(90deg,#0002 0%,#0002 39%,#000b 70%,#000) !important; -webkit-mask-image: linear-gradient(90deg,#0002 0%,#0002 39%,#000b 70%,#000) !important; }
.framer-15gusd4 .framer-813zsj > .crux-ascii-layer { mask-image: linear-gradient(#0002,#000 42%,#000) !important; -webkit-mask-image: linear-gradient(#0002,#000 42%,#000) !important; }

/* Persist the detail panel width when its scripted scene restarts. */
.framer-jcm8ue [data-preview="agent-detail"] .cd-panel { width: var(--agent-preview-width,520px) !important; flex: none; }

/* Tool row: icon + name lockups, five in view at a time (three on phones). The row is a size container,
   so every slot is a fifth of its width and the loop (two copies of the list) shifts by exactly half. */
.framer-olbck2 section:has(> .crux-ticker-track) { container-type: inline-size; }
.framer-olbck2 .crux-ticker-track { gap: 0 !important; animation: crux-logos-scroll var(--logos-dur, 72s) linear infinite !important; }
.framer-olbck2 .crux-logo { width: calc(100cqw / 5); }
.framer-olbck2 .crux-logo a { width: 100%; height: 64px; gap: 10px; justify-content: center; color: rgba(255, 255, 255, .78); font: 500 18px/1 Geist, Inter, system-ui, sans-serif; letter-spacing: -.01em; white-space: nowrap; }
.framer-olbck2 .crux-logo img { width: 28px !important; height: 28px !important; flex: none; }
.framer-olbck2 .crux-logo a:hover, .framer-olbck2 .crux-logo a:focus-visible { color: #fff; }
.framer-olbck2 .crux-logo-name { display: block; }
/* Narrower edge fades than before, so five lockups read clearly at once. */
.framer-olbck2 section:has(> .crux-ticker-track) { mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) !important; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) !important; }
/* The loop distance is one full copy of the list. --logos-shift and --logos-dur are measured by the page script
   (#crux-ticker-loop) so the speed is constant (40px/s); -50% and 72s are the fallbacks before it runs. */
@keyframes crux-logos-scroll { to { transform: translateX(var(--logos-shift, -50%)); } }
@media (max-width: 767px) {
  .framer-olbck2 .crux-logo { width: calc(100cqw / 3); }
  .framer-olbck2 .crux-logo a { gap: 7px; font-size: 14px; }
  .framer-olbck2 .crux-logo img { width: 22px !important; height: 22px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .framer-olbck2 .crux-ticker-track { animation: none !important; }
  .framer-olbck2 .crux-logo { width: auto; padding: 0 14px; }
  .framer-olbck2 .crux-logo a { height: 52px; }
  .framer-olbck2 section:has(> .crux-ticker-track) { mask-image: none !important; -webkit-mask-image: none !important; }
  /* A static wrapped row can be taller than the single-line height Framer fixed for the marquee. */
  .framer-olbck2 section:has(> .crux-ticker-track),
  .framer-olbck2 .framer-czw9ju-container,
  .framer-olbck2 .framer-ZN7Zn,
  .framer-olbck2 .framer-1xpkl3b-container { height: auto !important; max-height: none !important; overflow: visible !important; }
}

/* Real lockups (icon + wordmark artwork) are sized by height, one deliberate height per brand so the
   wordmarks look optically even; the other tools keep an official mark with its name typed beside it. */
.framer-olbck2 .crux-logo { --lh: 28px; }
.framer-olbck2 .crux-logo--claude { --lh: 32px; }
.framer-olbck2 .crux-logo--codex,
.framer-olbck2 .crux-logo--ollama { --lh: 26px; }
.framer-olbck2 .crux-logo--webgpu { --lh: 36px; }
.framer-olbck2 .crux-logo--antigravity { --lh: 28px; }
.framer-olbck2 .crux-logo--opencode { --lh: 26px; }
.framer-olbck2 .crux-logo--python { --lh: 34px; }
.framer-olbck2 .crux-logo img.crux-lockup { display: block; flex: none; width: auto !important; height: var(--lh) !important; max-width: 100%; }
.framer-olbck2 .crux-logo img.crux-lockup { opacity: .92; }
.framer-olbck2 .crux-logo a:hover img.crux-lockup, .framer-olbck2 .crux-logo a:focus-visible img.crux-lockup { opacity: 1; }
@media (max-width: 767px) {
  .framer-olbck2 .crux-logo--claude { --lh: 26px; }
  .framer-olbck2 .crux-logo--codex,
  .framer-olbck2 .crux-logo--ollama { --lh: 20px; }
  .framer-olbck2 .crux-logo--webgpu { --lh: 28px; }
  .framer-olbck2 .crux-logo--antigravity { --lh: 22px; }
  .framer-olbck2 .crux-logo--opencode { --lh: 20px; }
  .framer-olbck2 .crux-logo--python { --lh: 26px; }
}

/* Colour on hover: each logo that has brand colours gets a second copy (mark in its colours, wordmark white) that
   fades in over the white one. Logos whose brand is black or white (Ollama, OpenCode, Rust, macOS) just brighten. */
.framer-olbck2 .crux-logo-art { position: relative; display: inline-flex; flex: none; }
.framer-olbck2 .crux-logo-art > img { transition: opacity 220ms ease; }
.framer-olbck2 .crux-logo-art > img.crux-logo-hover { position: absolute; left: 0; top: 0; width: 100% !important; height: 100% !important; max-width: none; filter: none !important; opacity: 0; pointer-events: none; }
.framer-olbck2 .crux-logo a:hover .crux-logo-hover,
.framer-olbck2 .crux-logo a:focus-visible .crux-logo-hover { opacity: 1 !important; }
.framer-olbck2 .crux-logo a:hover .crux-logo-art > img:not(.crux-logo-hover),
.framer-olbck2 .crux-logo a:focus-visible .crux-logo-art > img:not(.crux-logo-hover) { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { .framer-olbck2 .crux-logo-art > img { transition: none; } }

/* Universal logo size and spacing. Every logo is drawn so its artwork is 26px tall (20px on phones) regardless of
   how much padding its file has, and the gap between neighbours is the same 80px (44px on phones) measured
   between the visible artwork, not the files. Per logo: --lh is the image height that makes the artwork 26px,
   --pl / --pr are the empty space inside the file at its left and right edge, --dy lifts or drops it to centre
   the artwork. The numbers come from measuring each file's non-transparent pixels. Marks with a typed name only
   need --pl: the name, not the file, ends the item. */
.framer-olbck2 { --logo-gap: 80px; --s: 1; }
@media (max-width: 767px) { .framer-olbck2 { --logo-gap: 44px; --s: .77; } }
.framer-olbck2 .crux-logo { --lh: 26px; --pl: 0px; --pr: 0px; --dy: 0px; width: auto !important; flex: none; margin: 0 calc(var(--logo-gap) - var(--pr) * var(--s)) 0 calc(var(--pl) * var(--s) * -1); }
.framer-olbck2 .crux-logo a { width: auto; justify-content: flex-start; gap: calc(10px * var(--s)); position: relative; top: calc(var(--dy) * var(--s) * -1); }
.framer-olbck2 .crux-logo-name { font-size: calc(18px * var(--s)); }
.framer-olbck2 .crux-logo img.crux-lockup { height: calc(var(--lh) * var(--s)) !important; width: auto !important; }
.framer-olbck2 .crux-logo a > img:not(.crux-lockup),
.framer-olbck2 .crux-logo-art > img:not(.crux-lockup):not(.crux-logo-hover) { width: calc(var(--lh) * var(--s)) !important; height: calc(var(--lh) * var(--s)) !important; }
.framer-olbck2 .crux-logo--claude { --pr: 2.1px; }
.framer-olbck2 .crux-logo--codex { --pr: 2.2px; }
.framer-olbck2 .crux-logo--antigravity { --lh: 27px; --pr: 2.1px; --dy: .5px; }
.framer-olbck2 .crux-logo--opencode { --pl: 4.2px; --pr: 2.4px; }
.framer-olbck2 .crux-logo--ollama { --lh: 28.3px; --pl: 4.1px; --pr: 2.4px; }
.framer-olbck2 .crux-logo--webgpu { --lh: 47.5px; --pl: 7.9px; --pr: 12.8px; --dy: -3.4px; }
.framer-olbck2 .crux-logo--python { --lh: 29.6px; --pl: 1.1px; --pr: 7.3px; --dy: -1.2px; }
.framer-olbck2 .crux-logo--typescript { --lh: 26px; }
.framer-olbck2 .crux-logo--rust { --lh: 35.8px; --pl: 4.7px; --dy: -.3px; }
.framer-olbck2 .crux-logo--java { --pl: 2.5px; }
.framer-olbck2 .crux-logo--cpp { --pl: 1.5px; }
.framer-olbck2 .crux-logo--macos { --pl: 2.4px; }
@media (prefers-reduced-motion: reduce) { .framer-olbck2 .crux-logo { margin: 0 !important; padding: 0 20px; } }