/* ============================================================
   Aonyx — landing site
   Warm cream paper, JetBrains Mono, terracotta as the one accent.
   Sharp corners, thin black lines, no drop shadows. Borders do the work.
   The fake UI components share the product's design language so the page
   reads as a window into the real thing. They reward hover, but never
   move the rest of the page — and the cursor stays default on them.
   ============================================================ */

:root {
  --bg: #efece4;
  --surface-0: #f3f0e8;
  --surface-1: #faf7ef;
  --surface-2: #fbf9f3;
  --surface-3: #ffffff;
  --ink: #1a1814;

  --line: rgba(20, 16, 10, 0.12);
  --line-strong: rgba(20, 16, 10, 0.22);
  --line-ink: rgba(20, 16, 10, 0.45);

  --t-1: #1a1814;
  --t-2: #34302a;
  --t-3: #6b6359;
  --t-4: #948a7c;
  --t-5: #b6ad9d;

  --accent: #c96442;
  --accent-ink: #8c3e22;
  --accent-soft: rgba(201, 100, 66, 0.09);
  --accent-edge: rgba(201, 100, 66, 0.42);
  --accent-tint: rgba(201, 100, 66, 0.16);

  --ok: #a8a294;
  --ok-ink: #837c6e;
  --ok-soft: rgba(20, 16, 10, 0.05);
  --ok-edge: rgba(20, 16, 10, 0.18);

  --motion: #6b6359;
  --done: #7a8a6d;
  --done-soft: rgba(122, 138, 109, 0.12);
  --done-edge: rgba(122, 138, 109, 0.5);

  --up: #4d6a3c;
  --down: #8c3e22;
  --amber: #9c6a1d;
  --amber-soft: rgba(156, 106, 29, 0.1);
  --amber-edge: rgba(156, 106, 29, 0.4);

  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --maxw: 1120px;
  --pad: 48px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--t-1);
  font-family: var(--mono);
  font-variant-ligatures: none;
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a {
  color: inherit;
  text-decoration: none;
}
::selection {
  background: var(--accent-tint);
}

/* paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  background-image: radial-gradient(
    rgba(20, 16, 10, 0.025) 1px,
    transparent 1px
  );
  background-size: 3px 3px;
}

/* ───────────────────────── homepage header ───────────────────────── */
.site-masthead {
  display: flex;
  justify-content: center;
  padding: 28px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 14px;
  color: var(--t-1);
}
.brand-mark {
  width: 22px;
  height: 22px;
  display: block;
  flex: 0 0 auto;
}

/* ───────────────────────── layout shell ───────────────────────── */
main {
  position: relative;
  z-index: 2;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

section {
  position: relative;
}
/* full-height sections should land flush on an anchor jump; the masthead is not
   sticky, so no offset is needed. only the hero keeps room to reveal it above. */
section[id] {
  scroll-margin-top: 0;
}
#top {
  scroll-margin-top: 80px;
}

.eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-4);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow .num {
  color: var(--accent);
}
.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

/* ───────────────────────── hero ───────────────────────── */
.hero {
  padding: 8px 0 56px;
  overflow-x: clip;
}
.hero-inner {
  position: relative;
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 5vh, 60px);
}

/* ── hero workflow rail: Issue → … → Run Claude Code → … → PR ──
   a cursor drags optional steps in and out of the two slots; the core is fixed */
.hero-flow {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* reserve the lane below the rail for the squared return cycle */
  padding-bottom: 96px;
}
.flow-rail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 22px;
}
.fnode,
.fcore,
.fstep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  white-space: nowrap;
}
.fnode.fend {
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-2);
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  box-shadow: inset 3px 0 0 var(--accent);
}
.fend-icon {
  flex: 0 0 auto;
  color: var(--accent);
}
.fcore {
  position: relative;
  height: 50px;
  padding: 0 22px;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent-ink);
  box-shadow: 0 10px 26px rgba(201, 100, 66, 0.28);
}
.fcore-led {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #fff;
  animation: core-pulse 1.8s ease-in-out infinite;
}
@keyframes core-pulse {
  0%,
  100% {
    opacity: 0.5;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
  }
}
.fconn {
  width: 30px;
  height: 1px;
  flex: 0 0 auto;
  position: relative;
  background: var(--line-ink);
}
.fconn::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--line-ink);
}
.fslot {
  position: relative;
  width: 92px;
  height: 42px;
  flex: 0 0 auto;
}
.fslot::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed var(--line-strong);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fslot.empty::before {
  opacity: 1;
}

/* the first action is a wider drag box so its longer labels (generate prompt,
   create todos …) fit without reflowing the rail as the cursor swaps them */
.fslot-fixed {
  width: 150px;
}
.fslot-fixed .fstep {
  white-space: nowrap;
}

/* the split fork already shows direction — drop the arrowhead feeding into it,
   and give the merged line room so the cycle tap has breathing space */
.fconn-split::after {
  display: none;
}
.fconn-merge {
  width: 52px;
}

