.gradient-ink .uagb-heading-text span, 
.gradient-ink {
    background: linear-gradient(90deg, #6366f1, #a855f7); /* Edit your hex codes here */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* Essential for the gradient to render correctly */
}

.features-two-col .feature-images .feature-image { display: none; }
.features-two-col .feature-images .feature-image.is-active { display: block; }

.gradient-text {
  background: linear-gradient(135deg, #a78bfa, #818cf8, #6ee7b7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tg-wave-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.tg-wave-bar span {
  display: block;
  width: 4px;
  border-radius: 4px;
  background: #7c3aed;
  animation: tg-wave 1s ease-in-out infinite;
}

.tg-wave-bar span:nth-child(1) { height: 12px; animation-delay: 0s; }
.tg-wave-bar span:nth-child(2) { height: 24px; animation-delay: 0.1s; }
.tg-wave-bar span:nth-child(3) { height: 18px; animation-delay: 0.2s; }
.tg-wave-bar span:nth-child(4) { height: 30px; animation-delay: 0.3s; }
.tg-wave-bar span:nth-child(5) { height: 14px; animation-delay: 0.4s; }
.tg-wave-bar span:nth-child(6) { height: 22px; animation-delay: 0.15s; }
.tg-wave-bar span:nth-child(7) { height: 10px; animation-delay: 0.35s; }

@keyframes tg-wave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.4); }
}

.opaque-overlay {
    position: relative;
}

.opaque-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 1);
    z-index: 1;
    pointer-events: none;
}

.tg-billing-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}
.tg-toggle-wrap {
    width: 46px;
    height: 25px;
    background: #2D5BFF;
    border-radius: 100px;
    position: relative;
    cursor: pointer;
}
.tg-toggle-knob {
    width: 19px;
    height: 19px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: left .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.tg-toggle-wrap.annual .tg-toggle-knob {
    left: 24px;
}
.tg-toggle-label {
    font-size: 15px;
    font-weight: 500;
    color: #8A97AA;
}
.tg-toggle-label.active {
    color: #0F1724;
    font-weight: 700;
}
.tg-save-pill {
    font-size: 12px;
    background: #E6F9F2;
    color: #087550;
    padding: 3px 10px;
    border-radius: 100px;
    font-weight: 700;
    margin-left: 4px;
}

.tg-mono {
    filter: grayscale(100%);
}

/* ============================================================
   FIXED DESKTOP HEADER — scoped to desktop only (≥922px)
   so it never reshapes the mobile bar.
   ============================================================ */
@media (min-width: 922px) {
    /* 1. Fix the header flat at the top */
    #masthead {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
    }

    /* 2. Freeze header height / inner structures to kill the scroll shift */
    #masthead .site-header-inner,
    #masthead .main-header-bar,
    #masthead .main-header-bar-navigation {
        height: 80px !important;
        line-height: 80px !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 3. Freeze menu item alignment so they don't move on scroll */
    #masthead .main-navigation .ast-nav-menu > .menu-item > a {
        height: 80px !important;
        line-height: 80px !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* 4. Offset content so the fixed header doesn't cover the top */
    #page .site-content {
        padding-top: 80px !important;
    }
}

/* ============================================================
   STICKY MOBILE HEADER — position/width ONLY.
   Never touches height, line-height, display, or the grid row,
   so the mobile bar stays full width and doesn't collapse.
   Remove this whole block if you don't want the header fixed on phones.
   ============================================================ */
@media (max-width: 921px) {
    #masthead {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        z-index: 99999 !important;
    }
    #page .site-content {
        padding-top: 70px !important; /* adjust to your mobile header height */
    }
}

/* Smooth shadow transition on scroll (applies at all widths) */
#masthead {
    transition: box-shadow 0.25s ease-in-out !important;
    animation: add-header-shadow linear both;
    animation-timeline: scroll();
    animation-range: 0px 50px;
}

@keyframes add-header-shadow {
    from {
        box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
    }
    to {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }
}

/* Push the fixed header below the WP Admin Bar when logged in */
.logged-in #masthead {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .logged-in #masthead {
        top: 46px !important;
    }
}