.environment-exchange {
  --env-ink: #121110;
  --env-muted: #6b6963;
  --env-line: #e5e3de;
  --env-orange: #c96c4a;
  padding-block: clamp(64px, 7vw, 96px);
  border-top: 0;
  scroll-margin-top: var(--anchor-top, 96px);
  font-family: Inter, Geist, sans-serif;
}
#industries .environment-exchange { padding: 0; }
.env-exchange-heading {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  align-items: end;
  gap: clamp(32px, 6vw, 80px);
  margin-bottom: 42px;
}
.env-exchange-eyebrow {
  margin: 0 0 22px;
  color: var(--dim);
  font: 11px/1.6 "Geist Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.env-exchange-heading h2 {
  font-weight: 450;
  letter-spacing: -.055em;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.07;
  text-wrap: initial;
}
.env-exchange-intro p {
  margin: 0 0 14px;
  color: var(--dim);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.6;
  text-wrap: pretty;
}
.env-exchange-cta {
  display: inline-flex;
  gap: 22px;
  align-items: center;
  padding-block: 6px;
  font-size: 14px;
}
.env-exchange-cta span { color: var(--accent); }
.env-exchange-diagram {
  border: 1px solid var(--env-line);
  border-radius: 24px;
  padding: 0 30px;
  color: var(--env-ink);
  background: #fcfcfb;
  overflow: hidden;
}
.env-exchange-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr) 38px minmax(0, 1fr);
  align-items: stretch;
  padding-block: 28px 22px;
  background-image: radial-gradient(circle, #e0ded8 .7px, transparent .8px);
  background-size: 20px 20px;
}
.env-exchange-source,
.env-exchange-access,
.env-exchange-learners {
  min-width: 0;
  min-height: 400px;
  padding: 20px;
  border: 1px solid var(--env-line);
  border-radius: 16px;
  background: #fff;
}
.env-exchange-source { display: flex; flex-direction: column; }
.env-exchange-node-heading { min-height: 40px; text-align: left; }
.env-exchange-node-heading h3 { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: -.025em; } /* the cards' type a step larger across the board (Nick 2026-10-31: "the text size of the content in the environments card slightly larger. It is all slightly too small"); 14px before */
#env-example { display: flex; flex: 1; flex-direction: column; }
.env-exchange-scene { position: relative; flex: 1; min-height: 220px; margin: 0 -10px 20px; }
.env-exchange-art { position: absolute; inset: 0; pointer-events: none; }
#env-art-factory { transform: scale(1.25); transform-origin: center; }
.env-exchange-art[hidden] { display: none; }
.env-exchange-art svg,
.env-exchange-art img { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: contain; }
#env-example h4 { font-size: 14px; font-weight: 500; margin: 0 0 5px; }
#env-example-data { color: var(--env-muted); font: 11.5px/1.6 "Geist Mono", monospace; margin: 0; min-height: 32px; }
.env-exchange-connector { align-self: center; }
.env-exchange-connector svg { display: block; width: 100%; height: auto; fill: none; stroke: #a7a39b; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
/* Matching tracks keep both learning cards' headings, icons, and footers aligned. */
.env-exchange-access, .env-exchange-learners { display: grid; grid-template-rows: 40px 54px minmax(min-content, 1fr) minmax(54px, auto); gap: 16px; }
.env-exchange-access > :not(.env-exchange-node-heading),
.env-exchange-learners > :not(.env-exchange-node-heading) { position: relative; top: -8px; }
.env-exchange-access { box-shadow: 0 16px 32px -24px #433c3455; }
.env-exchange-owner { display: flex; align-items: center; gap: 12px; font: 13px/1.4 "Geist Mono", monospace; color: var(--env-muted); margin: 0; } /* "Bring your trainer" just under the node heading's size (Nick 2026-10-31: "make the bring your trainer text size bigger", then "reduce the bring your trainer text size slightly"; 10px, then 14px before) */
.env-exchange-owner .brand-mark { width: 30px; height: 30px; color: var(--env-ink); }
.env-exchange-signals { display: grid; grid-template-rows: repeat(3, 1fr); margin: 0; }
.env-exchange-signals>div { padding-block: 10px; border-top: 1px solid #efeeeb; }
.env-exchange-signals dt { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.env-exchange-signals dt svg { width: 16px; height: 16px; fill: none; stroke: #8c8981; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.env-exchange-signals dd { margin: 3px 0 0 24px; font-size: 11.5px; color: var(--env-muted); }
.env-exchange-permissions { display: flex; gap: 7px; align-items: center; margin: 0; padding: 10px 9px; border-radius: 6px; background: #f4f3f0; font-size: 11.5px; color: #67645d; }
.env-exchange-permissions svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.env-exchange-learning-body { display: grid; grid-template-rows: auto auto; align-content: start; gap: 16px; } /* the two blocks size to their content so the objectives follow the training text, instead of two equal rows that left the objectives halfway down (Nick 2026-10-31: "reduce the gap in between learning objectives and Adapt policies across workcells") */
.env-exchange-training { border-top: 1px solid #efeeeb; padding-top: 10px; }
.env-exchange-training-icon { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #ebe9e4; border-radius: 12px; padding: 9px; }
.env-exchange-training-icon svg { width: 100%; height: 100%; fill: #fff; stroke: #b87b63; stroke-width: 1.1; }
.env-exchange-training h4 { font-size: 14px; font-weight: 500; margin: 0 0 7px; }
.env-exchange-training p { font-size: 12.5px; line-height: 1.55; color: var(--env-muted); margin: 0; }
.env-exchange-objective { border-top: 1px solid #efeeeb; padding-top: 10px; display: grid; align-content: start; gap: 5px; }
.env-exchange-objective>span { font: 10px/1.5 "Geist Mono", monospace; color: var(--env-muted); }
.env-exchange-objective strong { font-size: 12.5px; font-weight: 500; color: #59715c; }
.env-exchange-objectives { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.env-exchange-objectives li { font-size: 12.5px; font-weight: 500; line-height: 1.4; color: #59715c; }
.env-exchange-training-note { display: flex; align-items: center; padding: 10px 9px; border-radius: 6px; background: #f4f3f0; color: #67645d; font-size: 11.5px; line-height: 1.5; margin: 0; }
.env-exchange-return { display: flex; align-items: center; gap: 16px; margin: 0 -30px; padding: 20px 30px; border-top: 1px solid var(--env-line); background: #fff; font: 11px/1.5 "Geist Mono", monospace; color: var(--env-muted); }
.env-exchange-update { display: flex; gap: 9px; align-items: center; color: #a75a40; }
.env-exchange-update svg { flex: none; width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.15; fill: none; }
.env-exchange-return-line { flex: 1; position: relative; height: 1px; border-top: 1px dashed #c9b2a8; }
.env-exchange-return-line::before { content: ""; position: absolute; left: 0; top: -4px; width: 6px; height: 6px; border-left: 1px solid #a75a40; border-bottom: 1px solid #a75a40; transform: rotate(45deg); }
.env-exchange-return-arrow { color: #a75a40; }
@media (max-width: 1000px) {
  .env-exchange-diagram { padding-inline: 20px; }
  .env-exchange-flow { grid-template-columns: minmax(0, 1fr) 25px minmax(0, 1fr) 25px minmax(0, 1fr); }
  .env-exchange-source, .env-exchange-access, .env-exchange-learners { padding: 15px; }
  .env-exchange-return { margin-inline: -20px; padding-inline: 20px; }
  .env-exchange-node-heading h3 { font-size: 13px; }
  .env-exchange-owner { font-size: 12px; }
}
@media (max-width: 760px) {
  .environment-exchange { padding-block: 52px; }
  .env-exchange-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 28px; }
  .env-exchange-heading h2 { font-size: clamp(34px, 6vw, 46px); }
  .env-exchange-eyebrow { margin-bottom: 17px; font-size: 10px; }
  .env-exchange-intro { max-width: 560px; }
  .env-exchange-flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 42px 1fr 42px 1fr; padding-top: 20px; }
  .env-exchange-source, .env-exchange-access, .env-exchange-learners { width: 100%; max-width: 480px; margin-inline: auto; padding: 20px; }
  .env-exchange-node-heading h3 { font-size: 16px; }
  #env-example h4 { font-size: 15px; }
  #env-example-data { min-height: 0; font-size: 12px; }
  .env-exchange-owner { font-size: 14px; }
  .env-exchange-signals dt { font-size: 14px; }
  .env-exchange-signals dd { font-size: 12px; line-height: 1.5; }
  .env-exchange-training h4 { font-size: 15px; }
  .env-exchange-training p { font-size: 13px; }
  .env-exchange-objective > span { font-size: 11px; }
  .env-exchange-objective strong { font-size: 13px; }
  .env-exchange-objectives li { font-size: 13px; }
  .env-exchange-training-note { font-size: 12px; }
  .env-exchange-connector { width: 35px; height: 42px; margin: 0 auto; display: flex; align-items: center; }
  .env-exchange-connector svg { transform: rotate(90deg); }
  .env-exchange-permissions { font-size: 12px; justify-content: center; }
  .env-exchange-return { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; font-size: 11px; padding-block: 17px; }
  .env-exchange-update { grid-column: 1 / -1; font-size: 12px; }
  .env-exchange-return-line { display: none; }
}
@media (max-width: 480px) {
  .env-exchange-diagram { padding-inline: 14px; border-radius: 18px; }
  .env-exchange-return { margin-inline: -14px; padding-inline: 20px; }
}
