/* ---------------------------------------------------------------------------
   Local overrides. Loaded AFTER the generated Webflow stylesheet.
   Keep hand-written fixes here so re-exporting from Webflow never clobbers them.
   --------------------------------------------------------------------------- */

/* Header: remove the duplicated Log in / Waitlist pair.
 *
 * The header holds two independent sets of the same two destinations:
 *   1. .nav-menu.w-nav-menu  -> "LogIn" + "Waitlist"   (the hamburger dropdown)
 *   2. .nav-link-extra + .nav-button -> "Log in" + "Waitlist" pill (right side)
 *
 * Webflow shows set 1 inline above 991px and set 2 from 768px up, so:
 *   >=992px    both sets render at once -> visibly doubled
 *   768-991px  set 2 renders AND the hamburger opens set 1 -> doubled on open
 *   <=767px    only the hamburger -> correct already
 *
 * Fix: let exactly one set own each breakpoint range. */

/* >=768px: the right-hand pill set is canonical and covers both destinations,
 * so the collapsible menu never shows at these widths.
 *
 * !important, and 768 rather than 992, because Webflow's script writes an inline
 * `display: block` on the menu when it is opened and never removes it. Without
 * this, opening the menu on a phone and then widening the viewport (rotate, or a
 * desktop window drag) resurrected the duplicate pair -- an inline style beats a
 * plain rule. Verified by reproducing exactly that resize. */
@media screen and (min-width: 768px) {
  .nav-menu.w-nav-menu {
    display: none !important;
  }
}

/* Tablet: the pill set is already visible here, so the hamburger would only
 * ever open a redundant copy of the same two links. Hide the trigger.
 *
 * !important is required, not sloppiness: Webflow's own .w-nav-button rule is
 * itself !important, so a plain declaration here loses the cascade even at
 * higher specificity (verified in-browser -- plain rule computes to `block`,
 * !important computes to `none`). */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .menu-button.w-nav-button {
    display: none !important;
  }
}

/* <=767px keeps the hamburger + dropdown, but see the fix directly below. */

/* Mobile menu: opened off-screen and was unreachable.
 *
 * Webflow's navbar script starts a 600ms transform transition on .nav-menu when
 * the menu opens, but that transition never completes -- it sits permanently at
 * playState "running", frozen at exactly 50% between translateY(-366.188px) and
 * translateY(0px). That is where the -183.094px came from, and it pushed the
 * whole menu (and both links) above the top of the viewport.
 *
 * A running CSS transition outranks BOTH inline styles and !important
 * declarations, so neither `element.style.transform` nor a plain `!important`
 * rule could move it -- both were verified in-browser to have no effect. The
 * transition itself has to be cancelled, which `transition: none` does; with
 * nothing running, the !important transform then applies normally.
 *
 * Cost: the intended slide-in is dropped and the menu simply appears in place.
 * That animation was already broken, so nothing working is being lost.
 *
 * The close path was broken too, independently: Webflow toggles `w--open` on the
 * button correctly, but never restores `display: none` on the menu, so after the
 * first open the menu stayed mounted forever. That went unnoticed only because
 * it was parked off-screen -- fixing the position alone would have left it
 * permanently visible, so both states are driven here.
 *
 * `w--open` on the button is the one piece of state Webflow does maintain
 * reliably, so both rules key off it via :has(). Browsers without :has() simply
 * fall back to the original behaviour -- degraded, but no worse than before. */
