/* AnswerAI static-page animation layer.
   Loaded only by landing pages that no longer ship the Framer runtime
   (script_main). Together with static.js it replaces the animations the
   runtime used to drive; everything else on those pages is plain SSR HTML.

   Contact page inventory this covers:
   - Grid Border dashed lines (marching-ants march + fade-in)
   - Rolling-text letter roll on buttons (Framer RollingText renders each
     letter with a text-shadow copy one line-height below; hovering rolls
     the letters up by exactly that distance)
   - Variant hover states re-use the SSR ".hover" rules; static.js mirrors
     pointer state onto that class. Transitions for those swaps live here. */

/* ---- Grid Border (dashed section frames) ----
   SSR ships every frame at inline opacity:0 with animation:none; the
   runtime faded them in and injected per-instance keyframes. The dash
   pattern is 12,6 so one period is 18. */
.framer-gwnodu-container > div {
    opacity: 1 !important;
}

@keyframes aa-dash {
    to { stroke-dashoffset: -18; }
}

.framer-gwnodu-container svg path[stroke-dasharray] {
    animation: aa-dash 1s linear infinite !important;
}

/* ---- Rolling-text letter roll ----
   static.js stamps --aa-i (letter index) on each span for the stagger.
   The Framer spring (duration .4, bounce 0) is approximated with an
   ease-out cubic; --line-height-abs comes from the per-instance <style>
   RollingText already ships in the SSR. !important beats the inline
   "transform:none" each span carries. */
[class*="rolling-text-inner"] > span {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--aa-i, 0) * 14ms);
}

.hover [class*="rolling-text-inner"] > span,
button:hover [class*="rolling-text-inner"] > span,
form [data-framer-name="Fit"]:hover [class*="rolling-text-inner"] > span {
    transform: translateY(calc(-1 * var(--line-height-abs, 1em))) !important;
}

/* Variant swaps driven by the SSR ".hover" rules (opacity/colour flips)
   would otherwise snap; ease the properties those rules touch. */
[data-highlight] * {
    transition-property: opacity, color, background-color, border-color;
    transition-duration: 0.25s;
    transition-timing-function: ease;
}

/* ---- Box Bar intersection squares ----
   Small bordered squares where the dashed frames cross. SSR ships them at
   inline opacity:0 (the runtime faded them in). */
[data-framer-name="Box Bar"] {
    opacity: 1 !important;
}

/* ---- arrow slide on buttons ----
   Primary Button (framer-oq2Zm) and Form Button (framer-s7yHJ) both render
   two identical arrow copies inside an overflow-hidden ~25px box: the
   visible one in-flow, the spare parked at left:-20px / top:50%. The
   runtime swapped their layout roles on hover and let layout animation
   slide them ("arrow exits right, re-enters from left"). Statically we
   pin the resting layout (neutralising the SSR .hover position-swap
   rules, which otherwise fire without the runtime's transform
   compensation) and animate transforms instead. */
.framer-oq2Zm .framer-1t8nlxk,
.framer-oq2Zm .framer-16rqllf,
.framer-s7yHJ .framer-1x88e2f,
.framer-s7yHJ .framer-bnyh7l {
    transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.3, 1);
}

.framer-oq2Zm.hover .framer-1t8nlxk,
.framer-oq2Zm:hover .framer-1t8nlxk {
    left: -20px !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(25.5px) !important;
}

.framer-oq2Zm.hover .framer-16rqllf,
.framer-oq2Zm:hover .framer-16rqllf {
    position: relative !important;
    right: unset !important;
    top: unset !important;
    transform: translateX(25px) !important;
}

.framer-s7yHJ.hover .framer-1x88e2f,
.framer-s7yHJ:hover .framer-1x88e2f {
    left: -20px !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(25px) !important;
}

.framer-s7yHJ.hover .framer-bnyh7l,
.framer-s7yHJ:hover .framer-bnyh7l {
    position: relative !important;
    right: unset !important;
    top: unset !important;
    transform: translateX(24px) !important;
}

/* ---- nav-link hover (scramble + colour) ----
   Nav Item labels are a ScrambleText span; static.js scrambles the text on
   hover (matching the runtime's glitch config). The footer/social variant
   also brightens from 50% white to full white. */
a.framer-6b3ny5 .framer-1xqglfy-container span {
    transition: color 0.2s ease;
}

footer a.framer-6b3ny5:hover .framer-1xqglfy-container span {
    color: #fff !important;
}

/* ---- phone menu ----
   static.js swaps the nav between its closed (framer-v-jw9bb8) and open
   (framer-v-p55fyj) variant classes; the open-state layout already lives in
   the SSR CSS. Morph the hamburger's three <line>s into an X while open. */

/* The open menu is sized by var(--framer-viewport-height, 100vh), a variable
   the Framer runtime kept synced to the real visible viewport. Without the
   runtime it falls back to 100vh — the LARGE viewport on phones — so the
   bottom-pinned Log in / Sign up buttons land behind the browser's toolbar
   (and the clipped, scroll-locked menu can't reach them). 100dvh tracks the
   dynamic viewport instead; older browsers keep the 100vh fallback. */
