/* overview.css */

/* #region shared diagram base */

.scene[data-slug] .stage,
#s-hero .stage {
  display: block;
  position: sticky;
}

.scene[data-slug] .art,
#s-hero .art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: var(--svg-x, center);
  align-items: var(--svg-y, center);
  overflow: hidden;
  background: none;
  opacity: 1;
  transform: none;
}

.scene[data-slug] .copy {
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: none;
  max-width: clamp(280px, 40vw, 480px);
}

[id$="-diagram"],
#hero-anatomy {
  width: var(--svg-w, 100%);
  height: var(--svg-h, 100%);
  transform: translate(var(--svg-tx, 0), var(--svg-ty, 0));
}

[id$="-diagram"] .draw,
#hero-anatomy .draw {
  fill: none;
  stroke: var(--diagram-stroke-color);
  stroke-width: var(--diagram-stroke-width);
}

/* text tiers — apply via class on any diagram text */
.dg-title {
  font-family: var(--font-heading);
  font-weight: var(--diagram-title-weight);
  font-size: var(--diagram-title-size);
}

.dg-label {
  font-family: var(--font-heading);
  font-weight: var(--diagram-label-weight);
  font-size: var(--diagram-label-size);
}

.dg-caption {
  font-family: var(--font-body);
  font-weight: var(--diagram-caption-weight);
  font-size: var(--diagram-caption-size);
  opacity: 0;
}

.dg-dash-tight {
  stroke-dasharray: var(--diagram-dasharray-tight);
}

.dg-dash-loose {
  stroke-dasharray: var(--diagram-dasharray-loose);
}

/* #endregion shared diagram base */


/* #region scroll-story */
#scroll-story {
  background-color: var(--color-tertiary);
  transition: background-color var(--duration-slow) var(--ease-default);
}

.scene {
  position: relative;
  min-height: calc(var(--len, 1) * 100vh);
}

.scene .stage {
  position: sticky;

  top: var(--header-height, 0px);
  height: calc(100dvh - var(--header-height, 0px));



  /* top: 0;
  height: 100vh; */
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-padding);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  align-items: center;
}

.scroll-cue {
  position: absolute;
  bottom: var(--space-md);
  left: var(--container-padding);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  display: flex;
  align-items: center;
}

.scroll-cue::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 24px;
  background: var(--color-secondary);
  margin-left: var(--space-xs);
  animation: scrollLine 1.6s ease-in-out infinite;
}

@keyframes scrollLine {

  0%,
  100% {
    transform: scaleY(0.3);
    opacity: 0.4;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

html[data-motion="static"] .scene {
  min-height: 100vh;
}

/* #endregion scroll-story */


/* #region module-scene layout (art + copy grid) */

.scene .art {
  grid-column: span 6;
  aspect-ratio: 4 / 3;
  background-color: var(--color-secondary);
  opacity: 0.06;
}

.scene .copy {
  grid-column: span 5;
  grid-column-start: 8;
}

.scene .eyebrow {
  color: var(--color-primary);
  font-family: monospace;
  letter-spacing: 0.1rem;
  margin-bottom: var(--space-xs);
}

.scene h2 {
  margin-bottom: var(--space-sm);
}

.module-scene .copy,
.module-scene .art {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-default),
    transform var(--duration-slow) var(--ease-default);
}

.scene.is-active .copy,
.scene.is-active .art {
  opacity: 1;
  transform: translateY(0);
}

html[data-motion="static"] .module-scene .copy,
html[data-motion="static"] .module-scene .art {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (max-width: 768px) {
  .scene .stage {
    grid-template-columns: 1fr;
  }

  .scene .art,
  .scene .copy {
    grid-column: span 1;
    grid-column-start: auto;
  }

  .module-scene .art {
    aspect-ratio: 16 / 10;
    margin-bottom: var(--space-md);
  }
}

.scene .scene-title {
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.scene .body-text {
  color: var(--color-primary);
  font-family: var(--font-body);
  /* font-size: 18px; */
  /* font-weight: 400; */
  max-width: 32rem;
}

/* #endregion module-scene layout */


/* #region hero scene */

#s-hero .stage {
  display: grid;
  /* grid-template-rows: auto 1fr; */
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
}

#s-hero .copy {
  position: relative;
  z-index: 2;
  grid-row: 1;
  /* padding-bottom: var(--space-md); */
}

#s-hero .art {
  position: relative;
  top: auto;
  left: auto;
  grid-row: 2;
  min-height: 0;
}