/* ── the parallel checks: flow splits into two lanes, then merges ── */
.fpar {
  position: relative;
  flex: 0 0 auto;
  width: 140px;
  height: 104px;
}
.fpar-wire {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.fpar-wire path {
  stroke: var(--line-ink);
  fill: none;
  stroke-width: 1;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.fpar-wire polygon {
  fill: var(--line-ink);
}
.fpar .fslot {
  position: absolute;
  left: 24px;
}
.fpar .lane-top {
  top: 0;
}
.fpar .lane-bot {
  bottom: 0;
}
.fstep {
  position: absolute;
  inset: 0;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--t-2);
  font-size: 12.5px;
  transition:
    opacity 0.19s ease,
    transform 0.19s ease;
}
.fstep.is-out {
  opacity: 0;
  transform: translateY(-9px) scale(0.82);
}

.flow-cursor-wrap {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(var(--cx, 0px), var(--cy, 0px));
  transition: transform 0.5s cubic-bezier(0.45, 0, 0.2, 1);
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}
.flow-cursor-wrap.on {
  opacity: 1;
}
.flow-cursor-svg {
  display: block;
  filter: drop-shadow(0 2px 3px rgba(46, 28, 16, 0.3));
  transition: transform 0.14s ease;
}
.flow-cursor-wrap.press .flow-cursor-svg {
  transform: scale(0.78) translate(1px, 1px);
}

/* ── the cycle: squared return lane wrapping the build region ── */
.cyc-loop {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
}
.cyc-line {
  stroke: var(--line-ink);
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-opacity: 0.5;
}
.cyc-dot {
  fill: var(--line-ink);
  opacity: 0.5;
}
/* keep the real rail painted above the cycle lane */
.flow-rail > .fnode,
.flow-rail > .fcore,
.flow-rail > .fslot,
.flow-rail > .fpar,
.flow-rail > .fconn {
  position: relative;
  z-index: 1;
}

/* ── the inbox queue: a lens scans a vertical filmstrip of runs ── */
.inbox-feed {
  position: relative;
  height: 356px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 62%,
    transparent 100%
  );
  mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
}
/* the opaque lens swallows four queue rows; the queue is split (in JS) into two
   clipped strips — above and below the lens — so the rows read as consecutive */
.hfeed-clip {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 1;
}
/* slider 1 — the compact queue, sliding up behind the lens */
.hfeed {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hrow {
  height: 44px;
  display: flex;
}
.hr-in {
  width: 100%;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  color: var(--t-3);
}
.hr-onto {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-4);
  white-space: nowrap;
}
.hr-onto::before {
  content: "◇";
  margin-right: 7px;
  color: var(--accent);
  opacity: 0.5;
}
.hr-title {
  font-size: 13.5px;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hr-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--ok-ink);
}
.hr-tag.attn {
  color: var(--accent-ink);
}

/* the lens — a fixed window; slider 2 brings each item up at full size */
.hlens {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  height: 176px;
  overflow: hidden;
  z-index: 2;
  border-left: 2px solid var(--accent);
  background-color: #efe2d7;
  transition:
    background-color 0.7s ease,
    border-color 0.7s ease;
}
.hlens.is-attn {
  background-color: #efe2d7;
  border-left-color: var(--accent);
}
.hlens.is-ok {
  background-color: var(--surface-0);
  border-left-color: var(--ok);
}
.hlens-track {
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hlens-item {
  position: relative;
  height: 176px;
  padding: 24px 20px;
}
.hlens-onto {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.hlens-onto::before {
  content: "◇";
  margin-right: 8px;
  color: var(--accent);
}
.hlens-title {
  margin: 12px 0 0;
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--t-1);
}
.hlens-detail {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--t-2);
  max-width: 54ch;
}
.hlens-tag {
  position: absolute;
  top: 24px;
  right: 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  color: var(--ok-ink);
  background: var(--ok-soft);
  border: 1px solid var(--ok-edge);
}
.hlens-tag.attn {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-edge);
}

.inbox-feed.snap .hfeed,
.inbox-feed.snap .hlens-track {
  transition: none;
}

/* the tagline, centered on the hero floor so the ontology owns the space above */
.hero-copy {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.hero h1 {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 24ch;
}
.hero-sub {
  margin: 22px auto 0;
  max-width: 51ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--t-2);
}
.hero-actions {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  height: 38px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--t-1);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    transform 0.05s ease;
}
.btn:hover {
  background: var(--surface-2);
  border-color: var(--line-ink);
}
.btn:active {
  transform: translateY(1px);
}
.btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-ink);
}
.btn.primary:hover {
  background: var(--accent-ink);
}
.btn .arrow {
  transition: transform 0.12s ease;
}
.btn:hover .arrow {
  transform: translateX(2px);
}

/* ───────────────────────── why us ───────────────────────── */
.why {
  padding: 72px 0;
}
.why-title {
  margin: 18px 0 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  max-width: 22ch;
}
.why-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-bottom: none;
}
.why-colhead {
  padding: 16px 22px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--line);
}
.why-cell {
  padding: 16px 22px;
  font-size: 14.5px;
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
}
.why-cell.them,
.why-colhead.them {
  color: var(--t-3);
  border-right: 1px solid var(--line);
}
.why-cell.us,
.why-colhead.us {
  color: var(--t-1);
  background: var(--accent-soft);
}
.why-colhead.us {
  color: var(--accent-ink);
}
.why-cell.us {
  font-weight: 500;
}

