/* Fluid scaling pass shared by the homepage and Solutions candidate. */
:root {
  --cs-fluid-edge: clamp(34px, 4.25vw, 96px);
  --cs-feature-gap: clamp(56px, 4vw, 76px);
}

/* Keep navigation and contact controls usable on tablets and phones. */
@media (max-width: 980px) {
  .site-header {
    height: auto;
    min-height: 78px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 18px 10px;
  }
  .site-header .brand { min-width: 0; margin-right: auto; }
  .site-header .brand-name { font-size: 14px; }
  .site-header .primary-nav {
    order: 3;
    display: flex;
    width: 100%;
    margin: 0;
    padding: 8px 0 2px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .site-header .primary-nav a { font-size: 12px; min-height: 40px; display: inline-flex; align-items: center; }
  .site-header .primary-nav .nav-home { min-height: 36px; width: 36px; height: 36px; margin: 0; display: inline-grid; }
  .site-header .login-popover { position: fixed; top: 134px; left: 16px; right: 16px; width: auto; max-height: calc(100svh - 150px); overflow: auto; }
  .site-footer, .cinematic .site-footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 28px 20px 88px;
  }
  .site-footer nav, .cinematic .site-footer nav { justify-content: flex-start; gap: 12px 20px; }
  .site-footer nav a, .cinematic .site-footer nav a { font-size: 12px; min-height: 36px; display: inline-flex; align-items: center; }
  .site-footer .copyright, .cinematic .site-footer .copyright { grid-column: 1; max-width: 100%; overflow-wrap: anywhere; }
}
@media (max-width: 380px) {
  .site-header { padding-inline: 12px; gap: 8px; }
  .site-header .brand-name { font-size: 12px; }
  .site-header .primary-nav { gap: 7px; }
  .site-header .primary-nav a { font-size: 11px; }
}

@media (max-width: 760px) {
  .product-design-one .design-one-pending { opacity: 1; transform: none; }
  .product-design-one .product-section-intro h2 { font-size: 36px; }
  .product-design-one .product-flow, .product-design-one .embedded-product:not(.tutorial-product) { width: 100%; margin-inline: 0; padding-inline: 16px; }
}

/* A clear, compact route back to the homepage in the shared desktop header. */
.primary-nav .nav-home {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-grid;
  place-items: center;
  margin-block: -7px;
  border: 1px solid rgba(74, 211, 232, .28);
  border-radius: 7px;
  background: rgba(25, 151, 178, .14);
  color: #78dce9;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.primary-nav .nav-home svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.primary-nav .nav-home:hover,
.primary-nav .nav-home:focus-visible,
.primary-nav .nav-home[aria-current="page"] {
  color: #e8fdff;
  border-color: rgba(90, 224, 242, .62);
  background: rgba(22, 151, 180, .42);
  box-shadow: 0 0 18px rgba(45, 202, 226, .14);
}

/* The previous product-wall introduction has been intentionally removed. */
.cinematic #platform > .product-wall-scene {
  display: none;
}

.cinematic #platform {
  padding-top: var(--cs-feature-gap);
}

.transformation-workspace {
  margin-top: 0;
}

/* Remove fixed desktop caps so feature compositions continue to fill the viewport
   when the browser is zoomed out or used on an ultrawide display. */
@media (min-width: 1081px) {
  .cinematic #platform {
    width: 100%;
    padding-bottom: 0;
  }

  .transformation-showcase,
  .architectural-section,
  .cinematic .security-concept-section {
    width: calc(100vw - var(--cs-fluid-edge));
    max-width: none;
  }

  .architectural-section {
    margin: var(--cs-feature-gap) auto 0;
  }

  .cinematic .security-concept-section {
    padding: var(--cs-feature-gap) 0 0;
  }
}

/* The carousel grows with the available right-hand canvas instead of stopping at
   the old 1360px ceiling. Its card spacing is recalculated by the carousel script. */
@media (min-width: 1600px) {
  .hero-product-orbit {
    right: -2.5vw;
    width: 76vw;
    max-width: none;
    height: min(820px, calc(100vh - 96px));
  }
}

/* Solutions uses the same fluid edge instead of a hard 1780px content ceiling. */
@media (min-width: 951px) {
  .product-design-one {
    --max: calc(100vw - var(--cs-fluid-edge));
  }

  .product-design-one .products-placeholder {
    width: calc(100vw - var(--cs-fluid-edge));
    max-width: none;
  }
}

/* On large and zoomed-out canvases, keep the Solutions copy track tied to the
   amount of text it contains. The preview then consumes every remaining pixel
   instead of inheriting an increasingly large fractional blank column. */
@media (min-width: 1251px) {
  .product-design-one .product-hero {
    grid-template-columns: clamp(440px, 26vw, 660px) minmax(0, 1fr);
    gap: clamp(26px, 2vw, 48px);
  }

  .product-design-one .product-hero-copy {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 1080px) {
  :root {
    --cs-feature-gap: clamp(42px, 7vw, 64px);
  }

  .cinematic #platform {
    padding: var(--cs-feature-gap) 0 0;
  }

  .architectural-section {
    margin: var(--cs-feature-gap) auto 0;
  }

  .cinematic .security-concept-section {
    padding: var(--cs-feature-gap) 0 0;
  }
}

@media (max-width: 700px) {
  :root {
    --cs-fluid-edge: 28px;
    --cs-feature-gap: 44px;
  }

  .cinematic #platform {
    width: 100%;
    padding-block: var(--cs-feature-gap) 0;
  }

  .architectural-section {
    margin-block: var(--cs-feature-gap) 0;
  }

  .cinematic .security-concept-section {
    padding-block: var(--cs-feature-gap) 0;
  }

  /* Keep the headline, paragraph and calls to action inside the mobile canvas.
     Earlier theme layers allowed the grid's min-content width to win here. */
  .cinematic .hero-copy {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .cinematic .hero h1,
  .cinematic .hero-intro,
  .cinematic .hero-actions {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .cinematic .hero h1 {
    font-size: clamp(42px, 13vw, 54px);
  }

  .cinematic .hero-word {
    white-space: normal;
  }

  .cinematic .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
}