/* Image pages share the content width and gutters of the product sections. */
#growth-companion,
#commercialization-roadmap {
  box-sizing: border-box;
  padding: 64px 6vw;
  background: #f5f0e8;
  scroll-margin-top: 64px;
}
#growth-companion figure,
#commercialization-roadmap figure {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}
#growth-companion img,
#commercialization-roadmap img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 30px;
}
@media (min-width: 1700px) {
  #growth-companion figure,
  #commercialization-roadmap figure { max-width: 1400px; }
}
@media (max-width: 1050px) {
  #growth-companion,
  #commercialization-roadmap { padding-inline: 5vw; }
}
@media (max-width: 760px) {
  #growth-companion,
  #commercialization-roadmap { padding: 64px 24px; }
  #growth-companion img,
  #commercialization-roadmap img { border-radius: 20px; }
}
/* Match the dedicated mobile homepage's panel spacing and inner width. */
body#top #growth-companion,
body#top #commercialization-roadmap {
  padding: 64px 24px;
  scroll-margin-top: 110px;
}
body#top #growth-companion figure,
body#top #commercialization-roadmap figure { max-width: 900px; }
@media (min-width: 600px) {
  body#top #growth-companion,
  body#top #commercialization-roadmap { padding: 80px 40px; }
}
/* The posture artwork fills the whole section, preserving its original ratio. */
#robot-posture {
  padding: 0;
  background: #e9e2da;
  scroll-margin-top: 64px;
}
#robot-posture figure {
  width: 100%;
  max-width: none;
  margin: 0;
}
#robot-posture img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 0;
}
body#top #robot-posture { scroll-margin-top: 110px; }

/* A quiet cyan accent ties the closing brand mark to the site's AI identity. */
#vision {
  box-sizing: border-box;
  background: #0b0d0e;
  color: #f5f5f7;
  padding: 80px 6vw 100px;
  min-height: 0;
  text-align: center;
  scroll-margin-top: 64px;
}
#vision .final-vision-statement-shell {
  display: block;
  width: 100%;
  max-width: 1240px;
  padding-top: 0;
  margin: 0 auto;
}
#vision .final-vision-statement-shell::before {
  content: "";
  display: block;
  width: min(100%, 420px);
  height: auto;
  aspect-ratio: 520 / 420;
  max-width: none;
  margin: 0 auto 48px;
  border: 1px solid rgba(130, 221, 210, .2);
  border-radius: 24px;
  background-color: #050607;
  background-image: linear-gradient(135deg, #87ded1, #9acff5), url("damon-end-logo.webp");
  background-position: center;
  background-size: cover, contain;
  background-repeat: no-repeat;
  background-blend-mode: multiply, normal;
  box-shadow: 0 0 65px rgba(85, 189, 183, .1);
}
#vision .final-vision-statement-shell p {
  color: #f5f5f7;
  max-width: 1100px;
  margin: 0 auto;
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: 600;
  line-height: 1.8;
  text-wrap: balance;
}
#vision .final-vision-statement-shell p + p { margin-top: 24px; }
#vision .vision-highlight { color: #87ded1; }
@media (max-width: 760px) {
  #vision { padding: 64px 24px; }
  #vision .final-vision-statement-shell::before { width: min(100%, 300px); margin-bottom: 36px; }
  #vision .final-vision-statement-shell p { font-size: 20px; }
}
body#top #vision { padding: 64px 24px; scroll-margin-top: 110px; }
body#top #vision .final-vision-statement-shell { max-width: 900px; }
@media (min-width: 600px) {
  body#top #vision { padding: 80px 40px; }
}

#vision .vision-clause { display: inline-block; }