/* Added illustrations and narrow-screen safeguards; robot canvas is unchanged. */
.section-illustration { width: 100%; margin: 24px 0; min-width: 0; }
.section-illustration img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.section-illustration figcaption { margin-top: 8px; color: var(--steel); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.body, .rail-item, .contact-links { min-width: 0; }
.benefits, .tech { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rail-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
main p, main h1, main h2, main h3, main h4, main li, footer a { overflow-wrap: anywhere; }
.contact-links { max-width: 100%; }
.contact a.mail { max-width: 100%; overflow-wrap: anywhere; }
footer .links { flex-wrap: wrap; }
@media (max-width: 880px) {
  .rail-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-head .section-illustration { width: 100%; }
}
@media (max-width: 560px) {
  .benefits, .tech, .rail-row { grid-template-columns: minmax(0, 1fr); }
  .section-illustration { margin: 20px 0; }
  .hero-text p { font-size: 17px; }
  .hint { font-size: 12px; }
  .table-wrap table { min-width: 0; table-layout: fixed; font-size: 12px; }
  .table-wrap th, .table-wrap td { padding: 10px 7px; white-space: normal; overflow-wrap: anywhere; }
  .table-wrap thead th { font-size: 11px; letter-spacing: 0; }
  .contact a.mail { font-size: clamp(17px, 5.4vw, 26px); }
  .contact .wrap { gap: 24px; }
}
@media (max-width: 380px) {
  header .wrap { padding-left: 14px; padding-right: 14px; }
  .wordmark { min-width: 0; }
  .wordmark .logo { max-width: 100%; }
  .header-actions { gap: 5px; }
  .btn { padding: 12px 18px; }
}