/* ───────────────────────── component block scaffold ───────────────────────── */
.block {
  padding: 56px 0;
}
/* desktop: each section is a self-contained, vertically-centered screen */
@media (min-width: 1041px) {
  .block {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px 0 36px;
  }
}
.block-head {
  max-width: 60ch;
}
.block-head h2 {
  margin: 18px 0 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.block-head p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--t-3);
}
.stage {
  margin-top: 40px;
}

.panel {
  background: var(--surface-1);
  border: 1px solid var(--line);
}
.panel-bar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  color: var(--t-4);
  letter-spacing: 0.04em;
}
.panel-bar .dot3 {
  display: flex;
  gap: 5px;
}
.panel-bar .dot3 i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  display: block;
}
.panel-bar .ref {
  color: var(--t-3);
}
.panel-bar .title {
  color: var(--t-2);
}
.panel-bar .right {
  margin-left: auto;
}

/* status pills shared across components */
.kind {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  background: var(--surface-3);
  color: var(--t-2);
  white-space: nowrap;
}
.kind.issue {
  color: var(--accent-ink);
  border-color: var(--accent-edge);
  background: var(--accent-soft);
}
.kind.plan {
  color: var(--amber);
  border-color: var(--amber-edge);
  background: var(--amber-soft);
}
.kind.pr {
  color: var(--up);
  border-color: var(--done-edge);
  background: var(--done-soft);
}
.kind.review {
  color: var(--t-2);
}
.kind.deploy {
  color: var(--t-2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--line-strong);
  background: var(--surface-3);
  color: var(--t-3);
}
.pill .led {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.pill.needs {
  color: var(--accent-ink);
  border-color: var(--accent-edge);
  background: var(--accent-soft);
}
.pill.shipped {
  color: var(--done);
  border-color: var(--done-edge);
  background: var(--done-soft);
}
.pill.flight {
  color: var(--accent-ink);
  border-color: var(--accent-edge);
  background: var(--accent-soft);
}

/* ───────────── Block 3 — the run ───────────── */
.run {
  padding: 30px 26px 26px;
}
.run-pipe {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  row-gap: 14px;
}
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  color: var(--t-3);
  font-size: 12.5px;
  font-weight: 500;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}
.chip .led {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--t-5);
  transition: background 0.3s ease;
}
.chip .cmark {
  font-size: 10.5px;
  opacity: 0.8;
  margin-left: -2px;
}
.chip.fail .cmark,
.chip.done .cmark {
  opacity: 1;
}
.chip.active {
  border-color: var(--accent-edge);
  color: var(--accent-ink);
}
.chip.active .led {
  background: var(--accent);
  animation: run-pulse 1.4s ease-in-out infinite;
}
.chip.fail {
  border-color: var(--accent-edge);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.chip.fail .led {
  background: var(--accent);
  animation: none;
}
.chip.done {
  border-color: var(--done-edge);
  background: var(--done-soft);
  color: var(--up);
}
.chip.done .led {
  background: var(--done);
  animation: none;
}

.chip-link {
  width: 28px;
  height: 1px;
  background: var(--line-strong);
  flex: 0 0 auto;
  transition: background 0.3s ease;
}
.chip-link.live {
  background: var(--accent);
}
.chip-link.ok {
  background: var(--done);
}

.chip.rerun {
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    background 0.3s,
    border-color 0.3s,
    color 0.3s;
  width: 0;
  padding: 0;
  border-width: 0;
  overflow: hidden;
}
.chip.rerun.show {
  opacity: 1;
  transform: scale(1);
  width: auto;
  padding: 0 14px;
  border-width: 1px;
}
.chip-link.rerun-link {
  width: 0;
  transition:
    width 0.3s ease,
    background 0.3s ease;
}
.chip-link.rerun-link.show {
  width: 28px;
}

.run-metrics {
  margin-top: 24px;
  display: flex;
  gap: 40px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.metric .mlabel {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-4);
}
.metric .mval {
  font-size: 26px;
  font-weight: 700;
  color: var(--t-1);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.metric .mval .unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--t-4);
  margin-left: 3px;
}

