/* ──────────────────────────────────────────────────────────────────────────
   pseudo.css — replaces the prototype's `style-hover` / `style-focus`
   attributes with real CSS.

   The prototype runtime (support.js:1567-1589) compiled each `style-*`
   attribute into a generated class plus a pseudo-class rule, marking every
   declaration `!important`. The `!important` is load-bearing, not sloppiness:
   the base value lives in an inline `style` attribute, which would otherwise
   win against any class selector. We reproduce that behaviour exactly, but
   with stable, readable names.

   All 35 occurrences in the design collapse to the 7 rules below.
   ────────────────────────────────────────────────────────────────────────── */

/* 16x — footer links, legal-bar links */
.h-white:hover  { color: #ffffff !important; }

/* 5x — nav links, FAQ question buttons */
.h-deep:hover   { color: #061bb0 !important; }

/* 1x — testimonial index buttons */
.h-accent:hover { color: #0927eb !important; }

/* 4x — footer social squares */
.h-border:hover { border-color: #76b9f0 !important; }

/* 2x — testimonial carousel prev/next */
.h-tint:hover   { background: rgba(9,39,235,0.08) !important; }

/* 1x — hero primary CTA */
.h-glow:hover   { box-shadow: 0 18px 40px -10px rgba(9,39,235,0.7) !important; }

/* 6x — contact form inputs + textarea.
   `:focus`, not `:focus-visible`, to match the prototype's behaviour. */
.f-border:focus { border-color: #76b9f0 !important; }


/* ──────────────────────────────────────────────────────────────────────────
   State classes that replace `{{ }}` bindings which changed at runtime.
   ────────────────────────────────────────────────────────────────────────── */

/* Nav shrinks on scroll — prototype bound `{{ navHeight }}` to state.scrolled.
   The `transition: height .25s ease` is already inline on the element. */
[data-nc="navrow"].is-scrolled { height: 68px !important; }

/* Reveal-on-scroll. JS sets the initial hidden state so that visitors with
   JavaScript disabled still see all content — never hide it in CSS. */
[data-reveal] { transition: opacity .6s ease, transform .6s ease; }

/* FAQ accordion: the vertical stroke of the "+" collapses into a "−". */
.plusbar { transition: transform .25s ease, opacity .25s ease; }
.plusbar.open { transform: scaleY(0) !important; opacity: 0 !important; }

/* The `hidden` attribute only carries `display: none` from the browser's
   default stylesheet, which ANY inline `style="display: ..."` overrides — and
   this design sets display inline on nearly everything. Without this rule,
   hiding an element from JavaScript silently does nothing. */
[hidden] { display: none !important; }

/* Honeypot — visually gone, still reachable by bots that parse the DOM.
   Not `display:none`, which some bots skip. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Respect the visitor's motion preference. The design is animation-heavy. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}