@charset "UTF-8";

/* ==========================================================================
   VP BENEFITS ACCORDION (vp-card-*)
   --------------------------------------------------------------------------
   Intentionally NO accordion styling in this file.
   All visual styles for:
   - .c-accordion__item-button / __header / __body / __footer / __text
   are managed in Webflow Designer.

   Accordion open/close + split-line reveal is handled in `js/sp-site.js`.
   ========================================================================== */

/* VP CARD TITLE NUMBER GRADIENT (open state only) */
.c-accordion__item-button[id^="vp-card-"][aria-expanded="true"] .c-accordion__title-number{
  background-image: linear-gradient(
    90deg,
    var(--primary-brand--brand-500),
    #d9f79b 33%,
    var(--secondary-brand--secondary-brand-500) 66%,
    var(--primary-brand--brand-400)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* VP CARD TITLE NUMBER HOVER (closed cards only) */
.c-accordion__item-button[id^="vp-card-"]:not([aria-expanded="true"]):hover .c-accordion__title-number{
  color: rgba(240, 255, 108, 0.5);
}

/* VP CARD FOOTER COLORS */
.c-accordion__item-button[id^="vp-card-"][aria-expanded="true"] .c-accordion__footer-text,
.c-accordion__item-button[id^="vp-card-"]:hover .c-accordion__footer-text{
  color: var(--neutral--neutral-200);
}

.c-accordion__item-button[id^="vp-card-"][aria-expanded="true"] .c-accordion__footer-label{
  color: var(--neutral--neutral-2000, var(--neutral--neutral-200));
}

.c-accordion__item-button[id^="vp-card-"]:hover .c-accordion__footer-label{
  color: var(--neutral--neutral-300);
}

/* VP CARD TOGGLE ICON MOTION (pairs with lottie open/close playhead) */
.c-accordion__item-button[id^="vp-card-"] .c-accordion__toggle-icon{
  transform-origin: 50% 50%;
  will-change: transform, filter;
  transition:
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.32s ease;
}

.c-accordion__item-button[id^="vp-card-"][aria-expanded="true"] .c-accordion__toggle-icon{
  transform: rotateZ(180deg) scale(1.03);
  filter: drop-shadow(0 0 10px rgba(217, 247, 155, 0.24));
}

.c-accordion__item-button[id^="vp-card-"]:not([aria-expanded="true"]) .c-accordion__toggle-icon{
  transform: rotateZ(0deg) scale(1);
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .c-accordion__item-button[id^="vp-card-"] .c-accordion__toggle-icon{
    transition: none;
  }
}

/* ==========================================================================
   == FAQ ACCORDION: PANEL + LOTTIE TOGGLE ICON ==
   --------------------------------------------------------------------------
   Scoped only to FAQ triggers/panels so other accordions are unaffected.
   JS controls `aria-expanded` + `[hidden]`; this block mirrors VP icon motion.
   ========================================================================== */
.c-faq__panel[hidden] {
  display: none !important;
}

.c-faq__trigger .c-faq__trigger-icon,
.c-faq__trigger .c-accordion__toggle-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  transform-origin: 50% 50%;
  will-change: transform, filter;
  transition:
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.32s ease;
}

.c-faq__trigger .c-faq__trigger-icon .w-lottie,
.c-faq__trigger .c-accordion__toggle-icon .w-lottie{
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.c-faq__trigger[aria-expanded="true"] .c-faq__trigger-icon,
.c-faq__trigger[aria-expanded="true"] .c-accordion__toggle-icon{
  transform: rotateZ(180deg) scale(1.03);
  filter: drop-shadow(0 0 10px rgba(217, 247, 155, 0.24));
}

.c-faq__trigger[aria-expanded="false"] .c-faq__trigger-icon,
.c-faq__trigger[aria-expanded="false"] .c-accordion__toggle-icon{
  transform: rotateZ(0deg) scale(1);
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .c-faq__trigger .c-faq__trigger-icon,
  .c-faq__trigger .c-accordion__toggle-icon{
    transition: none;
  }
}

/* ==========================================================================
   == SCENARIOS TABS: PANEL VISIBILITY SAFEGUARD ==
   --------------------------------------------------------------------------
   JS toggles `[hidden]` on each `.c-scenarios__panel`.
   ========================================================================== */
.c-scenarios__panel[hidden]{
  display: none !important;
}

/* ==========================================================================
   == TOC SCROLLSPY: ACTIVE LINK COLOR ==
   --------------------------------------------------------------------------
   JS sets `.is-active` + `aria-current="true"` on the current section link.
   ========================================================================== */
.c-toc__list .c-toc__link.is-active,
.c-toc__list .c-toc__link[aria-current="true"]{
  color: #e6e6e6;
}

/* ==========================================================================
   == DELIVERABLES CARDS: TOGGLE ICON MOTION ==
   --------------------------------------------------------------------------
   Mirrors VP/FAQ icon rotation based on `aria-expanded`.
   ========================================================================== */
.card-accordion-trigger .c-accordion__toggle-icon{
  transform-origin: 50% 50%;
  will-change: transform, filter;
  transition:
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.32s ease;
}

.card-accordion-trigger[aria-expanded="true"] .c-accordion__toggle-icon{
  transform: rotateZ(180deg) scale(1.03);
  filter: drop-shadow(0 0 10px rgba(217, 247, 155, 0.24));
}

.card-accordion-trigger[aria-expanded="false"] .c-accordion__toggle-icon{
  transform: rotateZ(0deg) scale(1);
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .card-accordion-trigger .c-accordion__toggle-icon{
    transition: none;
  }
}

/* ==========================================================================
   == HOMEPAGE HERO PREHIDE (PREVENT FIRST-FRAME FLASH) ==
   --------------------------------------------------------------------------
   JS adds/removes `html.sp-hero-prehide` around custom hero load setup.
   ========================================================================== */
html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .c-heading,
html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .c-button-group-wrapper,
html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .c-text-body.is-loud-regular.c-text-body--subtle,
html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .p-home-hero__content-wrapper,
html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .c-heading,
html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .c-button-group-wrapper,
html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .c-text-body.is-loud-regular.c-text-body--subtle,
html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .p-home-hero__content-wrapper,
html.sp-hero-prehide .p-home-main-container,
html:not(.sp-hero-ready) .p-home-main-container{
  opacity: 0;
  visibility: hidden;
}

/* VP BENEFITS ACCORDION visuals are controlled in Webflow. */

  [data-anim-text]{
    display: inline-block;          /* stabilises the box for transforms */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Hero lead paragraph must stay block-level for stable wrapping/splitting. */
  .p-home-hero .p-home-hero__body-wrapper .c-text-body.is-loud-regular.c-text-body--subtle[data-anim-text]{
    display: block;
    width: 100%;
  }

  .will-transform {
    will-change: transform;
    transform-origin: 50% 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    isolation: isolate;
  }

  /* Firefox: prefer flatter compositing for scroll-scale content */
  @supports (-moz-appearance: none) {
    .will-transform {
      will-change: auto;
      transform-style: flat;
      perspective: none;
      -webkit-backface-visibility: visible;
      backface-visibility: visible;
      contain: layout paint;
    }

    .will-transform * {
      -webkit-backface-visibility: visible;
      backface-visibility: visible;
    }

    .p-home-hero.will-transform {
      transform-origin: 50% 0%;
    }

    /* During scroll scaling, reduce glow/filter work on hero accent text in Firefox. */
    .p-home-hero.is-scroll-scaling .u-anim-load::after {
      filter: none;
    }

    .p-home-hero.is-firefox.is-scroll-scaling [data-anim-text],
    .p-home-hero.is-firefox.is-scroll-scaling .c-heading,
    .p-home-hero.is-firefox.is-scroll-scaling .c-text-body,
    .p-home-hero.is-firefox.is-scroll-scaling [class*="gsap_split_line"] {
      will-change: auto !important;
    }
  }

        :root {
          /* Restored Original Glass Vars */
          --glass-border-w: 1px;
          --glass-border-hi: rgba(255,255,255,0.5);
          --glass-border-mid: rgba(255,255,255,0.15);
          --glass-border-lo: rgba(0,0,0,0.25);
          
          --btn-bg: rgba(255, 255, 255, 0.03);
          --btn-text: rgba(255, 255, 255, 0.6);
          --btn-text-hover: #ffffff;
        }

        /* ---------------------------------------------------------
           1. EXPLORE BENEFITS (The Quiet Glass Button)
           --------------------------------------------------------- */
        /* ---------------------------------------------------------
           Metallic Border Utility (Reusable)
           - Use on any element: add class `u-metallic-border`
           - Optional: preserve an existing shadow by setting
             `--metallic-shadow-underlay: <your-shadow>;`
           --------------------------------------------------------- */
        .u-metallic-border {
          --metallic-border-w: var(--glass-border-w, 1px);
          --metallic-border-hi: var(--glass-border-hi, rgba(255,255,255,0.35));
          --metallic-border-mid: var(--glass-border-mid, rgba(255,255,255,0.10));
          --metallic-border-lo: var(--glass-border-lo, rgba(0,0,0,0.25));
          position: relative;
        }

        .u-metallic-border::after {
          content: "";
          pointer-events: none;
          border-radius: inherit;
          position: absolute;
          inset: 0;
          box-shadow:
            inset 0 0 0 var(--metallic-border-w) var(--metallic-border-mid),
            inset 0 1px 0 var(--metallic-border-hi),
            inset 0 -1px 0 var(--metallic-border-lo);
        }

        .u-metallic-border:hover::after {
          box-shadow:
            inset 0 0 0 var(--metallic-border-w) rgba(255,255,255,0.25),
            inset 0 1px 0 rgba(255,255,255,0.7),
            inset 0 -1px 0 rgba(0,0,0,0.3);
        }

        /* ---------------------------------------------------------
           Dim Sheen Utility (Reusable)
           - Add class `u-dim-sheen` to any positioned element (works well with
             `u-metallic-border` since it already sets `position: relative`)
           - Per-element controls:
             --sheen-delay: 0.6s;
             --sheen-duration: 3.2s;
             --sheen-opacity: 0.6;
             --sheen-color: rgba(255,255,255,0.08);
           --------------------------------------------------------- */
        @keyframes u-dim-sheen-sweep {
          0% { background-position: -180% 0; opacity: 0; }
          12% { opacity: var(--sheen-opacity, 0.6); }
          55% { background-position: 180% 0; opacity: var(--sheen-opacity, 0.6); }
          100% { background-position: 180% 0; opacity: 0; }
        }

        .u-dim-sheen {
          isolation: isolate;
        }

        .u-dim-sheen::before {
          content: "";
          pointer-events: none;
          position: absolute;
          inset: 0;
          border-radius: inherit;
          background-image: linear-gradient(
            120deg,
            transparent 35%,
            var(--sheen-color, rgba(255,255,255,0.08)) 50%,
            transparent 65%
          );
          background-size: 260% 100%;
          background-position: -180% 0;
          mix-blend-mode: screen;
          opacity: 0;
          animation: u-dim-sheen-sweep var(--sheen-duration, 3.6s) ease-in-out var(--sheen-delay, 0s) infinite;
        }

        @media (prefers-reduced-motion: reduce) {
          .u-dim-sheen::before {
            animation: none;
            opacity: 0;
          }
        }

        /* Convenience delay helpers (override with --sheen-delay if needed) */
        .u-sheen-delay-0 { --sheen-delay: 0s; }
        .u-sheen-delay-200 { --sheen-delay: 0.2s; }
        .u-sheen-delay-400 { --sheen-delay: 0.4s; }
        .u-sheen-delay-600 { --sheen-delay: 0.6s; }
        .u-sheen-delay-800 { --sheen-delay: 0.8s; }
        .u-sheen-delay-1000 { --sheen-delay: 1s; }
        .u-sheen-delay-1200 { --sheen-delay: 1.2s; }
        .u-sheen-delay-1400 { --sheen-delay: 1.4s; }
        .u-sheen-delay-1600 { --sheen-delay: 1.6s; }
        .u-sheen-delay-1800 { --sheen-delay: 1.8s; }
        .u-sheen-delay-2000 { --sheen-delay: 2s; }

        .c-button.is-quiet {
          background: var(--btn-bg);
          -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
          
          /* STATIC BORDER RESTORED: This creates the permanent visible border */
          box-shadow:
            inset 0 0 0 var(--glass-border-w) var(--glass-border-mid),
            inset 0 1px 0 var(--glass-border-hi),
            inset 0 -1px 0 var(--glass-border-lo);
          
          color: var(--btn-text);  
          transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
          overflow: hidden; 
        }

        /* Hover State */
        .c-button.is-quiet:hover {
          background: rgba(255, 255, 255, 0.08);
          color: var(--btn-text-hover);
          /* Slightly crispier border on hover */
          box-shadow:
            inset 0 0 0 var(--glass-border-w) rgba(255,255,255,0.25),
            inset 0 1px 0 rgba(255,255,255,0.7),
            inset 0 -1px 0 rgba(0,0,0,0.3);
        }

        /* 
         * THE ROTATING LIGHT (Subtle Overlay)
         * - Slower speed
         * - Wider spread to cover more of the border
         */
        .c-button.is-quiet::after {
          /* 
             WIDER GRADIENT:
             Instead of a small dot, we have a long tail.
             The light covers roughly 200 degrees (over 50%) of the circle now.
          */
          background: conic-gradient(
            from var(--angle, 0deg), 
            transparent 0deg, 
            rgba(255, 255, 255, 0.1) 60deg,
            rgba(255, 255, 255, 0.8) 180deg, /* Brightest point */
            rgba(255, 255, 255, 0.1) 300deg,
            transparent 360deg
          );

          /* Mask keeps it only on the border */
          -webkit-mask: 
            linear-gradient(#fff 0 0) content-box, 
            linear-gradient(#fff 0 0);
          mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          
          pointer-events: none;
          opacity: 0.6; /* Always slightly visible */
          transition: opacity 0.4s ease;
          mix-blend-mode: overlay; /* Blends with the static box-shadow */
        }

        .c-button.is-quiet:hover::after {
          opacity: 1; 
        }

        /* The Internal Sheen */
        .c-button.is-quiet::before {

          background: linear-gradient(
            90deg, 
            transparent, 
            rgba(255, 255, 255, 0.05), 
            transparent
          );
          transform: skewX(-20deg);
          transition: left 0.5s ease;
          pointer-events: none;
        }

        .c-button.is-quiet:hover::before {
          left: 150%;
          transition: left 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        /* ---------------------------------------------------------
           2. LET'S TALK (The Primary Gradient Button)
           --------------------------------------------------------- */
         .c-button.is-primary-large {
          /* 
             UPDATED GRADIENT 
             Stops: #F0FF6C (1%) -> #D9F79B (33%) -> #CDEDC1 (66%) -> #F4FF94 (100%)
          */
          background: linear-gradient(92deg, 
            #F0FF6C 0%, 
            #D9F79B 33%, 
            #CDEDC1 66%, 
            #F4FF94 100%
          );
          background-size: 200% auto;
          
          border-radius: 9999px;
          text-decoration: none;
          /* Glow matching the new lime colors */
          box-shadow: 
            0 4px 15px rgba(217, 247, 155, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
            
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
          z-index: 2; 
        }
        
         .c-button.is-primary-large:hover {
           transform: scale(1.05);
           /* Shift gradient to show more of the lighter yellow/mint */
           background-position: right center;
           
           box-shadow: 
             0 8px 25px rgba(240, 255, 108, 0.4),
             inset 0 1px 0 rgba(255, 255, 255, 0.8);
         }

        /* Primary gradient shift (reusable, no shadows) */
        .u-primary-gradient-shift {
          background: linear-gradient(92deg,
            #F0FF6C 0%,
            #D9F79B 33%,
            #CDEDC1 66%,
            #F4FF94 100%
          );
          background-size: 200% auto;
          background-position: left center;
          background-repeat: no-repeat;
          transition: background-position 0.3s ease;
        }

        .u-primary-gradient-shift:hover,
        .u-primary-gradient-shift:focus-visible {
          background-position: right center;
        }

        /* ---------------------------------------------------------
           2b. SECONDARY GHOST BUTTON (Hover: two-stage bg + inset depth)
           Targets: `#secondary-ghost-button`
           --------------------------------------------------------- */
        #secondary-ghost-button{
          position: relative;
          overflow: hidden;
          isolation: isolate;
        }

        #secondary-ghost-button::before{
          content: "";
          position: absolute;
          inset: 0;
          pointer-events: none;
          z-index: -1;
          opacity: 0;
          background-color: rgba(255, 255, 255, 0.08);
          transition: opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        @keyframes sp-secondary-ghost-bg{
          0%   { opacity: 0; background-color: rgba(255, 255, 255, 0.08); }
          22%  { opacity: 1; background-color: rgba(255, 255, 255, 0.08); }
          100% { opacity: 1; background-color: rgba(13, 13, 13); }
        }

        #secondary-ghost-button:hover{
          box-shadow:
            inset 0 0 0 1px rgba(255,255,255,0.06),
            inset 0 10px 26px rgba(0,0,0,0.26);
        }

        #secondary-ghost-button:hover::before{
          animation: sp-secondary-ghost-bg 650ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
          opacity: 1;
        }

        /* ---------------------------------------------------------
           3. SHEEN BUTTON (Generic utility for Webflow buttons/links)
           --------------------------------------------------------- */
        .btn-sheen {
          position: relative;
          overflow: hidden; /* keeps the sheen inside the button */
          border: 1px solid rgba(240, 255, 108, 0.3); /* brand lime at 30% opacity */
          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* Apple-style easing */
        }

        .btn-sheen:hover {
          border-color: #F0FF6C;
          background-color: rgba(38, 38, 38, 0.5); /* neutral-800 at 50% */
          color: #ffffff;
        }

        .btn-sheen::after {
          content: "";
          position: absolute;
          inset: 0;
          pointer-events: none;

          /* The shine gradient: Transparent -> Lime Tint -> Transparent */
          background: linear-gradient(
            90deg,
            transparent,
            rgba(244, 255, 144, 0.3),
            transparent
          );

          /* Skew it for the dynamic look */
          transform: translateX(-150%) skewX(-20deg);

          /* Run the animation infinitely */
          animation: sheenPass 4.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        @keyframes sheenPass {
          0% { transform: translateX(-150%) skewX(-20deg); }
          40%, 100% { transform: translateX(300%) skewX(-20deg); }
        }

        /* ---------------------------------------------------------
           3b. NAV CTA BUTTON (No animated rings)
           Markup:
           <div class="c-nav-button-container">
             <a class="c-button is-ghost is-small btn-sheen">...</a>
           </div>
           --------------------------------------------------------- */
        .c-nav-button-container{
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }

        /* 1) Entrance animations split so opacity can be 2s */
        /*@keyframes accent-opacity-in {
          from { opacity: 0; }
          to   { opacity: 1; }
        }*/

        @keyframes accent-blur-in {
          0% {
            filter: blur(24px);
            transform: scale(0.98);
          }
          100% {
            filter: blur(0);
            transform: scale(1);
          }
        }

        /* 2) Existing gradient breathe */
        @keyframes gradient-breathe {
          0%   { background-position: 0% 50%; }
          100% { background-position: 100% 50%; }
        }

        .u-anim-load {
          position: relative;
          display: inline-block;

          background-image: linear-gradient(
            90deg,
            #F0FF6C 0%,
            #D9F79B 33%,
            #CDEDC1 66%,
            #F4FF94 100%
          );
          background-size: 200% auto;
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;

          /* IMPORTANT: remove filter here so it doesn't override blur animation */
          /* filter: drop-shadow(...); */

          /* Run opacity for 2s, blur/scale for 4s, breathe forever */
          animation:
            accent-opacity-in 3.5s ease forwards,
            accent-blur-in 3.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
            gradient-breathe 8s ease-in-out infinite alternate;
        }

        /* Glow on a separate layer so blur animation stays intact */
        .u-anim-load::after {
          content: attr(data-text);
          position: absolute;
          inset: 0;
          pointer-events: none;

          /* Make the glow layer visually match the gradient text */
          color: transparent;
          -webkit-text-fill-color: transparent;

          /* The "glow" */
          filter: drop-shadow(0 0 25px rgba(240, 255, 108, 0.25));
          opacity: 1;
        }

/* Accordion styles are managed in Webflow (removed from this file). */