/* odometer rolling digits */
.mroll {
  display: inline-flex;
  align-items: flex-end;
  line-height: 1;
}
.rcol {
  display: inline-block;
  width: 1ch;
  height: 1em;
  line-height: 1;
  overflow: hidden;
}
.rtrack {
  display: block;
  will-change: transform;
}
.rtrack > span {
  display: block;
  height: 1em;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rstatic {
  display: inline-block;
  line-height: 1;
}
.rstatic.runit {
  font-size: 13px;
  font-weight: 500;
  color: var(--t-4);
  margin-left: 2px;
  padding-bottom: 0.06em;
}
.rstatic.rgap {
  width: 0.32em;
}

/* ───────────── Block 04 — what it enables: a review across domains ───────────── */
.review {
  padding: 14px 18px 16px;
}

/* The industry-specific check: each domain's pictograms are their OWN cards, side
   by side in a .bgroup. One group fills the slot at a time; within it the cards fade
   in one after another from above, and fade back up to above on the way out. */
.bstage {
  position: relative;
  margin: 16px 0 6px;
  min-height: 168px;
}
.bgroup {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 11px;
  justify-content: center;
  align-items: stretch;
}
/* every card is a titled asset panel: a title-bar label, the graphic in the body,
   a bare readout at the foot. a busy card takes 2/3 (w2), a compact one 1/3 (w1). */
.bcard {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  box-shadow:
    0 14px 30px rgba(46, 28, 16, 0.1),
    0 3px 8px rgba(46, 28, 16, 0.06);
  opacity: 0;
  transform: translateY(-15px);
  transition:
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.33, 0.72, 0.05, 1);
  overflow: hidden;
  text-align: left;
}
.bcard.in {
  opacity: 1;
  transform: translateY(0);
}
.bcard.w2 {
  flex: 2 1 0;
}
.bcard.w1 {
  flex: 1 1 0;
}
.bc-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-3);
  padding: 7px 11px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.gbody {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 12px;
}
.gbody svg {
  width: 100%;
  height: 100%;
}
.bc-val {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--t-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 8px 11px;
  border-top: 1px solid var(--line);
}

/* ── graphics: each card the instrument the review reads for that PR ── */
/* aero A — WCET execution-time distribution against the loop deadline (dashed);
   the worst-case tail bars hug the budget in accent */