@media screen and (max-width: 767px) {
  /* open: cancel the stuck transition so the menu sits where it belongs */
  .navbar.w-nav:has(.menu-button.w--open) .nav-menu.w-nav-menu {
    transition: none !important;
    transform: none !important;
  }

  /* closed: Webflow never re-hides it, so do it here */
  .navbar.w-nav:not(:has(.menu-button.w--open)) .nav-menu.w-nav-menu {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Demo-access request form (form.html)
   Replaces the old Typeform embed. Built on the site's existing tokens and
   .text-field / .button styles so it inherits the Webflow look.
   --------------------------------------------------------------------------- */

.section-demo {
  min-height: 100vh;
  padding-top: 9em;
}

.content-demo {
  max-width: 46em;
}

.block-demo-heading {
  margin-bottom: 2.6em;
}

.heading-demo {
  max-width: 100%;
  margin-bottom: .5em;
}

.paragraph-demo {
  max-width: 34em;
  color: var(--paragraphs);
}

/* --- layout ------------------------------------------------------------- */

.demo-grid {
  grid-column-gap: 1.2em;
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.demo-field {
  flex-direction: column;
  display: flex;
}

.demo-field-wide {
  grid-column: 1 / -1;
}

@media screen and (max-width: 767px) {
  .demo-grid {
    grid-template-columns: 1fr;
  }
  .section-demo {
    padding-top: 7em;
  }
}

/* --- fields ------------------------------------------------------------- */

.demo-label {
  color: var(--header);
  letter-spacing: .01em;
  margin-bottom: .55em;
  font-size: .87em;
  font-weight: 500;
  display: block;
}

.demo-req {
  color: var(--blue-1);
  font-style: normal;
}

.demo-optional {
  color: var(--paragraphs-light);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-left: .5em;
  font-size: .78em;
  font-weight: 500;
}

/* .text-field ships margin-bottom: 1.6em; the hint owns that spacing here. */
.demo-form .text-field {
  width: 100%;
  margin-bottom: 0;
  font-family: var(--main-font);
}

.demo-form .text-field:focus {
  border-color: var(--blue-1);
  outline: none;
}

.demo-form .text-field::placeholder {
  color: var(--paragraphs-light);
}

.demo-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--paragraphs) 50%),
                    linear-gradient(135deg, var(--paragraphs) 50%, transparent 50%);
  background-position: calc(100% - 1.35em) 1.62em, calc(100% - 1em) 1.62em;
  background-repeat: no-repeat;
  background-size: .35em .35em, .35em .35em;
  padding-right: 2.6em;
}

.demo-textarea {
  height: auto;
  min-height: 7em;
  line-height: 1.6em;
  resize: vertical;
}

/* --- validation hints --------------------------------------------------- */

.demo-hint {
  color: var(--pink-1);
  min-height: 1.5em;
  padding-top: .4em;
  font-size: .82em;
  line-height: 1.3em;
  display: block;
}

.demo-form .text-field[aria-invalid="true"] {
  border-color: var(--pink-1);
}

/* --- consent ------------------------------------------------------------ */

.demo-consent {
  margin-top: .4em;
  margin-bottom: 1.4em;
}

.demo-check {
  color: var(--paragraphs);
  cursor: pointer;
  align-items: flex-start;
  font-size: .93em;
  line-height: 1.5em;
  display: flex;
}

.demo-check input {
  accent-color: var(--blue-1);
  width: 1.05em;
  height: 1.05em;
  margin-top: .22em;
  margin-right: .7em;
  flex: none;
}

/* --- submit ------------------------------------------------------------- */

.demo-submit {
  cursor: pointer;
  border: 0;
  width: 100%;
}

.demo-submit[disabled] {
  cursor: progress;
  opacity: .55;
}

.demo-footnote {
  color: var(--paragraphs-light);
  margin-top: 1.1em;
  margin-bottom: 0;
  font-size: .85em;
  line-height: 1.5em;
}

/* honeypot: hidden from people, still reachable by bots */
.demo-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- result panels ------------------------------------------------------ */

.demo-result {
  border: 1px solid var(--border);
  background-color: var(--black-1);
  border-radius: .62em;
  padding: 2.2em 2em;
}

.demo-result[hidden] {
  display: none;
}

.demo-success {
  border-color: var(--green-2);
}

.demo-error {
  border-color: var(--pink-2);
}

.demo-result-title {
  color: var(--header);
  margin-top: 0;
  margin-bottom: .4em;
  font-size: 1.5em;
  line-height: 1.25em;
}

.demo-result-body {
  color: var(--paragraphs);
  margin-bottom: 0;
  line-height: 1.6em;
}

.demo-retry {
  cursor: pointer;
  border: 0;
  margin-top: 1.4em;
}