#s-hero {
  --svg-w: 100%;
  --svg-h: 100%;
  --svg-x: center;
  --svg-y: center;
  --svg-tx: 0px;
  --svg-ty: 0px;
}

#s-hero .copy {
  grid-column: 1;
  grid-row: 1;
}

#s-hero .art {
  grid-column: 1;
  grid-row: 2;
}

#s-hero p {
  color: var(--color-primary);
}

#s-hero h1 {
  font-size: clamp(2rem, 1.4737rem + 2.1053vw, 4rem);
  color: var(--color-primary);
}

@media (max-width: 768px) {
  #s-hero .stage {
    align-items: stretch;
  }

  #s-hero .art {
    height: auto;
    align-items: flex-start;
  }

  #hero-anatomy {
    width: 100%;
    height: auto;
  }

  #s-hero {
    --len: 1.4;
    /* was 3.2/3.4 desktop value — lower = shorter scroll runway */
  }
}

#hero-anatomy .icon-label,
#hero-anatomy .brand-label,
#hero-anatomy .hero-card-title {
  fill: var(--color-secondary);
  opacity: 0;
}

#hero-anatomy .icon-label,
#hero-anatomy .brand-label,
#hero-anatomy .hero-card-title {
  font-family: var(--font-heading);
  font-weight: var(--diagram-title-weight);
  font-size: var(--diagram-title-size);
}

#hero-anatomy .node-label,
#hero-anatomy .hero-card-desc {
  font-family: var(--font-body);
  font-weight: var(--diagram-caption-weight);
  font-size: var(--diagram-caption-size);
  fill: var(--color-secondary);
  opacity: 0;
}

#hero-anatomy .hero-hub,
#hero-anatomy .hero-card,
#hero-anatomy .hero-link,
#hero-anatomy .hero-icon-stroke {
  stroke-width: 0.75;
}

#hero-anatomy .hero-link {
  opacity: 0.6;
}

.hero-link {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-hub-logo.logo-dark { display: none; }

[data-theme="dark"] .hero-hub-logo.logo-light { display: none; }
[data-theme="dark"] .hero-hub-logo.logo-dark { display: inline; }

/* #endregion hero scene */


/* #region acquisition (data-slug="acquisition") */

.scene[data-slug="acquisition"] .stage {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  grid-template-rows: 1fr;
}

.scene[data-slug="acquisition"] .copy {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  max-width: 480px;
  align-self: flex-start;
}

.scene[data-slug="acquisition"] .art {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
}

#reading-stations {
  /* width: 90%;
  height: auto;
  display: block;
  flex-shrink: 0; */

  width: 100%;
  height: 100%;
  display: block;
}

.reading-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  width: min(320px, 60vw);
  margin: var(--space-sm) 0;
}

.terrain,
.horizon-line {
  opacity: 0.65;
}

.station-box {
  fill: var(--color-tertiary);
  stroke: var(--color-secondary);
}

.bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 40px;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-secondary);
}

.bar-track {
  height: 4px;
  background: rgba(0, 0, 0, 0.08);
  position: relative;
}

.bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: var(--color-secondary);
  transform-origin: left;
  transform: scaleX(0);
}

.bar-row--alert .bar-fill {
  background: var(--color-alert);
}

.bar-row--alert .bar-value {
  color: var(--color-alert);
}

.bar-value {
  text-align: right;
}

#reading-stations .draw {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 1;
  transition: stroke-dashoffset 0.3s ease-out;
}

#reading-stations .draw-txt {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  fill: var(--color-secondary);
  text-anchor: middle;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

#reading-stations .station-box {
  fill: var(--color-tertiary);
  stroke: var(--color-secondary);
}

[data-slug="acquisition"] .copy {
  position: relative;
  z-index: 2;
  max-width: 480px;
}

[data-slug="acquisition"] h1 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  color: var(--color-primary);
}

[data-slug="acquisition"] .reading-reveal {
  margin-top: var(--space-md);
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.2vw, 1.2rem);
  opacity: 0;
  transform: translateY(16px);
}

