/* Draft introduction: editorial copy beside Paul's compact four-stage overview. */
.holon-intro-grid {
  display: grid;
  grid-template-columns: minmax(300px, .32fr) minmax(0, .68fr);
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
}

.holon-intro-copy { min-width: 0; max-width: 420px; }
.holon-intro-title {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 450;
  line-height: 1.22;
  letter-spacing: -.035em;
  text-wrap: pretty;
}
.holon-intro-title strong { display: block; margin-top: 12px; color: var(--holon-cobalt); font-weight: 650; }
.holon-intro-description { max-width: 410px; margin: 24px 0 0; color: var(--fg-soft); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; text-wrap: pretty; }
.holon-intro-evidence { max-width: 410px; margin: 32px 0 0; padding-left: 16px; border-left: 2px solid #b4b6e6; color: var(--fg-soft); font-size: 13px; line-height: 1.65; }
.holon-intro-evidence h3 { margin: 0 0 10px; color: var(--fg); font-size: 14px; font-weight: 650; line-height: 1.4; letter-spacing: -.01em; }
.holon-intro-evidence p { margin: 0; }
.holon-intro-evidence .holon-intro-motivation { margin-top: 14px; }
.holon-intro-evidence strong { font-weight: 550; }
.holon-intro-evidence a { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; color: var(--holon-cobalt); text-decoration: underline; text-underline-offset: 3px; }

.holon-intro-diagram { min-width: 0; width: 100%; justify-self: end; container-type: inline-size; }
.holon-intro-diagram h3 { margin: 0 0 16px; color: var(--fg); font-family: var(--font-display); font-size: 23px; font-weight: 550; line-height: 1.3; letter-spacing: -.025em; }
.holon-intro-diagram .program-film { width: 100%; max-width: none; margin: 0; }
.holon-intro-diagram .program-film-scene { height: 510px; }
.holon-intro-diagram .program-film-poster { object-fit: contain; }
.holon-intro-diagram .program-film-caption { top: 22px; left: 22px; width: auto; max-width: none; right: 22px; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.holon-intro-diagram .program-film-program-key { bottom: 28px; width: calc(100% - 36px); }
.holon-intro-diagram .program-film-key-items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.holon-intro-diagram .program-film-key-items span { padding: 6px; gap: 5px; font-size: 12px; }
.holon-intro-diagram .program-film-labels span { font-size: 12px; padding: 3px 5px; }
.holon-intro-diagram .program-film-treatments { bottom: 24px; width: calc(100% - 32px); }
.holon-intro-diagram .program-film-treatment-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.holon-intro-diagram .program-film-treatment-card { min-height: 90px; padding: 8px; gap: 6px; }
.holon-intro-diagram .program-film-treatment-card svg { width: 28px; height: 28px; }
.holon-intro-diagram .program-film-treatment-card span { font-size: 13px; }
.holon-intro-diagram .program-film-dots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; width: min(100%, 480px); margin-inline: auto; padding: 6px 12px 16px; }
.holon-intro-diagram .program-film-dots button { min-width: 0; border-bottom: 0; font-family: var(--font-display); font-size: 13px; }
.holon-intro-diagram .program-film-progress { position: absolute; bottom: 10px; left: 12px; right: 12px; height: 3px; overflow: hidden; border-radius: 2px; background: #6751a421; pointer-events: none; }
.holon-intro-diagram .program-film-progress i { display: block; width: 100%; height: 100%; background: #6751a4; transform: scaleX(var(--program-progress, 0)); transform-origin: left center; }

@container (min-width: 701px) {
  .holon-intro-diagram .program-film-key-items { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@container (max-width: 479px) {
  /* Shorter phones shrink the scene so its caption, slide, and stage buttons
     share one screen below the nav. */
  .holon-intro-diagram .program-film-scene { height: clamp(460px, calc(100vh - var(--launch-nav-height) - 84px), 550px); }
  .holon-intro-diagram .program-film-key-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .holon-intro-diagram .program-film-treatment-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@supports (height: 100svh) {
  @container (max-width: 479px) {
    .holon-intro-diagram .program-film-scene { height: clamp(460px, calc(100svh - var(--launch-nav-height) - 84px), 550px); }
  }
}

@media (max-width: 960px) {
  .holon-intro-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .holon-intro-copy { max-width: 660px; }
  .holon-intro-title { max-width: 620px; font-size: clamp(30px, 4.5vw, 40px); }
  .holon-intro-description { max-width: 560px; }
  .holon-intro-evidence { max-width: 560px; margin-top: 24px; }
  .holon-intro-diagram { justify-self: end; }
}

@media (max-width: 480px) {
  .holon-intro-title { font-size: 30px; }
  .holon-intro-description { font-size: 17px; }
  .holon-intro-diagram h3 { font-size: 21px; }
  .holon-intro-diagram .program-film-caption { top: 18px; left: 18px; right: 18px; font-size: 16px; }
}

@container (max-width: 340px) {
  .holon-intro-diagram .program-film-dots button { padding-inline: 0; font-size: 11px; }
}

/* Main launch overview: a centered, wider animation with its own headline. */
.holon-intro-centered .holon-intro-grid { grid-template-columns: minmax(0, 1fr); }
.holon-intro-centered .holon-intro-diagram {
  width: min(100%, 960px);
  justify-self: center;
}
.holon-intro-centered .holon-intro-title {
  max-width: none;
  margin: 0 0 24px;
  font-size: clamp(28px, 3vw, 38px);
  text-align: center;
}
.holon-intro-centered .holon-intro-title strong { margin-top: 0; }