/* Shared composition; existing brand, heading faces and illustration scales remain. */
:root { --copy-gap: 16px; --section-inset: 24px; --section-block: 40px; --copy-measure: 44ch; }
.graph-section-header p, .scenario-header p { max-inline-size: var(--copy-measure); }
.agent-graph-section .graph-section-header {
  min-block-size: 220px;
  box-sizing: border-box;
  padding: 56px 5.4%;
  column-gap: 7%;
}
.agent-graph-section .graph-section-header h2 { max-inline-size: none; }
@media (max-width: 759px) {
  .agent-graph-section .graph-section-header {
    min-block-size: min-content;
    padding: 40px var(--section-inset);
    gap: 24px;
  }
  .agent-graph-section .graph-section-header h2 { max-inline-size: none; }
}
.agent-graph-section .graph-section-header p { margin-block: 0; }
.scenario-copy { padding: var(--section-block) var(--section-inset); }
.scenario-header { gap: var(--copy-gap); }
.scenario-header h2 { line-height: 1.15; }
.scenario-content { padding: var(--section-block) var(--section-inset); }
.principle-copy p { max-inline-size: 36ch; margin-block: 0; }
.exposed-layout .principle-copy h3 { margin-block: 0 12px; }
.scenario-switcher { margin-block-start: 32px; justify-content: flex-start; }
@media (max-width: 759px) {
  :root { --section-block: 32px; --section-inset: 24px; }
  .scenario-content { padding-block-start: 24px; }
}
@media (max-width: 400px) { :root { --section-inset: 20px; } }

/* Budget both framing gaps inside one screen beneath the navigation.
   Shared separator bands keep the existing continuous page rails. */
:root {
  --section-gap: 48px;
  --section-view-height: calc(100svh - var(--nav-height) - 2 * var(--section-gap));
}
.exposed-layout > .setup-divider-space { min-block-size: var(--section-gap); }
.exposed-layout > .receiving-section,
.exposed-layout > .safety-section,
.space-cell.agent-graph-section,
.exposed-layout .principle-cards {
  min-block-size: var(--section-view-height);
}

.safety-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(min-content, 1fr) auto;
}
.safety-tile {
  --intro-inset: clamp(32px, 5svh, 64px);
  display: grid;
  grid-template-rows: auto 1fr;
}
.safety-tile .safety-header { padding-block-start: var(--intro-inset); }
#safety-heading { scroll-margin-block-start: calc(var(--intro-inset) + var(--section-gap)); }
.safety-example { align-self: center; }

.safety-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: 1px solid var(--grid-line);
}
.safety-details article {
  display: grid;
  align-content: center;
  gap: 20px;
  padding: 22px var(--section-inset);
}
.safety-details article + article { border-inline-start: 1px solid var(--grid-line); }
.safety-details h3 { margin: 0 0 12px; font-size: 22px; font-weight: 500; letter-spacing: -.035em; }
.safety-details p { margin: 0; max-inline-size: 36ch; font-size: 16px; line-height: 1.55; }
@media (max-width: 620px) {
  .safety-section { grid-template-rows: 1fr auto; }
  .safety-details { grid-template-columns: minmax(0, 1fr); }
  .safety-details article { padding-block: 24px; }
  .safety-details article + article { border-inline-start: 0; border-block-start: 1px solid var(--grid-line); }
}

.space-cell.agent-graph-section {
  display: grid;
  grid-template-rows: auto 1fr;
}
.agent-graph-section > .agent-graph { align-self: center; width: 100%; }
.exposed-layout .principle-card { justify-content: center; }

/* Keep the navigation on the page grid while its surface spans the viewport. */
:root { --nav-height: 64px; scroll-padding-block-start: var(--nav-height); }
.handoff-preview { padding-block-start: 0; }
.preview-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  min-block-size: 64px;
  padding-block: 10px;
  background: var(--paper);
}
.preview-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--paper);
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
}
.preview-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--grid-line);
  box-shadow: 0 0 0 100vmax var(--grid-line);
  clip-path: inset(0 -100vmax);
  pointer-events: none;
}

/* Fragment links frame the whole story, including its upper separator. */
#receiving-heading { scroll-margin-block-start: calc(29px + var(--section-gap)); }
#graph-section-heading { scroll-margin-block-start: calc(var(--section-block) + var(--section-gap) + 1px); }
.space-cell.agent-graph-section { min-block-size: calc(var(--section-view-height) - 2px); }
@media (min-width: 801px) {
  #receiving-heading {
    scroll-margin-block-start: calc(clamp(64px, 12svh, 120px) + var(--section-gap) + 1px);
  }
}