@media (max-width: 1024px) {
  .scene[data-slug="acquisition"] .stage {
    grid-template-columns: minmax(260px, 340px) 1fr;
  }
}

@media (max-width: 768px) {
  .scene[data-slug="acquisition"] .stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);

  }

  .scene[data-slug="acquisition"] .copy {
    grid-column: 1;
    grid-row: 1;
  }

  .scene[data-slug="acquisition"] .art {
    grid-column: 1;
    grid-row: 2;
    align-items: flex-start;
  }

  .reading-bars {
    width: 90vw;
    font-size: 0.65rem;
  }

  #reading-stations {
    height: auto;
    width: auto;
  }

}

@keyframes signal-pulse {
  0% {
    transform: scale(0.85);
    opacity: 0.9;
  }

  70% {
    opacity: 0.15;
  }

  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.signal-arc {
  animation: signal-pulse 2.2s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .signal-arc {
    animation: none;
  }
}

/* #endregion acquisition */


/* #region visualization (data-slug="visualization") */

.scene[data-slug="visualization"] .stage {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  grid-template-rows: 1fr;
}

.scene[data-slug="visualization"] .copy {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  max-width: 480px;
  align-self: flex-start;
}

.scene[data-slug="visualization"] .art {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .scene[data-slug="visualization"] .stage {
    grid-template-columns: minmax(260px, 340px) 1fr;
  }
}

@media (max-width: 1024px) {
  .scene[data-slug="visualization"] .stage {
    grid-template-columns: minmax(260px, 340px) 1fr;
  }
}

@media (max-width: 768px) {
  .scene[data-slug="visualization"] .stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .scene[data-slug="visualization"] .copy {
    grid-column: 1;
    grid-row: 1;
  }

  .scene[data-slug="visualization"] .art {
    grid-column: 1;
    grid-row: 2;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

#viz-diagram {
  width: 100%;
  height: 100%;
  display: block;
}

#viz-diagram .draw {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 0.75;
}

#viz-diagram .viz-origin {
  fill: var(--color-secondary);
  stroke: none;
}

#viz-diagram .viz-rose-outer,
#viz-diagram .viz-rose-inner {
  stroke-width: 0.5;
}

.chart-path {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.5;
}

.chart-tip {
  fill: var(--color-primary);
}

.viz-tick {
  stroke: var(--color-secondary);
  stroke-width: 0.5;
}

.viz-tick-minor {
  stroke: var(--color-secondary);
  stroke-width: 0.4;
  opacity: 0.5;
}

.num-token {
  font-family: var(--font-heading);
  font-weight: var(--diagram-title-weight);
  font-size: var(--diagram-title-size);
  fill: var(--color-secondary);
}

.axis-label {
  font-family: var(--font-heading);
  font-weight: var(--diagram-label-weight);
  font-size: var(--diagram-label-size);
  fill: var(--color-secondary);
  opacity: 0;
}

.tick-label,
.viz-caption {
  font-family: var(--font-body);
  font-weight: var(--diagram-caption-weight);
  font-size: var(--diagram-caption-size);
  fill: var(--color-secondary);
  opacity: 0;
}

/* #endregion visualization */


/* #region dataorg (data-slug="dataorg") */

.scene[data-slug="dataorg"] .stage {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  grid-template-rows: 1fr;
}

.scene[data-slug="dataorg"] .copy {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  max-width: 480px;
  align-self: flex-start;
}

.scene[data-slug="dataorg"] .art {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .scene[data-slug="dataorg"] .stage {
    grid-template-columns: minmax(260px, 340px) 1fr;
  }
}

@media (max-width: 768px) {
  .scene[data-slug="dataorg"] .stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .scene[data-slug="dataorg"] .copy {
    grid-column: 1;
    grid-row: 1;
  }

  .scene[data-slug="dataorg"] .art {
    grid-column: 1;
    grid-row: 2;
    display: block;
  }
}

#dataorg-diagram {
  width: 100%;
  height: 100%;
  display: block;
  /* margin-left: 30%; margin-top: 10% — removed, no longer needed:
     centering is handled by .art's flex box, not a manual nudge */
}

#dataorg-diagram .draw {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 0.75;
}