.gwcet {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.gwcet rect {
  fill: var(--t-3);
}
.gwcet rect.over {
  fill: var(--accent);
}
.gwcet .dl {
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-dasharray: 3 2.5;
  vector-effect: non-scaling-stroke;
}
/* aero B — control step response settling to the setpoint (dashed) inside a
   tolerance band; overshoot past the band is drawn in accent */
.gstep {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.gstep .band {
  fill: var(--t-4);
  opacity: 0.1;
}
.gstep .set {
  stroke: var(--t-4);
  stroke-width: 1;
  stroke-dasharray: 3 2.5;
  vector-effect: non-scaling-stroke;
}
.gstep polyline {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.gstep .resp {
  stroke: var(--t-1);
  stroke-width: 1.4;
}
.gstep .over {
  stroke: var(--accent);
  stroke-width: 1.7;
}
/* game — frame rate before vs after in one chart; the red band marks the stutter window */
.gfps {
  width: 100%;
  height: 46px;
  display: block;
  overflow: visible;
}
.gfps .warn {
  fill: var(--accent);
  opacity: 0.13;
}
.gfps polyline {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.gfps .before {
  stroke: var(--t-4);
  stroke-width: 1;
}
.gfps .after {
  stroke: var(--t-1);
  stroke-width: 1.4;
}
/* game — a rendered low-poly character mesh; the changed facet is highlighted in accent */
.g3d {
  width: 100%;
  height: 46px;
  display: block;
}
.g3d polygon {
  stroke: var(--surface-1);
  stroke-width: 0.7;
  stroke-linejoin: round;
}
.g3d .f1 {
  fill: var(--t-3);
}
.g3d .f2 {
  fill: var(--t-2);
}
.g3d .f3 {
  fill: var(--t-1);
}
.g3d .chg {
  fill: var(--accent);
}
/* cold A — reefer temperature log within the safe band; the leg that runs warm
   crosses the ceiling (dashed) and is drawn in accent (the excursion) */
.gtemp {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.gtemp .band {
  fill: var(--t-4);
  opacity: 0.08;
}
.gtemp .lim {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 3 2.5;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}
.gtemp .floor {
  stroke: var(--t-4);
  stroke-width: 0.8;
  stroke-dasharray: 2.5 2.5;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}
.gtemp polyline {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.gtemp .line {
  stroke: var(--t-2);
  stroke-width: 1.2;
}
.gtemp .over {
  stroke: var(--accent);
  stroke-width: 1.7;
}
/* cold B — solver cost per benchmark scenario vs the baseline (0%); a scenario
   that regresses points up in accent */
.gbench {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.gbench rect {
  fill: var(--t-3);
}
.gbench rect.over {
  fill: var(--accent);
}
.gbench .base {
  stroke: var(--t-4);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* grid A — 24h demand curve under the capacity ceiling (dashed); the evening peak
   crowding the ceiling is drawn in accent */
.gload {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.gload .area {
  fill: var(--t-4);
  opacity: 0.1;
  stroke: none;
}
.gload .cap {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-dasharray: 3 2.5;
  vector-effect: non-scaling-stroke;
}
.gload polyline {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.gload .load {
  stroke: var(--t-1);
  stroke-width: 1.4;
}
.gload .over {
  stroke: var(--accent);
  stroke-width: 1.8;
}
/* grid B — grid frequency hugging 60 Hz (nominal) inside the ±0.05 Hz deadband;
   an under-frequency dip below the band is drawn in accent */
.gfreq {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.gfreq .band {
  stroke: var(--t-4);
  stroke-width: 0.8;
  stroke-dasharray: 2.5 2.5;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
}
.gfreq .nom {
  stroke: var(--t-3);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.gfreq polyline {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.gfreq .line {
  stroke: var(--t-1);
  stroke-width: 1.3;
}
.gfreq .over {
  stroke: var(--accent);
  stroke-width: 1.6;
}

/* ── block 4 (metrics): one version bump, three delivery KPIs, each a different
   instrument. cost/run is the full-width hero (a line per workflow step); trust is a
   single rising line; iteration loops are before → after bars. cards carry data only ── */
.mbody {
  padding: 15px 16px 17px;
}
.mbody-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 1px 13px;
}
.mbody-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--t-1);
  letter-spacing: 0.02em;
}
.mbody-sub {
  font-size: 11px;
  color: var(--t-4);
  letter-spacing: 0.03em;
}
.kgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.kcard {
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  box-shadow:
    0 8px 18px rgba(46, 28, 16, 0.06),
    0 2px 5px rgba(46, 28, 16, 0.05);
  padding: 12px 13px 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* the hero spans the full width on top */
.khero {
  grid-column: 1 / -1;
}
.k-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.k-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-3);
}
.k-delta {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.k-delta.up {
  color: var(--up);
}
.k-delta.down {
  color: var(--down);
}
.k-val {
  font-family: var(--mono);
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
  color: var(--t-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.k-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--t-3);
  margin-left: 1px;
}
.k-unit.k-pre {
  margin: 0 1px 0 0;
}
.k-foot {
  font-size: 10.5px;
  color: var(--t-4);
  font-variant-numeric: tabular-nums;
}

/* cost per step — a bar per workflow step, each paired with its faint previous-version
   bar (v4) beside the current one (v5, accent). value sits left, bars fill the width */
.k-costline {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
}
.k-gbars {
  flex: 1;
  height: 78px;
  display: block;
  overflow: visible;
}
.k-gbars .was {
  fill: var(--t-4);
}
.k-gbars .now {
  fill: var(--accent);
}
.k-gbars .base {
  stroke: var(--line-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* legend pairing the faint/bold bars to v4/v5 */
.k-costfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.k-legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--t-4);
}
.k-legend .sw {
  width: 8px;
  height: 8px;
  display: inline-block;
}
.k-legend .sw.was {
  background: var(--t-4);
}
.k-legend .sw.now {
  background: var(--accent);
}

/* trust — a single rising line */
.k-line {
  width: 100%;
  height: 30px;
  display: block;
  overflow: visible;
}
.k-line polyline {
  fill: none;
  stroke: var(--t-1);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* iteration loops — same v4-faint / v5-accent language as the cost bars */
.k-bars {
  height: 44px;
}
.k-bars svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.k-bars .was {
  fill: var(--t-4);
}
.k-bars .now {
  fill: var(--accent);
}
.k-bars .base {
  stroke: var(--line-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* segmented timer bar under the window — one segment per domain. the active
   segment's fill sweeps over the dwell; each segment is a click-to-jump button */
.bseg {
  display: flex;
  gap: 7px;
  margin: 16px 2px 2px;
}
.bseg .seg {
  flex: 1 1 0;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
  -webkit-appearance: none;
  appearance: none;
  transition:
    opacity 0.2s ease,
    height 0.2s ease;
}
.bseg .seg:hover {
  opacity: 0.85;
}
.bseg .seg:focus-visible {
  outline: 2px solid var(--accent-edge);
  outline-offset: 3px;
}
.bseg .seg.on {
  opacity: 1;
  height: 5px;
}
.bseg .seg > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
}

/* windowed progress under the inbox queue: a dot for the run that just passed
   the lens, a filling strip for the one under it now, a dot for what's next */
.hseg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 16px 2px 2px;
}
.hs-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--line-strong);
  opacity: 0.6;
}
.hs-bar {
  width: 46px;
  height: 4px;
  border-radius: 999px;
  background: var(--line-strong);
  overflow: hidden;
}
.hs-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
}
/* both dots are click-to-step buttons; a padded pseudo-element gives each a
   comfortable hit target without disturbing the row's spacing */
button.hs-dot {
  position: relative;
  padding: 0;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease;
}
button.hs-dot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
}
button.hs-dot:hover {
  opacity: 1;
  background: var(--accent);
}
button.hs-dot:focus-visible {
  outline: 2px solid var(--accent-edge);
  outline-offset: 3px;
}

/* run progress under the panel: a strip fills across the run timeline, with a
   restart button that replays the animation (and spins on click) */
.rseg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin: 16px 2px 2px;
}
.rs-bar {
  flex: 0 0 auto;
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: var(--line-strong);
  overflow: hidden;
}
.rs-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
}
.rs-restart {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--t-2);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}
.rs-restart:hover {
  color: var(--accent);
  border-color: var(--accent-edge);
  background: var(--accent-soft);
}
.rs-restart:focus-visible {
  outline: 2px solid var(--accent-edge);
  outline-offset: 2px;
}
.rs-ico {
  display: block;
  font-size: 12px;
  line-height: 1;
}
.rs-restart.spin .rs-ico {
  animation: rs-spin 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes rs-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

/* shared frame: the PR header + the approve / reject action bar */
/* the PR header — the title is the focal point, an Open state pill beside it,
   and the branch / diff / files demoted to a quiet meta line below */
.pr-head {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}
.pr-titleline {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pr-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--up);
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: var(--done-soft);
  border: 1px solid var(--done-edge);
}
.pr-state .led {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--up);
  display: block;
}
.pr-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--t-1);
}
.pr-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 11px;
  color: var(--t-4);
}
.pr-meta .pr-num {
  color: var(--t-2);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pr-meta .pr-branch {
  color: var(--t-3);
}
.pr-meta .pr-diff {
  display: inline-flex;
  gap: 7px;
  font-variant-numeric: tabular-nums;
}
.pr-meta .pr-diff .add {
  color: var(--up);
}
.pr-meta .pr-diff .del {
  color: var(--down);
}
.pr-meta .pr-files {
  color: var(--t-4);
  margin-left: auto;
}

/* shared checks strip — the routine CI every PR runs */
.pr-checks {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 10.5px;
  color: var(--t-3);
}
.pchk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pchk .mk {
  font-size: 10px;
}
.pchk.ok .mk {
  color: var(--done);
}
.pchk.gate {
  margin-left: auto;
  color: var(--accent-ink);
  font-weight: 600;
}
.pchk.gate .mk {
  color: var(--accent);
}

.pr-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.pr-reviewers {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--t-4);
}
.pr-reviewers .avas {
  display: inline-flex;
}
.rv-ava {
  width: 19px;
  height: 19px;
  border-radius: 999px;
  margin-left: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--t-3);
  border: 1px solid var(--line-strong);
}
.rv-ava:first-child {
  margin-left: 0;
}
.rv-ava.you {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-ink);
}
.pr-actions-btns {
  display: inline-flex;
  gap: 10px;
}

