/* SignalPGx brand overrides — hydration-proof (CSS only, no DOM mutation) */

/* Swap the Framer "Logo" wordmark component for the SignalPGx SVG.
   Most Logo instances sit on the dark (#171717) sections -> cream Logo_1.
   The one on a white background gets the dark Logo_13 via the override below. */
[data-framer-name="Logo"] {
  background-image: url('/brand/Logo_1.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
[data-framer-name="Logo"] > * { opacity: 0 !important; }

/* Logo instances that sit inside a light/white section -> dark logo */
.framer-body-light [data-framer-name="Logo"],
[style*="rgb(255, 255, 255)"] [data-framer-name="Logo"] {
  background-image: url('/brand/Logo_13.svg');
}

/* ---------------------------------------------------------------------------
   Floating "BOOK A DEMO" CTA (.framer-vwyx9i, fixed bottom-right).
   Repurposed from the template's buy-pill. Given the SAME orange treatment as
   the "SUBSCRIBE FOR UPDATES" button, whose recipe (read off the live DOM) is:
     rest  -> ::after = 2px solid #FF3A24, matching the pill radius
     hover -> a #FF3A24 fill layer slides up from below, inside overflow:hidden
   The pill's own radius is 10px (the subscribe button's is 20px), so we keep 10.
   --------------------------------------------------------------------------- */
.framer-vwyx9i .framer-14v7aht {
  position: relative;
  overflow: hidden;          /* clips the fill layer to the rounded pill */
  isolation: isolate;
}

/* orange outline at rest */
.framer-vwyx9i .framer-14v7aht::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #FF3A24;
  border-radius: 10px;
  pointer-events: none;
  z-index: 2;
}

/* orange fill, parked below the pill; slides up on hover */
.framer-vwyx9i .framer-14v7aht::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 100%;
  background: #FF3A24;
  transition: top .45s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
  z-index: 0;
}
.framer-vwyx9i:hover .framer-14v7aht::before,
.framer-vwyx9i:focus-visible .framer-14v7aht::before {
  top: 0;
}

/* label + arrow must ride ABOVE the fill layer */
.framer-vwyx9i .framer-1nak6so,
.framer-vwyx9i .framer-m7558v {
  position: relative;
  z-index: 1;
}

.framer-vwyx9i { cursor: pointer; }

/* The pill ships as a Framer SCROLL-APPEAR element: Framer puts `opacity:0;
   transform:translateY(30px)` in its inline style and only fades it in once you scroll
   past the hero — so the CTA was missing from the hero itself. Force it visible from
   first paint. `!important` wins over Framer's inline style (which carries no
   !important), so we get this without fighting React for control of the DOM node.

   Its sibling — the circular scroll-to-top button — is deliberately NOT touched: it
   should keep appearing only once there's something to scroll back up to. It still
   reserves its layout box while hidden, so the pill doesn't shift when it fades in. */
.framer-vwyx9i {
  opacity: 1 !important;
  transform: none !important;
  /* brand.js lifts the pill over the hero's QR card and drops it again past the hero;
     ease the move so it glides rather than jumps. */
  transition: bottom .35s cubic-bezier(.2, .7, .2, 1);
}