#dorg-origin {
  fill: var(--color-secondary);
}

.dorg-dot {
  stroke: var(--color-tertiary);
  stroke-width: 1;
}

.dorg-c-temp,
.dorg-c-temp-label {
  fill: #e0663e;
}

.dorg-c-hum,
.dorg-c-hum-label {
  fill: #2e7de6;
}

.dorg-c-pres,
.dorg-c-pres-label {
  fill: #3ba85a;
}

#dorg-tree-guide {
  stroke: var(--color-secondary);
  stroke-width: 0.75;
  fill: none;
}

.dorg-connector {
  stroke: var(--color-secondary);
  stroke-width: 0.75;
  fill: none;
  opacity: 0.6;
  transition: opacity 0.2s ease-out;
}

#dataorg-diagram .dorg-heading,
#dataorg-diagram .dorg-root {
  font-family: var(--font-heading);
  font-weight: var(--diagram-title-weight);
  font-size: var(--diagram-title-size);
  fill: var(--color-secondary);
}

#dataorg-diagram .dorg-node,
.dorg-label {
  font-family: var(--font-heading);
  font-weight: var(--diagram-label-weight);
  font-size: var(--diagram-label-size);
  fill: var(--color-secondary);
}

#dataorg-diagram .dorg-attr,
.dorg-tree-row text,
#dorg-compression {
  font-family: var(--font-body);
  font-weight: var(--diagram-caption-weight);
  font-size: var(--diagram-caption-size);
  fill: var(--color-secondary);
}

/* #endregion dataorg */


/* #region nodegraph (data-slug="nodegraph") */
[data-slug="nodegraph"] .stage {
  display: block;
  position: sticky;
}

[data-slug="nodegraph"] .art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: none;
  opacity: 1;
  transform: none;
}

[data-slug="nodegraph"] .copy {
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: none;
}

@media (max-width: 768px) {
  [data-slug="nodegraph"] .art {
    display: none;
  }
}

.ng-connector-sub {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 0.75;
}

/* #endregion nodegraph */


/* #region apilayer (data-slug="apilayer") */

:root {
  --api-request-color: #1f6fd6;
  --api-response-color: #1f9d6f;
  --api-node-color: var(--color-secondary);
}

[data-theme="dark"] {
  --api-request-color: #4d9fff;
  --api-response-color: #3ecf8e;
}

.scene[data-slug="apilayer"] .stage {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
}

.scene[data-slug="apilayer"] .copy {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  max-width: 480px;
}

.scene[data-slug="apilayer"] .art {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@media (max-width: 768px) {
  .scene[data-slug="apilayer"] .art {
    display: flex;
  }
}

#api-layer-diagram {
  width: 100%;
  height: 100%;
  display: block;
  /* margin-top: 16% — removed, no longer needed: centering now handled
     by .art's flex box, not a manual nudge */
}

#api-layer-diagram .draw {
  fill: none;
  stroke: var(--api-node-color);
  stroke-width: var(--diagram-stroke-width);
}

#api-layer-diagram .api-head {
  fill: var(--api-node-color);
  stroke: var(--api-node-color);
}

#api-layer-diagram .api-icon,
#api-layer-diagram .api-gateway-box,
#api-layer-diagram .api-connector-line {
  fill: none;
  stroke: var(--api-node-color);
  stroke-width: 1;
  opacity: 0;
}

#api-layer-diagram .api-connector-dot {
  fill: var(--api-node-color);
  opacity: 0;
}

#api-layer-diagram .api-edge {
  fill: none;
  stroke-width: 1;
  opacity: 0.9;
}

#api-layer-diagram .api-edge-request {
  stroke: var(--api-request-color);
}

#api-layer-diagram .api-edge-response {
  stroke: var(--api-response-color);
}

#api-layer-diagram .api-arrowhead-request {
  fill: var(--api-request-color);
}

#api-layer-diagram .api-arrowhead-response {
  fill: var(--api-response-color);
}

#api-layer-diagram .api-label-title,
#api-layer-diagram .api-node-label {
  font-family: var(--font-heading);
  font-weight: var(--diagram-title-weight);
  font-size: var(--diagram-title-size);
  fill: var(--api-node-color);
  opacity: 0;
}