.prbtn {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  height: 32px;
  padding: 0 16px;
  background: var(--surface-3);
  color: var(--t-2);
  border: 1px solid var(--line-strong);
  cursor: default;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}
.prbtn.ghost:hover {
  border-color: var(--line-ink);
  color: var(--t-1);
}
.prbtn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-ink);
}
.prbtn.primary:hover {
  background: var(--accent-ink);
}

@keyframes company-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ───────────── CTA ───────────── */
.cta {
  padding: 96px 0 100px;
  border-bottom: 1px solid var(--line);
}
.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.cta h2 {
  margin: 18px 0 0;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.18;
  max-width: 16ch;
}
.cta p {
  margin: 18px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--t-2);
  max-width: 42ch;
}
.cta .partners {
  margin-top: 22px;
  border-left: 2px solid var(--accent-edge);
  padding-left: 14px;
  font-size: 12.5px;
  color: var(--t-3);
  max-width: 60ch;
}
.cta .partners .nw {
  white-space: nowrap;
}
.cta .partners a {
  color: var(--t-2);
  border-bottom: 1px solid var(--accent);
}
.cta .partners a:hover {
  color: var(--accent-ink);
}

.form {
  background: var(--surface-1);
  border: 1px solid var(--line);
  padding: 26px 26px 28px;
}
.field {
  margin-bottom: 16px;
}
.field label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-4);
  margin-bottom: 7px;
}
.field input,
.field textarea {
  width: 100%;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--t-1);
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  padding: 10px 12px;
  outline: none;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--t-5);
}
.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
.form .btn.primary {
  width: 100%;
  justify-content: center;
  height: 42px;
  margin-top: 4px;
}
.form-note {
  margin-top: 12px;
  font-size: 11px;
  color: var(--t-5);
  line-height: 1.6;
}
.form-error {
  color: var(--down);
  font-size: 11.5px;
  margin-top: 10px;
  display: none;
}
.form-error.show {
  display: block;
}

.form-success {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface-1);
  border: 1px solid var(--accent-edge);
  border-left: 3px solid var(--accent);
  padding: 28px 26px;
}
.form-success.show {
  display: flex;
  animation: fade-up 0.3s ease-out;
}
.form-success .big {
  font-size: 17px;
  font-weight: 600;
  color: var(--t-1);
}
.form-success p {
  margin: 0;
  font-size: 13px;
  color: var(--t-3);
  max-width: 38ch;
}

/* ───────────────────────── footer ───────────────────────── */
footer {
  position: relative;
  z-index: 2;
  padding: 36px 0 48px;
}
.foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.foot-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--t-4);
}
.foot-top {
  padding-bottom: 8;
}
.foot .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--t-2);
  font-size: 12.5px;
}
.foot-tag {
  color: var(--t-3);
}
.foot .sp {
  flex: 1 1 auto;
}
.foot-social {
  display: inline-flex;
  gap: 18px;
}
.foot-social a {
  color: var(--t-3);
}
.foot-social a:hover {
  color: var(--accent-ink);
}
.foot-legal {
  display: inline-flex;
  gap: 18px;
  color: var(--t-4);
}
.foot-bottom a:hover {
  color: var(--accent-ink);
}

