/* Final contrast pass. Loaded last so text remains readable as feature styles evolve. */
.brand-logo {
  display: block;
  width: auto;
  object-fit: contain;
}

.brand-logo--header {
  height: 36px;
  max-width: 132px;
}

.brand-logo--footer {
  height: 58px;
  max-width: 180px;
}

.button-status {
  color: #dceeff;
  border: 1px solid rgba(166, 219, 255, .42);
  background: rgba(16, 45, 68, .72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 0 28px rgba(77, 190, 255, .08);
  cursor: default;
}

.button-status:hover,
.button-status:active {
  transform: none;
}

.site-footer .footer-grid > div:first-child p {
  color: #9fb4c8;
  font-size: 14px;
  line-height: 1.8;
}

.site-footer .footer-links > span {
  color: #89a9c1;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .14em;
}

.site-footer .footer-links a,
.site-footer .footer-links p {
  color: #c5d0dc;
  font-size: 14px;
  line-height: 1.55;
}

.site-footer .footer-links a {
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}

.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible {
  color: #f4f9ff;
  text-decoration-color: rgba(145, 214, 255, .65);
}

.site-footer .footer-bottom {
  color: #8398ab;
  font-size: 11px;
  line-height: 1.6;
}

/* Utility labels are information, not decoration. Keep them legible at a glance. */
.eyebrow,
.section-index {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .13em;
}

.eyebrow { color: #c2d2e0; }
.section-index { color: #69c9ff; }

.spectrum-card-head span {
  color: #8adeff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-shadow: 0 0 16px rgba(77, 190, 255, .2);
}

.media-caption {
  color: rgba(239, 248, 255, .96);
  font-size: 11px;
  font-weight: 600;
}

.media-caption small { color: rgba(211, 230, 244, .76); }
.video-pause-ui { font-size: 10px; font-weight: 650; }
.support-number {
  display: inline-flex;
  min-width: 40px;
  min-height: 26px;
  padding: 0 9px;
  align-items: center;
  justify-content: center;
  color: #8adeff;
  border: 1px solid rgba(112, 205, 255, .3);
  border-radius: 999px;
  background: rgba(77, 190, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 18px rgba(77, 190, 255, .06);
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: .08em;
}

.support-number.lime { color: #c9edff; }
.support-card-grid h3 { margin-top: 28px; }

.support-card-grid code {
  color: #9fc5de;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: .025em;
}

.server-status {
  color: #d5e9f7;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
}

.server-status span { color: #a9c2d5; }

.immersive-kicker {
  color: #93ddff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

.immersive-kicker b {
  color: rgba(226, 243, 255, .62);
  font-size: 15px;
  font-weight: 650;
}

.immersive-endpoint code {
  font-size: 11px;
  font-weight: 600;
}

.immersive-endpoint span,
.immersive-tags span {
  font-size: 11px;
  font-weight: 650;
}

.immersive-panel__visual figcaption {
  color: rgba(231, 245, 255, .9);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .12em;
}

.immersive-model-row span { font-size: 12px; font-weight: 600; }

.immersive-compute-status span {
  font-size: 11px;
  font-weight: 650;
}

.immersive-compute-status b {
  color: rgba(205, 227, 243, .72);
  font-size: 10px;
  font-weight: 600;
}

/* Balanced operational details for the four access-and-operations cards. */
.support-route-rail,
.support-resource-stack,
.support-app-row {
  position: absolute;
  right: 34px;
  bottom: 32px;
  left: 34px;
  z-index: 2;
}

.support-card-grid article > .support-route-rail,
.support-card-grid article > .support-resource-stack,
.support-card-grid article > .support-app-row {
  position: absolute;
}

.support-route-rail {
  min-height: 62px;
  padding: 9px 11px;
  display: flex;
  align-items: stretch;
  gap: 5px;
  border: 1px solid rgba(157, 211, 247, .22);
  border-radius: 11px;
  background: rgba(3, 13, 24, .68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.support-route-rail span {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px;
  color: #b9d7e9;
  border: 1px solid rgba(157, 211, 247, .12);
  border-radius: 7px;
  background: rgba(77, 190, 255, .035);
  font: 650 11px/1.25 var(--mono);
  letter-spacing: .04em;
  text-align: center;
}

.support-route-rail span:nth-of-type(2) { flex-grow: 1.18; }

.support-route-rail i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent-ice);
  box-shadow: 0 0 12px rgba(77, 190, 255, .72);
}

.support-route-rail b {
  align-self: center;
  color: rgba(189, 234, 255, .56);
  font: 600 12px/1 var(--mono);
}

.support-resource-stack {
  display: grid;
  gap: 10px;
}

.support-resource-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.support-resource-chips span {
  min-height: 27px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  color: #b9d7e9;
  border: 1px solid rgba(157, 211, 247, .18);
  border-radius: 999px;
  background: rgba(77, 190, 255, .035);
  font: 650 11px/1 var(--mono);
  letter-spacing: .08em;
}

.support-resource-stack .server-status {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 54px;
}

.support-app-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.support-app-row > div {
  min-width: 0;
  min-height: 72px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #c9d9e6;
  border: 1px solid rgba(157, 211, 247, .16);
  border-radius: 10px;
  background: rgba(3, 13, 24, .56);
  font-size: 11px;
  font-weight: 650;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.support-app-row img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  filter: grayscale(1) invert(1);
  opacity: .82;
}

.support-app-row img.logo-native {
  filter: grayscale(1);
  opacity: .9;
}

.support-card-grid article:hover .support-route-rail,
.support-card-grid article:hover .support-resource-chips span,
.support-card-grid article:hover .support-app-row > div {
  border-color: rgba(189, 234, 255, .34);
  background: rgba(77, 190, 255, .06);
}

.support-card-grid article:hover .support-app-row > div { transform: translateY(-2px); }

@media (min-width: 821px) {
  .support-route-rail,
.support-resource-stack,
.support-app-row {
    right: 42px;
    bottom: 40px;
    left: 42px;
  }
}

@media (max-width: 820px) {
  .support-card-grid article { min-height: 350px; }
}

@media (max-width: 560px) {
  .brand-logo--header {
    height: 32px;
    max-width: 112px;
  }

  .brand-logo--footer {
    height: 52px;
    max-width: 164px;
  }

  .hero h1 { font-size: 35px; line-height: 1.08; }

  .hero-phrase { white-space: nowrap; }

  .site-footer .footer-grid > div:first-child p,
.site-footer .footer-links a,
.site-footer .footer-links p {
    font-size: 14px;
  }

  .site-footer .footer-bottom {
    font-size: 11px;
  }

  .eyebrow,
.section-index {
    font-size: 11px;
    letter-spacing: .11em;
  }

  .spectrum-card-head span { font-size: 11px; }
  .media-caption { font-size: 10px; }
  .support-number { min-width: 38px; min-height: 25px; font-size: 11px; }
  .support-card-grid code { font-size: 11px; }
  .immersive-kicker { font-size: 11px; }
  .immersive-kicker b { font-size: 13px; }
  .immersive-panel__visual figcaption { font-size: 9px; }
  .immersive-model-row span { font-size: 11px; }

  .support-route-rail,
.support-resource-stack,
.support-app-row {
    right: 28px;
    bottom: 28px;
    left: 28px;
  }

  .support-route-rail { min-height: 66px; padding: 8px; gap: 4px; }
  .support-route-rail span { padding: 5px 3px; font-size: 11px; letter-spacing: 0; }
  .support-route-rail b { font-size: 10px; }
  .support-resource-chips span { padding-inline: 9px; font-size: 11px; }
  .support-app-row > div { min-height: 68px; font-size: 11px; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 32px; }

  .support-route-rail,
.support-resource-stack,
.support-app-row {
    right: 26px;
    left: 26px;
  }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .support-card-grid article:hover .support-app-row > div { transform: none; }
}