/* VANTRIX v9 — Solutions dropdown (shared by all pages). Adds no change to
   existing header layout; only a small chevron after "Solutions" and a panel. */
a[data-vx-dropdown] { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
a[data-vx-dropdown]::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .75; transition: transform .25s ease, margin .25s ease;
}
a[data-vx-dropdown][aria-expanded="true"] { color: #4ee6ff; }
a[data-vx-dropdown][aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }

.vx-solutions-menu {
  --vx-arrow: 60px;
  position: fixed; z-index: 80; width: min(380px, calc(100vw - 24px));
  padding: 18px 16px 14px; border-radius: 10px;
  color: #eaf6fc; background: linear-gradient(160deg, #0b2133f7, #051424fa);
  border: 1px solid #2a5a74; box-shadow: 0 26px 70px #000a, inset 0 1px 0 #74dff624;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: Arial, Helvetica, sans-serif;
  opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.vx-solutions-menu.is-open { opacity: 1; transform: none; }
.vx-solutions-menu.vx-no-anim { transition: none; }
.vx-solutions-menu::before {
  content: ""; position: absolute; top: -6px; left: var(--vx-arrow); width: 10px; height: 10px;
  background: #0b2133; border-left: 1px solid #2a5a74; border-top: 1px solid #2a5a74; transform: rotate(45deg);
}
.vx-solutions-menu[hidden] { display: none; }
.vx-sm-title { margin: 0 8px 8px; font-size: 10px; letter-spacing: .18em; color: #55dcf2; }
.vx-solutions-menu ul { list-style: none; margin: 0; padding: 0; }
.vx-solutions-menu li a {
  display: grid; grid-template-columns: 26px 1fr 16px; align-items: center; gap: 10px;
  padding: 12px 10px; border-radius: 7px; color: inherit; text-decoration: none;
  transition: background .2s ease;
}
.vx-solutions-menu li a:hover, .vx-solutions-menu li a:focus-visible { background: #12344b; outline: none; }
.vx-solutions-menu li a:focus-visible { box-shadow: inset 0 0 0 1px #6fe9fb; }
.vx-solutions-menu small { font-size: 10px; letter-spacing: .12em; color: #6f8ea2; }
.vx-solutions-menu b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.vx-solutions-menu em { display: block; margin-top: 3px; font-style: normal; font-size: 12px; color: #8fa9ba; }
.vx-solutions-menu i { font-style: normal; color: #6fe9fb; opacity: 0; transform: translateX(-4px); transition: all .2s ease; }
.vx-solutions-menu li a:hover i, .vx-solutions-menu li a:focus-visible i { opacity: 1; transform: none; }
.vx-solutions-menu a[aria-current="page"] b { color: #6fe9fb; }
.vx-solutions-menu a[aria-current="page"] small { color: #6fe9fb; }
.vx-solutions-menu a.is-soon b { color: #b9cbd6; }
.vx-sm-all {
  display: flex; justify-content: space-between; margin: 8px 10px 0; padding-top: 12px;
  border-top: 1px solid #1f4258; font-size: 11px; letter-spacing: .1em; color: #a9cddd; text-decoration: none;
}
.vx-sm-all:hover, .vx-sm-all:focus-visible { color: #6fe9fb; }

/* mobile sheet sub-links */
.mobile-sheet nav a.vx-sub {
  font-size: 16px !important; padding: 13px 0 13px 18px !important; color: #c9dbe6 !important;
  border-bottom-color: #13293f !important; position: relative; align-items: center;
}
.mobile-sheet nav a.vx-sub::before {
  content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 1px; background: #4ac8e0;
}
.mobile-sheet nav a.vx-sub[aria-current="page"] { color: #6fe9fb !important; }
.mobile-sheet nav a.vx-sub em { font-style: normal; font-size: 11px; color: #6f8ea2; letter-spacing: .02em; }
.mobile-sheet nav a.vx-sub svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
  .vx-solutions-menu, a[data-vx-dropdown]::after { transition: none; }
}
/* v11: upcoming pages shown but not linked */
.vx-solutions-menu .vx-sm-soon { display: grid; grid-template-columns: 26px 1fr 16px; align-items: center; gap: 10px; padding: 12px 10px; border-radius: 7px; cursor: default; opacity: .62; }
.vx-solutions-menu .vx-sm-soon b { color: #b9cbd6; }
.vx-solutions-menu .vx-sm-soon em { color: #7f97aa; font-style: italic; }
.mobile-sheet nav .vx-sub.is-soon { display: flex; justify-content: space-between; align-items: center; font-size: 16px; padding: 13px 0 13px 18px; color: #7f97aa; border-bottom: 1px solid #13293f; position: relative; cursor: default; }
.mobile-sheet nav .vx-sub.is-soon::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 1px; background: #33536b; }
.mobile-sheet nav .vx-sub.is-soon em { font-style: normal; font-size: 11px; color: #5f7a90; }

/* v15 — the mobile menu now lists every page; let the sheet scroll so About and Contact are always reachable */
.mobile-sheet { overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* v18 — no disclaimer notes on the React-rendered pages (homepage, End-User Devices) */
.ecosystem-note, .device-photo-note, .comparison-note, .eco-note, .power-note { display: none !important; }
.devices-page:not(.servers-page) .quote-privacy { display: none !important; }
.quote-privacy a { color: #8fe9f7; text-decoration: underline; text-underline-offset: 3px; }
.devices-page:not(.servers-page) .device-ecosystem .device-width > p:last-child { display: none !important; }

/* v18 — mobile readability: lift the smallest text on phones */
@media (max-width: 560px) {
  .services-page .inc-log li { font-size: 12.5px !important; line-height: 1.55 !important; }
  .services-page .jr-rt-label, .services-page .ct-link { font-size: 10px !important; }
}