/* ───────────────────────── reveals / animation ───────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(10px);
}
.reveal.in-view {
  animation: fade-up 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes needs-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
@keyframes run-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* ───────────────────────── responsive ───────────────────────── */
@media (max-width: 880px) {
  :root {
    --pad: 24px;
  }
  .hero {
    padding: 24px 0 56px;
  }
  .hero-inner {
    min-height: 0;
    gap: 44px;
  }
  .hero-flow {
    padding: 8px 0;
  }
  .onto-web {
    display: none;
  }
  .why-grid {
    grid-template-columns: 1fr;
  }
  .cta-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .block {
    padding: 64px 0;
  }
  .run-metrics {
    gap: 28px;
  }

  /* ── the workflow rail can't fit its horizontal row on a narrow window, so
     fold it into a vertical pipeline: stack the steps, point the connectors
     down, and sit the two parallel checks side by side so the split still
     reads. the JS cycle loop already bails once the rail leaves a single row. */
  .flow-rail {
    flex-direction: column;
    flex-wrap: nowrap;
    row-gap: 0;
  }
  .fconn {
    width: 1px;
    height: 20px;
  }
  .fconn::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1px;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--line-ink);
    border-bottom: 0;
  }
  .fconn-merge {
    width: 1px;
    height: 20px;
  }
  .fslot-fixed {
    width: 156px;
  }
  .fpar {
    position: relative;
    width: auto;
    height: auto;
    display: flex;
    gap: 12px;
    justify-content: center;
    /* room above and below the lanes for the fork and merge arms */
    padding: 16px 0;
  }
  /* the horizontal split wire has no meaning once the lanes are stacked */
  .fpar-wire {
    display: none;
  }
  .fpar .fslot {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: 116px;
    height: 42px;
  }
  /* the split fans out to both lanes and the merge collects them back —
     squared brackets that reach each lane's centre, mirroring the desktop
     fork. left/right land on the two lane centres (58px in from each edge
     of the 244px-wide pair). */
  .fpar::before,
  .fpar::after {
    content: "";
    position: absolute;
    left: 58px;
    right: 58px;
    height: 16px;
    border: 1px solid var(--line-ink);
  }
  .fpar::before {
    top: 0;
    border-bottom: 0; /* top bar + a drop into each lane */
  }
  .fpar::after {
    bottom: 0;
    border-top: 0; /* a rise out of each lane + the bottom bar */
  }
  /* an arrowhead pointing down into each lane where the fork meets it */
  .fpar .fslot::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 5px solid var(--line-ink);
  }
}
@media (max-width: 560px) {
  body {
    font-size: 12.5px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .btn {
    justify-content: center;
  }
  .run-pipe {
    gap: 8px;
  }
  .chip-link {
    display: none;
  }
  .run-metrics {
    flex-wrap: wrap;
    gap: 20px 32px;
  }
  .foot-row {
    gap: 12px 18px;
  }
}

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

/* ============================================================
   FLOATING WINDOW + DRIFTING CONCEPTS  (alive on scroll)
   Two-column block layout, warm 3D float, three-plane parallax.
   "Held in Light, suspended" — shadow does the floating, not the angle.
   ============================================================ */

/* shadows extend past the wrap on a tilt — clip horizontally so they
   never spawn a scrollbar. overflow:clip does not break the sticky header. */
body {
  overflow-x: clip;
}

/* ---- two-column field per block; the window alternates sides down the page ---- */
.block .wrap {
  /* the window track and the text track, named so .flip can reorder them */
  --win: minmax(0, 1.9fr);
  --txt: minmax(250px, 0.82fr);
  display: grid;
  grid-template-columns: var(--win) var(--txt);
  gap: clamp(36px, 4vw, 60px);
  align-items: center;
  max-width: 1280px;
}
/* keep both items on the SAME row — DOM order (head, stage) differs from
   column order, so without an explicit row grid auto-placement stacks them */
.block .wrap > .stage,
.block .wrap > .block-head {
  grid-row: 1;
}

/* default (window LEFT): #inbox, #enables */
.block .wrap > .stage {
  grid-column: 1;
  margin-top: 0;
}
.block .wrap > .block-head {
  grid-column: 2;
}

/* flipped (window RIGHT): #run, #metrics */
.block.flip .wrap {
  grid-template-columns: var(--txt) var(--win);
}
.block.flip .wrap > .block-head {
  grid-column: 1;
}
.block.flip .wrap > .stage {
  grid-column: 2;
}

/* the review window holds one small check, so it wants a narrower track */
#enables .wrap {
  --win: minmax(0, 1.35fr);
  --txt: minmax(280px, 1fr);
}

/* ---- scroll + pointer drivers live on the block, side picks the lean ---- */
.block {
  --sp: 0;
  --side: 1;
  --mx: 0;
  --my: 0;
}
.block.flip {
  --side: -1;
}

/* ---- the floating window ---- */
.stage {
  perspective: 1800px;
  perspective-origin: 50% 38%;
}