#api-layer-diagram .api-label,
#api-layer-diagram .api-path-label,
#api-layer-diagram .api-icon-text {
  font-family: var(--font-body);
  font-weight: var(--diagram-label-weight);
  font-size: var(--diagram-label-size);
  fill: var(--color-secondary);
  opacity: 0;
}

#api-layer-diagram .api-label-sub {
  font-family: var(--font-body);
  font-weight: var(--diagram-caption-weight);
  font-size: var(--diagram-caption-size);
  fill: var(--color-secondary);
  opacity: 0.7;
}

/* #endregion apilayer */


/* #region export (data-slug="export") */

.scene[data-slug="export"] .stage {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
}

.scene[data-slug="export"] .copy {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  max-width: 480px;
}

.scene[data-slug="export"] .art {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@media (max-width: 768px) {
  .scene[data-slug="export"] .art {
    display: flex;
  }
}

#export-diagram {
  width: 100%;
  height: 100%;
  display: block;
  /* margin-top/margin-right removed — no longer needed:
     positioning now handled by .art's flex box, not manual nudges */
}

#export-diagram .draw {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 0.75;
  transition: stroke-dashoffset 0.3s ease-out;
}

#export-diagram .tag-box {
  fill: var(--color-tertiary);
  stroke: var(--color-secondary);
}

#export-diagram .icon-glyph {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  fill: var(--color-secondary);
  opacity: 0;
}

#export-diagram .tag-label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  fill: var(--color-secondary);
  opacity: 0;
}

#export-diagram .icon-label,
#export-diagram .node-label {
  transition: opacity 0.3s ease-out;
}

#export-diagram .icon-label {
  fill: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.75rem;
  opacity: 0;
}

#export-diagram .node-label {
  font-family: var(--font-heading);
  font-size: 0.5rem;
  fill: var(--color-secondary);
  opacity: 0;
}

#export-arrow path {
  fill: var(--color-secondary);
}

/* #endregion export */

/* #region Networking */

.scene[data-slug="networking"] .stage {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  grid-template-rows: 1fr;
}

.scene[data-slug="networking"] .copy {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  max-width: 480px;
  align-self: flex-start;
}

.scene[data-slug="networking"] .art {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .scene[data-slug="networking"] .stage {
    grid-template-columns: minmax(260px, 340px) 1fr;
  }
}

@media (max-width: 768px) {
  .scene[data-slug="networking"] .stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .scene[data-slug="networking"] .copy {
    grid-column: 1;
    grid-row: 1;
  }

  .scene[data-slug="networking"] .art {
    grid-column: 1;
    grid-row: 2;
    display: flex;
  }
}

#networking-diagram {
  width: 100%;
  height: 100%;
  display: block;
}

#networking-diagram .draw {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#networking-diagram .net-orbit {
  opacity: 0.55;
}

#networking-diagram .net-arc {
  opacity: 0.8;
  transform-origin: center;
  transform-box: fill-box;
  animation: netArcPulse 1.6s ease-in-out infinite;
  animation-play-state: paused;
}

.scene.is-inked #networking-diagram .net-arc {
  animation-play-state: running;
}

@keyframes netArcPulse {

  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.9);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.08);
  }
}

#networking-diagram .draw-txt {
  opacity: 0;
}

#networking-diagram .net-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  fill: var(--color-secondary);
}

#networking-diagram .net-station {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.06em;
  fill: var(--color-secondary);
}

#networking-diagram .tag-label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.06em;
  fill: var(--color-secondary);
}

#networking-diagram .net-map {
  opacity: 0;
}

#networking-diagram .net-map-shape {
  fill: var(--color-tertiary);
  fill-opacity: 0.07;
  stroke: var(--color-secondary);
  stroke-opacity: 0.15;
  stroke-width: calc(1 / var(--map-scale, 1));
}

/* #endregion Networking */

.net-map-shape {
  stroke-linejoin: round;
  stroke-linecap: round;
}

.draw {
  shape-rendering: geometricPrecision;
}

/* #region dataquality (data-slug="dataquality") */

.scene[data-slug="dataquality"] .stage {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
}

.scene[data-slug="dataquality"] .copy {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  max-width: 480px;
}

