/* Source-owned production fixes layered after the immutable NEW STYLE artifact. */

/* The blurred nav establishes a containing block for fixed descendants. The
   artifact used viewport-derived left/right insets inside that much narrower
   block, collapsing Explore to a few pixels on wide screens. Both the nav and
   viewport share the same center, so center a bounded viewport-width panel. */
.nav-orbit {
  position: relative;
  isolation: isolate;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.nav-orbit::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: oklch(12% .025 250 / .44);
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
}

.desktop-explore__panel {
  width: min(var(--frame), calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  box-sizing: border-box;
  overflow-x: hidden;
  overscroll-behavior: contain;
  z-index: 1;
  background: linear-gradient(
      138deg,
      oklch(18% .055 232 / .78),
      oklch(8% .035 268 / .64)
    ),
    radial-gradient(circle at 16% -12%, oklch(84% .13 188 / .2), transparent 27rem);
  border: 1px solid oklch(92% .025 230 / .22);
  -webkit-backdrop-filter: blur(1.35rem) saturate(145%);
  backdrop-filter: blur(1.35rem) saturate(145%);
  box-shadow: inset 0 1px oklch(100% 0 0 / .16), 0 1.2rem 3.5rem oklch(2% .02 260 / .45);
}

/* The top-level current-page rule also matched links inside the mega-menu.
   That turned the active card white while its nested label stayed white.
   Keep the active card in the panel's dark visual language. */
.desktop-explore__panel a[aria-current="page"] {
  color: var(--color-white);
  background: oklch(24% .055 195 / .96);
  box-shadow: inset 0 0 0 1px oklch(82% .12 185 / .42);
}

.desktop-explore__panel a[aria-current="page"] span {
  color: var(--color-white);
}

.desktop-explore__panel a[aria-current="page"] small {
  color: oklch(86% .018 245);
}

/* Each quantity cell is 44px wide. The original flex row allowed the 132px
   control to shrink to ~74px at 320px, clipping the output and + button. */
.pricing-page .quantity-control {
  flex: 0 0 134px;
  min-width: 134px;
}

/* Product-demo canvases scale their internal UI on narrow screens. Give the
   interactive controls enough pre-scale size to retain a 44px touch target. */
:is(
  .experience-toggle,
  .copy-follower-card button,
  .experience-action.secondary,
  .terminal-watchlist button
) {
  min-height: 3.5rem;
}

/* The generic .surface rule is emitted after the signal component and used to
   overwrite its dark card with white. Restore the component's intended theme. */
.signal-support-card.surface {
  color: var(--color-white);
  background: oklch(12% .025 260 / .96);
  border-color: oklch(82% .06 190 / .48);
}

.signal-support-card.surface .signal-support-card__heading p {
  color: oklch(86% .11 185);
}

.signal-support-card.surface h3 {
  color: var(--color-white);
}

.signal-support-card.surface .signal-support-card__description {
  color: oklch(84% .025 255);
}

.product-benefits-section .section-kicker {
  color: oklch(86% .11 185);
}

.mcp-table th {
  color: var(--color-teal-deep);
}

/* Strengthen component boundaries that disappeared against adjacent panels. */
:is(.mcp-info-card, .contact-panel) {
  border-color: oklch(62% .035 250);
}

.pricing-page .plan-tier:not(.is-selected) {
  border-color: oklch(62% .035 250);
}

.login-auth__methods input {
  border-color: oklch(80% .03 255 / .66);
}

:is(
  .product-experience,
  .experience-panel,
  .terminal-panel,
  .copy-master-card,
  .copy-follower-card,
  .signal-message,
  .signal-pipeline,
  .kyra-chart-canvas,
  .chart-context-panel article,
  .integration-cards button
) {
  border-color: oklch(72% .035 260 / .58);
}

.quantity-control button:disabled {
  color: oklch(38% .03 260);
  background: oklch(91% .012 260);
  opacity: 1;
}

/* The artifact renders four desktop chart previews but only two mobile
   previews. Static HTML keeps both exact control/caption variants so deferring
   React never changes the visible hero or its accessible button labels. */
[data-kf-static-mobile="true"] {
  display: none !important;
}

@media (max-width: 40rem) {
  .hero-product-showcase__caption[data-kf-static-desktop="true"],
  .hero-product-showcase__controls[data-kf-static-desktop="true"],
  .hero-product-showcase__controls button:nth-child(n + 3),
  .hero-product-showcase__viewport picture:nth-child(n + 3) {
    display: none !important;
  }

  .hero-product-showcase__caption[data-kf-static-mobile="true"],
  .hero-product-showcase__controls[data-kf-static-mobile="true"] {
    display: grid !important;
  }
}

@media (width <= 42rem) {
  .product-hero__copy h1 {
    font-size: clamp(3.25rem, 18vw, 6.3rem);
    overflow-wrap: anywhere;
  }

  .pricing-configurator .plan-builder--full .plan-tier-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing-page .plan-control-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    display: grid;
  }

  .pricing-page .quantity-control {
    justify-self: start;
  }

  /* The 3D reveal projects this circular diagram beyond the viewport while it
     enters. Mobile gets the stable, fully visible state immediately. */
  .ecosystem-orbit[data-reveal],
  .ecosystem-orbit[data-reveal].is-revealed {
    transition: none;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .desktop-explore__panel {
    background: oklch(9% .03 260 / .98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}