.float {
  position: relative;
  transform-style: flat; /* keep inner mono type razor-crisp */
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  /* rotateY always leans the window inward toward its text (~4deg); the mouse
     and scroll only nudge within a bounded range and never flip it outward.
     +side*4 faces each window toward its own concept rail; --mx * 2 leans a
     touch more inward as the cursor moves toward the text. */
  transform: rotateX(calc(2deg + var(--sp) * 1.2deg + var(--my) * -2deg))
    rotateY(calc(var(--side) * 4deg + var(--sp) * 0.5deg + var(--mx) * 2deg))
    translate3d(0, calc(var(--sp) * -8px), 0);
}
/* faint warm cast-light pool that anchors the float to the paper */
.float::after {
  content: "";
  position: absolute;
  inset: 8% 4% -12% 4%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    60% 70% at 50% 42%,
    rgba(201, 100, 66, 0.05),
    transparent 72%
  );
  filter: blur(10px);
}

/* warm layered shadow + lit top edge — scoped to .stage so no other panel is hit */
.stage .panel {
  box-shadow:
    0 2px 4px rgba(58, 38, 22, 0.05),
    0 8px 16px rgba(58, 38, 22, 0.055),
    0 22px 40px rgba(50, 32, 18, 0.06),
    0 40px 74px rgba(46, 28, 16, 0.07),
    0 34px 66px rgba(201, 100, 66, 0.035),
    /* one whisper of terracotta */ inset 0 1px 0 rgba(255, 255, 255, 0.55); /* lit upper edge */
  transition: box-shadow 0.4s ease;
  animation: float-breathe 16s ease-in-out infinite;
  will-change: transform;
}
.stage:hover .panel {
  box-shadow:
    0 2px 4px rgba(58, 38, 22, 0.05),
    0 8px 16px rgba(58, 38, 22, 0.055),
    0 26px 48px rgba(50, 32, 18, 0.07),
    0 56px 100px rgba(46, 28, 16, 0.09),
    0 44px 84px rgba(201, 100, 66, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

@keyframes float-breathe {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.5px);
  }
}

/* ---- concept rail: three drifting planes ---- */
.block-head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: none;
}
/* deepest plane: ghost folio watermark, slowest parallax */
.block-head::before {
  content: attr(data-folio);
  position: absolute;
  top: -0.42em;
  left: -0.04em;
  z-index: 0;
  font-size: clamp(96px, 11vw, 150px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(20, 16, 10, 0.035);
  pointer-events: none;
  transform: translateY(calc(var(--sp) * -4px));
}

.block-head .frag {
  position: relative;
  z-index: 1;
  margin: 0;
}
.frag {
  transform: translateY(calc(var(--sp) * var(--k, 0) * 1px));
}

/* per-plane parallax depth: note drifts most, eyebrow least */
.f-eyebrow {
  --k: -8;
}
.f-statement {
  --k: -16;
}
.f-note {
  --k: -26;
}

/* eyebrow: shorten the trailing hairline to a tick in the rail */
.block-head .eyebrow::after {
  flex: 0 0 26px;
}

/* statement: keep the 26px/600 look */
.block-head .f-statement {
  max-width: 22ch;
}
/* note: offset forward like a hovering margin annotation */
.block-head .f-note {
  margin: 0 0 0 28px;
  max-width: 34ch;
}

/* ---- collapse: dense panels get full width at 1040 ---- */
@media (max-width: 1040px) {
  .block .wrap,
  .block.flip .wrap {
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: var(--maxw);
  }
  .block .wrap > .block-head,
  .block .wrap > .stage,
  .block.flip .wrap > .block-head,
  .block.flip .wrap > .stage {
    grid-column: 1;
  }

  .block .wrap > .block-head {
    grid-row: 1;
  }
  .block .wrap > .stage {
    grid-row: 2;
    margin-top: 36px;
  }

  .stage {
    perspective: none;
  }
  .float {
    transform: none;
  }
  .float::after {
    display: none;
  }
  .frag,
  .block-head::before {
    transform: none;
  }
  .stage .panel {
    animation: none;
  }

  /* revert the rail to the original calm stacked rhythm */
  .block-head {
    display: block;
    gap: 0;
  }
  .block-head .frag {
    margin: 0;
  }
  .block-head .f-statement {
    margin-top: 16px;
    max-width: none;
  }
  .block-head .f-note {
    margin: 12px 0 0;
    max-width: 46ch;
  }
  .block-head::before {
    display: none;
  }

  .bstage {
    min-height: 176px;
  }
  .bgroup {
    gap: 8px;
  }
  .gbody {
    padding: 11px 8px;
  }
}

/* metrics KPIs stack on narrow screens */
@media (max-width: 560px) {
  .kgrid {
    grid-template-columns: 1fr;
  }
}

/* ---- reduced motion: a still, softly-shadowed card with copy beside it ---- */
@media (prefers-reduced-motion: reduce) {
  .float {
    transform: none !important;
  }
  .float::after {
    display: none;
  }
  .stage .panel {
    animation: none !important;
    transition: none !important;
  }
  .frag,
  .block-head::before {
    transform: none !important;
  }
  .bcard {
    transition: none;
  } /* show the first block, no fade cycle */
}