/* ============================================================
   production.css — layered on top of styles.css + dark-theme.css
   Holds only production-specific additions so the imported design
   files stay byte-identical to the source and easy to re-sync.
   ============================================================ */

/* --- Reduced motion -----------------------------------------------------
   Honor the OS setting: show everything immediately, no transitions.
   (Count-up is also short-circuited in shared-ui.js under the same query.) */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-delay-1,
  .reveal-delay-2,
  .reveal-delay-3,
  .reveal-delay-4,
  .reveal-delay-5 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  * { scroll-behavior: auto !important; }
}

/* --- HubSpot embedded form inside the demo modal ------------------------ */
#hs-demo-form { min-height: 320px; }

/* --- Mobile nav drawer (injected by shared-ui.js) ----------------------- */
@media (max-width: 880px) {
  /* The wide primary CTA is redundant on mobile — the drawer carries it. */
  .nav-cta .btn-primary { display: none; }
}

/* --- Mobile sticky demo CTA (injected by shared-ui.js) ------------------ */
/* The nav CTA is hidden < 880px, so keep an always-visible "Book a demo"
   pinned to the bottom between the hero and the footer. */
.mobile-cta { display: none; }
@media (max-width: 880px) {
  .mobile-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45; /* above content, below nav-drawer (60) and modal (100) */
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 247, 240, 0.9);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-top: 1px solid var(--line);
    transition: transform 0.25s cubic-bezier(.22,.61,.36,1);
  }
  .mobile-cta .btn { width: 100%; justify-content: center; }
  /* Slide away while the footer is on screen — it carries its own CTA/links. */
  .mobile-cta.at-footer { transform: translateY(120%); pointer-events: none; }
}
[data-theme="dark"] .mobile-cta { background: rgba(10, 14, 42, 0.9); }
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(14, 18, 48, 0.5);
  opacity: 0;
  pointer-events: none;
  /* opacity:0 does not take the panel's 8 links out of the tab order, so below
     1160px a keyboard user tabbed through a menu that renders nothing. WCAG 2.2
     SC 2.4.7 / 2.4.11. visibility does; it is transitioned so the fade survives.
     backdrop-filter moved to .open for the same reason — no compositing a blur
     layer that is permanently invisible. */
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.nav-drawer.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  backdrop-filter: blur(6px);
  transition-delay: 0s;
}
.nav-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 84vw);
  height: 100%;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 88px 20px 24px;
  transform: translateX(16px);
  transition: transform 0.25s cubic-bezier(.22,.61,.36,1);
  overflow-y: auto;
}
.nav-drawer.open .nav-drawer-panel { transform: translateX(0); }
.nav-drawer .nav-link {
  display: block;
  padding: 12px 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
  border-radius: 10px;
}
.nav-drawer .nav-link:hover { background: rgba(15, 21, 48, 0.05); }
[data-theme="dark"] .nav-drawer .nav-link:hover { background: rgba(255, 255, 255, 0.06); }
.nav-drawer .nav-link.is-active { color: var(--brand-indigo); }
.nav-drawer .nav-link.is-active::after { display: none; }
/* Must track the hamburger's breakpoint in styles.css (max-width: 1160px). If this
   hides the drawer at a width where .nav-toggle is still visible, the button opens
   a panel that CSS immediately hides and the menu looks broken. */
@media (min-width: 1161px) { .nav-drawer { display: none; } }

/* Belt-and-suspenders: never allow a horizontal scrollbar. */
html { overflow-x: clip; }