@supports (height: 100dvh) {
    :root {
        --framer-viewport-height: 100dvh;
    }
}
nav.framer-yVODL [data-framer-name="Icon"] svg line {
    transform-box: view-box;
    transform-origin: 12px 12px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

nav.framer-yVODL.framer-v-p55fyj [data-framer-name="Icon"] svg line:nth-of-type(1) {
    transform: rotate(45deg) translateY(5.143px);
}

nav.framer-yVODL.framer-v-p55fyj [data-framer-name="Icon"] svg line:nth-of-type(2) {
    opacity: 0;
}

nav.framer-yVODL.framer-v-p55fyj [data-framer-name="Icon"] svg line:nth-of-type(3) {
    transform: rotate(-45deg) translateY(-5.143px);
}

/* ---- billing toggle (pricing cards) ----
   SSR ships only the Closed variant (gray track, knob pinned left:1px by
   framer-v-xo2dcc). static.js toggles .aa-on: the knob slides 14px
   (36px track − 20px knob − 2×1px inset) and the annual-state track
   crossfades in through an overlay, because the two states are gradients
   (270deg #d9d9d9 flat → #0057a8→#c0e2f9) and gradients can't transition. */
.framer-9ZoQr.framer-1upjbz2::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(270deg, rgb(0, 87, 168) 0%, rgb(192, 226, 249) 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), inset 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.framer-9ZoQr.aa-on::after {
    opacity: 1;
}

.framer-9ZoQr .framer-sh7mr6 {
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.framer-9ZoQr.aa-on .framer-sh7mr6 {
    transform: translateX(14px);
}

/* ---- FAQ accordion (pricing) ----
   static.js swaps each Question between its Open (framer-v-10ipujg) and
   Close (framer-v-edymab) variant classes — the SSR CSS carries both
   layouts — and animates the root height through .aa-hanim while the
   answer fades/slides and the plus icon turns into an ×. */
.framer-ycsmC.framer-pcLHu {
    cursor: pointer;
}

.framer-ycsmC .framer-eflgpt {
    transition: transform 0.3s ease;
}

.framer-ycsmC .framer-1yjrrws {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.framer-ycsmC.aa-hanim {
    transition: height 0.35s cubic-bezier(0.2, 0, 0.2, 1);
    overflow: clip !important;
}

/* ---- product step cards (features) ----
   The three "Step - 2" rows ship their Text at inline opacity .3; the
   runtime's hover variant restored it to 1. */
.framer-87nqjs .framer-qiy2z5 {
    transition: opacity 0.3s ease;
}

a.framer-87nqjs.framer-v-i1ohcw.hover .framer-qiy2z5,
a.framer-87nqjs.framer-v-i1ohcw:hover .framer-qiy2z5 {
    opacity: 1 !important;
}

/* ---- how-it-works step accordion (features) ----
   static.js swaps items between framer-v-mqcx57 (Open) and framer-v-ebbrnd
   (Close) and crossfades the three art layers; heights ease via .aa-hanim
   like the FAQ port. */
.framer-WgqEX .framer-1r3soaw {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.framer-WgqEX.aa-hanim {
    transition: height 0.35s cubic-bezier(0.2, 0, 0.2, 1);
    overflow: clip !important;
}

.framer-wnht3 .framer-houhs,
.framer-wnht3 .framer-1scoa4i,
.framer-wnht3 .framer-55t9mn-container {
    transition: opacity 0.45s ease;
}

/* ---- progress-bar walls (features) ----
   static.js swaps each bar from its empty variant to its Active variant on
   first view; the SSR CSS holds the Active heights, this eases the growth. */
.framer-XfTLP .framer-trz9yr {
    transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- booking timeline card (features) ----
   Rows light as static.js walks the step chain: the RichText colour var
   flips to black and the grey dot cover fades out. */
.framer-re5v4s p,
.framer-199smcv p,
.framer-1glsgyc p {
    transition: color 0.45s ease;
}

.framer-ioitio,
.framer-1xuijqe,
.framer-1hed1s5 {
    transition: opacity 0.45s ease;
}

/* Framer's in-page anchors (product step cards → #1…#4) smooth-scrolled. */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    .framer-gwnodu-container svg path[stroke-dasharray] {
        animation: none !important;
    }

    [class*="rolling-text-inner"] > span,
    [data-highlight] *,
    .framer-oq2Zm .framer-1t8nlxk,
    .framer-oq2Zm .framer-16rqllf,
    .framer-s7yHJ .framer-1x88e2f,
    .framer-s7yHJ .framer-bnyh7l,
    .framer-9ZoQr.framer-1upjbz2::after,
    .framer-9ZoQr .framer-sh7mr6,
    .framer-ycsmC .framer-eflgpt,
    .framer-ycsmC .framer-1yjrrws,
    .framer-ycsmC.aa-hanim,
    .framer-87nqjs .framer-qiy2z5,
    .framer-WgqEX .framer-1r3soaw,
    .framer-WgqEX.aa-hanim,
    .framer-wnht3 .framer-houhs,
    .framer-wnht3 .framer-1scoa4i,
    .framer-wnht3 .framer-55t9mn-container,
    .framer-XfTLP .framer-trz9yr,
    .framer-re5v4s p,
    .framer-199smcv p,
    .framer-1glsgyc p,
    .framer-ioitio,
    .framer-1xuijqe,
    .framer-1hed1s5 {
        transition: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}