/* Runtime CSS for the 2026 marketing pages — the rules src/js/new-site.js
   depends on. Everything the designers delivered lives in page-*.css; this file
   only adds what the React-to-vanilla port needs.
   Load it after page-*.css on all four pages. */

/* ── sc-if replacement ──
   The converter turned <sc-if> children into data-when + hidden, and overlay.js
   toggles `hidden`. Two things would otherwise win over the UA's `[hidden]`:
   the inline `display:flex` / `display:none` these nodes carry, and the mobile
   breakpoint's `.m-menu { display: block !important }`. Hence !important, and
   two attributes of specificity (0,2,0) to outrank that class rule (0,1,0). */
[data-when][hidden] {
  display: none !important;
}

/* ── body scroll lock while the modal is open ──
   overlay.js also pads the body by the scrollbar width so the fixed header
   does not jump sideways. */
body.ns-scroll-lock {
  overflow: hidden;
}

/* ── promoted buttons ──
   The delivery's burger, close ✕ and submit controls are <div>s. overlay.js
   gives them role="button" and tabindex; they still need a visible focus ring,
   which the delivery never provided. */
[role="button"] {
  cursor: pointer;
}

[role="button"]:focus-visible,
.m-modal:focus-visible {
  outline: 2px solid #0666ff;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── injected form bits ── */

/* Honeypot: off-screen rather than display:none, so a bot that filters on
   visibility still fills it. Never focusable (tabindex=-1 is set in JS). */
.ns-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ns-turnstile:empty {
  display: none;
}

.ns-form-status {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  color: #565d70;
}

.ns-form-status:empty {
  display: none;
}

.ns-form-status.is-error {
  background: #fdecec;
  border: 1px solid rgba(214, 69, 69, 0.35);
  color: #a02020;
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
}

/* ── reduced motion ──
   The design system asks for the scrubs to be off, and new-site.js honours it.
   These rules cover what JS cannot: the transitions and animations declared
   inline in the markup, and the resting states (opacity:0, clip-path) that must
   never survive when nothing is going to animate them away. */
@media (prefers-reduced-motion: reduce) {
  [data-ref="revealRef"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-wipe] {
    clip-path: none !important;
    transform: none !important;
  }

  [data-ref="barRef"],
  [data-chat-el="tools"],
  [data-chat-el="send"],
  [data-chat-el="pill2"],
  [data-ref="navRef"] {
    transition: none !important;
  }

  [data-ref="heroHintRef"],
  [data-chat-el="caret"],
  .m-menu > * {
    animation: none !important;
  }

  /* The marquee stays paused: the strip is decorative and the same faces
     repeat, so nothing is lost by holding it still. */
  .team-marquee {
    animation-play-state: paused !important;
  }
}

/* ── nav variants ──
   The delivery shipped two different headers. On the home the nav is fixed and
   starts hidden, sliding in once the full-height hero has scrolled past; on the
   inner pages it is a plain sticky bar, visible from the start. They are one
   partial here, so the difference lives in these two rules instead.
   motion.js overrides opacity/transform/pointer-events inline as you scroll, so
   these must stay un-!important.
   NB: the class is m-navbar, not m-nav — the delivery already uses .m-nav for
   the inner flex row, and the mobile breakpoint sizes it. */
.m-navbar {
  position: sticky;
}

.m-navbar--home {
  position: fixed;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.65, 0.2, 1);
}