.cx-product .cx-anatomy {
  padding-block: clamp(35px, 5vw, 76px) clamp(42px, 6vw, 90px);
  background: var(--cx-canvas);
}

.cx-anatomy-head {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  align-items: end;
  gap: 14px clamp(24px, 5vw, 85px);
  margin-bottom: clamp(24px, 3vw, 42px);
}

.cx-product .cx-anatomy-head h2 {
  font-family: var(--cx-editorial);
  font-size: clamp(2.6rem, 4.9vw, 5rem);
  font-weight: 500;
  text-wrap: balance;
}

.cx-anatomy-head h2 span { color: var(--cx-copper); }

.cx-product .cx-anatomy-head p {
  max-width: 49ch;
  font-size: clamp(1.04rem, 1.42vw, 1.22rem);
  line-height: 1.53;
  color: var(--cx-muted);
}

.cx-product .cx-main .cx-flow {
  padding: 0;
  border: 1px solid var(--cx-diagram-line);
  background: var(--cx-diagram-surface);
}

.cx-flow-body {
  display: grid;
  grid-template-columns: minmax(0, 1.31fr) minmax(0, 1fr);
  align-items: center;
}

.cx-flow-drawing {
  align-self: stretch;
  display: grid;
  align-items: center;
  border-inline-end: 1px solid #8c6e524d;
  background: radial-gradient(ellipse at 50% 44%, #442e23 0%, #2b231d 48%, var(--cx-diagram-surface) 80%);
}

.cx-flow-drawing svg { width: 100%; height: auto; display: block; }
.cx-map-guide { fill: none; stroke: #a68468; opacity: .46; }
.cx-map-rails { fill: none; stroke: #b88d6e; stroke-width: 1.4; }
.cx-map-rails .cx-map-feedback { stroke: #c49d7e; stroke-dasharray: 4 5; }
.cx-map-ports { fill: #b88d6e; }
.cx-map-node { fill: #2a231e; stroke: #ad8365; stroke-width: 1.35; }
.cx-map-node .cx-map-ring { fill: #3c2a20; stroke: #99765b; }
.cx-map-node .cx-map-symbol {
  fill: none;
  stroke: var(--cx-diagram-copper);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cx-map-node text,
.cx-map-return-label {
  font: 600 25px/1 "Rekon Sans", sans-serif;
  fill: var(--cx-diagram-paper);
  stroke: none;
  text-anchor: middle;
}

.cx-map-return-label { font-size: 23px; fill: var(--cx-diagram-copper); }

.cx-map-traces {
  fill: none;
  stroke: var(--cx-diagram-copper);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}

.cx-flow-notes {
  display: grid;
  padding: clamp(10px, 2.2vw, 34px) clamp(15px, 2.7vw, 44px);
  list-style: none;
}

.cx-flow-notes li {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  position: relative;
  padding-block: clamp(13px, 1.65vw, 22px);
}

.cx-flow-notes li + li { border-top: 1px solid #8c6e5260; }

.cx-flow-notes .cx-flow-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #ad8365;
  border-radius: 50%;
  color: var(--cx-diagram-copper);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

.cx-product .cx-flow-notes h3 {
  font-family: var(--cx-editorial);
  font-size: clamp(1.31rem, 2.2vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -.03em;
  text-wrap: initial;
  line-height: 1.15;
}

.cx-product .cx-flow-notes p {
  margin-top: 6px;
  color: var(--cx-diagram-muted);
  font-size: clamp(.9rem, 1.15vw, 1.05rem);
  line-height: 1.5;
}

.cx-flow .cx-flow-caption {
  min-height: 61px;
  padding: 9px clamp(15px, 2.7vw, 44px);
  border-top: 1px solid #8c6e5260;
}

.cx-product .cx-pilot { padding-block: clamp(42px, 6vw, 90px); }
.cx-product .cx-pilot h2,
.cx-product .cx-journal h2,
.cx-product .cx-faq h2 {
  font-family: var(--cx-editorial);
  font-size: clamp(2.4rem, 4.75vw, 5.1rem);
  font-weight: 500;
}

.cx-product .cx-journal {
  --cx-muted: var(--cx-diagram-muted);
  background: var(--cx-diagram-surface);
  color: var(--cx-diagram-paper);
}

.cx-product .cx-journal .cx-kicker { color: var(--cx-diagram-copper); }
.cx-product .cx-journal .cx-exhibits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cx-product .cx-journal .cx-exhibit-image { aspect-ratio: 1.9; }
.cx-product .cx-journal,
.cx-product .cx-faq { padding-block: clamp(48px, 7vw, 108px); }

@media (max-width: 760px) {
  .cx-anatomy-head, .cx-flow-body { grid-template-columns: minmax(0, 1fr); }
  .cx-flow-drawing { border-inline-end: 0; border-bottom: 1px solid #8c6e524d; }
  .cx-flow-drawing svg { max-width: 580px; margin-inline: auto; }
  .cx-flow-notes li { gap: 9px; }
  .cx-flow .cx-flow-caption { padding-block: 12px; }
  .cx-product .cx-journal .cx-exhibits { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .cx-flow[data-step="sources"] [data-node="sources"] > circle:first-child,
  .cx-flow[data-step="prototype"] [data-node="prototype"] > circle:first-child,
  .cx-flow[data-step="review"] [data-node="review"] > circle:first-child {
    fill: #68452f;
    stroke: var(--cx-diagram-copper);
  }

  .cx-flow[data-step="sources"] [data-flow-note="sources"] .cx-flow-number,
  .cx-flow[data-step="prototype"] [data-flow-note="prototype"] .cx-flow-number,
  .cx-flow[data-step="review"] [data-flow-note="review"] .cx-flow-number {
    background: var(--cx-diagram-copper);
    color: var(--cx-diagram-surface);
  }

  .cx-flow[data-step="sources"] [data-trace="sources"],
  .cx-flow[data-step="prototype"] [data-trace="prototype"],
  .cx-flow[data-step="review"] [data-trace="review"],
  .cx-flow[data-step="return"] [data-trace="return"] {
    opacity: 1;
    animation: cx-map-draw 700ms cubic-bezier(.2,.72,.2,1) both;
  }

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