.scene[data-slug="dataquality"] .art {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@media (max-width: 768px) {
  .scene[data-slug="dataquality"] .art {
    display: flex;
  }
}

#data-validation-diagram {
  width: 100%;
  height: 100%;
  display: block;
  /* margin-top: 16%; margin-left: 8% — removed, no longer needed:
     centering now handled by .art's flex box, not a manual nudge */
}

#data-validation-diagram .draw {
  fill: none;
  stroke: var(--diagram-stroke-color);
  stroke-width: var(--diagram-stroke-width);
}

#data-validation-diagram .dv-connector-line {
  stroke-width: 1;
}

#data-validation-diagram .dv-connector-arrow {
  stroke-width: 1;
  fill: none;
}

#data-validation-diagram .dv-arrow-label {
  font-family: var(--font-heading);
  font-weight: var(--diagram-title-weight);
  font-size: var(--diagram-title-size);
  fill: var(--color-secondary);
}

#data-validation-diagram .dv-title {
  font-family: var(--font-heading);
  font-weight: var(--diagram-title-weight);
  font-size: var(--diagram-label-size);
  fill: var(--color-secondary);
}

#data-validation-diagram .dv-annot-label,
#data-validation-diagram .dv-benefit-label {
  font-family: var(--font-body);
  font-weight: var(--diagram-caption-weight);
  font-size: var(--diagram-label-size);
  fill: var(--color-secondary);
}


@media (min-width: 769px) {
  #scroll-story .scene[data-slug="dataquality"] .stage {
    grid-template-columns: minmax(300px, 420px) 1fr;
    grid-template-rows: 1fr;
  }
  #scroll-story .scene[data-slug="dataquality"] .copy {
    grid-column: 1;
    grid-row: 1;
    align-self: flex-start;
  }
  #scroll-story .scene[data-slug="dataquality"] .art {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  #scroll-story .scene[data-slug="dataquality"] .stage {
    grid-template-columns: minmax(260px, 340px) 1fr;
  }
}

/* #endregion dataquality */

/* #region automation */

.scene[data-slug="automation"] .stage {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
}

.scene[data-slug="automation"] .copy {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  max-width: 480px;
}

.scene[data-slug="automation"] .art {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@media (max-width: 768px) {
  .scene[data-slug="automation"] .art {
    min-height: 45vh;
  }
}

#processing-diagram {
  width: 100%;
  height: 100%;
  display: block;
}

#processing-diagram .pg-frame,
#processing-diagram .pg-divider,
#processing-diagram .pg-edge {
  fill: none;
  stroke: var(--diagram-stroke-color);
  stroke-width: 0.5;
}

#processing-diagram .pg-port {
  fill: var(--color-tertiary);
  stroke: var(--diagram-stroke-color);
  stroke-width: 0.5;
}

#processing-diagram .pg-title {
  font-family: var(--font-heading);
  font-weight: var(--diagram-title-weight);
  font-size: var(--diagram-label-size);
  fill: var(--color-secondary);
}

#processing-diagram .pg-sub,
#processing-diagram .pg-port-label {
  font-family: var(--font-body);
  font-weight: var(--diagram-caption-weight);
  font-size: var(--diagram-caption-size);
  fill: var(--color-secondary);
}

/* #endregion automation */

/* ===== Diagram fonts: one family everywhere (fonts only, no layout) ===== */
:is(#hero-anatomy, #viz-diagram, #dataorg-diagram, #api-layer-diagram,
    #export-diagram, #networking-diagram, #data-validation-diagram,
    #processing-diagram) text[class] {
  font-family: var(--font-heading);
}

/* ===== Hardcoded sizes -> tokens (check each visually) ===== */
#export-diagram .icon-glyph     { font-size: var(--diagram-title-size); }   /* was 18px */
#export-diagram .tag-label      { font-size: var(--diagram-label-size); }   /* was 12px */
#export-diagram .icon-label     { font-size: var(--diagram-title-size); }   /* was 0.75rem */
#export-diagram .node-label     { font-size: var(--diagram-caption-size); } /* was 0.5rem = 8px */
#networking-diagram .net-title,
#networking-diagram .net-station { font-size: var(--diagram-title-size); }  /* was 16px */
#networking-diagram .tag-label  { font-size: var(--diagram-label-size); }   /* was 16px */