/* Production overlay for the Polinex marketing site. Desktop layout stays with the design source. */

html,
body,
#dc-root,
#dc-root > .sc-host {
  height: auto !important;
  min-height: 100%;
}

html {
  background: #0a0e1a;
}

body {
  margin: 0;
  background: #0a0e1a;
  color: #f0f2f5;
}

a {
  color: #d4a853;
  text-decoration: none;
}

a:hover {
  color: #e5c078;
}

.px-nav-cta:hover {
  background: #e0ba6b !important;
}

.px-store-btn:hover,
.px-ghost-btn:hover {
  border-color: #334155 !important;
}

.px-legal-nav a:hover {
  color: #f0f2f5 !important;
}

.px-age {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  color: #d4a853;
}

.px-menu-btn {
  display: none;
  position: fixed;
  top: 8px;
  right: 16px;
  z-index: 70;
  width: 44px;
  height: 44px;
  border: 1px solid #1e293b;
  border-radius: 12px;
  background: #111827;
  color: #f0f2f5;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.px-menu-btn span,
.px-menu-btn span::before,
.px-menu-btn span::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: #f0f2f5;
  position: relative;
}

.px-menu-btn span::before,
.px-menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
}

.px-menu-btn span::before { top: -5px; }
.px-menu-btn span::after { top: 5px; }

.px-mobile-panel {
  display: none;
}

@media (max-width: 860px) {
  .px-nav {
    padding: 0 16px !important;
    height: 60px !important;
  }

  .px-nav-menu {
    display: none !important;
  }

  .px-menu-btn {
    display: inline-flex;
  }

  body.px-menu-open .px-mobile-panel {
    display: flex;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 45;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px 18px;
    background: rgba(6, 8, 15, 0.96);
    border-bottom: 1px solid #1e293b;
  }

  body.px-menu-open .px-mobile-panel a,
  body.px-menu-open .px-mobile-panel button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    color: #f0f2f5;
    font: 500 16px/44px "Instrument Sans", system-ui, sans-serif;
    cursor: pointer;
  }

  #px-landing [data-screen-label="Hero"] {
    min-height: 100svh !important;
  }

  #px-landing [data-screen-label="Hero"] > div:last-of-type {
    display: none !important;
  }

  #px-landing [style*="padding: 120px 0 80px 72px"],
  #px-landing [style*="padding:120px 0 80px 72px"] {
    padding: 96px 20px 72px !important;
    max-width: 100% !important;
  }

  #px-landing [data-screen-label="Hero"] [style*="display: flex; align-items: center; gap: 14px"] {
    flex-wrap: wrap !important;
  }

  .px-legal-header {
    padding: 0 16px !important;
    height: 60px !important;
  }

  #px-landing [style*="font-size: 72px"] {
    font-size: 38px !important;
    line-height: 44px !important;
  }

  #px-landing [style*="font-size: 52px"] {
    font-size: 32px !important;
    line-height: 38px !important;
  }

  #px-landing [style*="font-size: 46px"] {
    font-size: 30px !important;
    line-height: 36px !important;
  }

  #px-landing [style*="font-size: 40px"] {
    font-size: 28px !important;
    line-height: 34px !important;
  }

  #track,
  #anticipate,
  #ask > div,
  #premium > div,
  #get {
    grid-template-columns: 1fr !important;
    padding: 72px 20px !important;
    gap: 36px !important;
  }

  #verify > div {
    padding: 72px 20px !important;
  }

  #verify [style*="display: flex; justify-content: center; gap: 20px"] {
    flex-direction: column !important;
    align-items: center !important;
  }

  #anticipate > div:first-child {
    flex-direction: column !important;
  }

  #premium > div {
    padding: 28px 20px !important;
    gap: 28px !important;
  }

  #premium [style*="width: 50%"] {
    width: 100% !important;
  }

  #px-landing [style*="display: flex; gap: 44px; margin-top: 58px"] {
    gap: 20px !important;
    flex-wrap: wrap !important;
  }

  #get [style*="display: flex; justify-content: center; gap: 14px"] {
    flex-direction: column !important;
    align-items: center !important;
  }

  .px-footer,
  [data-screen-label="Footer"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 24px 16px !important;
  }

  .px-legal-wrap {
    padding: 72px 20px 96px !important;
  }

  .px-legal-title {
    font-size: 34px !important;
    line-height: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #px-landing * {
    animation: none !important;
    transition: none !important;
  }
}