/* 2026-09-30: screenshot review fixes, loaded after each affected page's styles. */
body.technology-page #experience .experience-company-name {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 1.12em;
  font-weight: 700;
}

@media screen and (max-width: 900px) {
  /* Keep all text and actions in normal flow so the rounded hero grows with them. */
  body.mobile-review-page .hero-aiedge-banner:not(.home-hero) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  body.mobile-review-page .hero-aiedge-banner:not(.home-hero) > .container {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 36px 24px !important;
    box-sizing: border-box !important;
  }
  body.mobile-review-page .hero-aiedge-banner:not(.home-hero) .hero-aiedge-content {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  body.mobile-review-page .hero-aiedge-banner .hero-text-item {
    position: relative !important;
    min-width: 0 !important;
    height: auto !important;
    overflow-wrap: anywhere;
  }
  body.mobile-review-page .hero-aiedge-banner .hero-text-item > div {
    flex-wrap: wrap !important;
    max-width: 100%;
  }
  body.mobile-review-page .hero-aiedge-banner .btn {
    max-width: 100% !important;
    height: auto !important;
    min-height: 44px;
    white-space: normal !important;
    text-align: center;
    overflow-wrap: anywhere;
    box-sizing: border-box !important;
  }

  /* Explicit hooks also cover grids that previously had inline styles only. */
  body.mobile-review-page .mobile-portfolio,
  body.mobile-review-page .mobile-products {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 20px !important;
    box-sizing: border-box !important;
  }
  body.mobile-review-page .mobile-portfolio > *,
  body.mobile-review-page .mobile-products > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 24px 20px !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere;
  }
  body.mobile-review-page .mobile-products h2,
  body.mobile-review-page .mobile-products h3 {
    font-size: clamp(1.3rem, 5.2vw, 1.75rem) !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  body.mobile-review-page .mobile-card-heading {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  body.mobile-review-page .mobile-card-heading > * {
    max-width: 100%;
    white-space: normal !important;
    box-sizing: border-box;
  }
  body.mobile-review-page .mobile-product-nav > .container {
    flex-wrap: wrap !important;
    gap: 8px !important;
    white-space: normal !important;
    overflow: visible !important;
    box-sizing: border-box;
  }
  body.mobile-review-page .mobile-product-nav .subnav-item {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }

}

@media screen and (max-width: 600px) {
  body.mobile-review-page .mobile-features {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.mobile-review-page .mobile-features > * { min-width: 0; }
}

/* Preserve the diagram's desktop layout inside its own mobile scrollport. */
@media screen and (max-width: 900px) {
  body.solutions-page #architecture.solution-architecture-section--network {
    width: calc(100% - 32px) !important;
    padding: 28px 12px !important;
  }
  body.solutions-page #architecture .network-architecture {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  body.solutions-page #architecture .network-architecture__scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.solutions-page #architecture .network-architecture__canvas {
    width: 1180px !important;
    min-width: 1180px !important;
    max-width: none !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }
  body.solutions-page #architecture .network-architecture__main {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.65fr) minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  body.solutions-page #architecture .network-architecture__support {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr) !important;
  }
  body.solutions-page #architecture .support-zone--security { grid-column: 1 !important; }
  body.solutions-page #architecture .support-zone--maintenance { grid-column: 2 !important; }
  body.solutions-page #architecture .network-zone__body--server {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.solutions-page #architecture .network-zone__body--backup {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.solutions-page #architecture .network-zone__body--user {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.solutions-page #architecture .support-zone__nodes {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  body.solutions-page #architecture .support-zone__nodes--maintenance {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.solutions-page #architecture .network-architecture__topline {
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px;
  }
  body.solutions-page #architecture .network-architecture__topline span,
  body.solutions-page #architecture .solution-architecture-head h2,
  body.solutions-page #architecture .solution-architecture-head p {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  body.solutions-page #architecture .architecture-scroll-hint {
    display: block;
    margin: 12px 0 0;
    color: #b9d9f8;
    font-size: 0.85rem;
    text-align: center;
  }
}
@media screen and (min-width: 901px) {
  .architecture-scroll-hint { display: none; }
}
@media screen and (max-width: 900px) {
  body.solutions-page #architecture .network-zone--user,
  body.solutions-page #architecture .core-zone--user {
    margin-top: auto !important;
  }
}