img, video, canvas {
  overflow: clip !important;
  overflow-clip-margin: content-box !important;
}

/*
Theme Name: Seamless Hosting
Description: 
Version: 1.0.0
Author: Brandon Reader
Author URI: www.reader.design
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: Divi
*/


/*========================================
  GLOBAL STYLES
========================================*/


html, body {
    background-color: #020617; /* match your site's dark background */
}

html {
  scroll-behavior: smooth;
}

/* Hide titles on image hover */
img {
    pointer-events: none;
}

/* This targets the raw HTML5 tags to satisfy the Deprecated API audit */
video::-webkit-media-controls {
    display:none !important;
}

img, video, canvas {
  overflow: clip;
}



/* This moves the 'landing spot' up 150px without moving the section itself */
.sh-anchor-point {
    position: absolute;
    top: -150px; /* This is your 'offset' */
    visibility: hidden;
}


/* ----- Heart Icon ----- */
.heart-icon {
    width: 1em;
    height: 1em;
    fill: #94A3B8; /* Solid color */
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
}

/* ----- Global Gradients ----- */

.gradient-1 {
    background: linear-gradient(to right, #C084FC, #F472B6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block; /* Important for proper clipping */
}

/* Main section background */
.sh-content {
    background: radial-gradient(
    100% 140% at 100% 100%,
    rgba(255, 0, 255, 0.22) 0%,   /* Balanced Magenta - Clear but not overwhelming */
    rgba(255, 0, 255, 0.06) 45%,  /* Subtle mid-point */
    rgba(255, 0, 255, 0) 82%      /* Smooth fade to Navy */
),
		
		radial-gradient(
        at 0% 100%, 
        rgba(15, 23, 42, 0.6) 0%,   /* The Slate Navy #0F172A */
        rgba(15, 23, 42, 0) 60%     /* Soft fade out */
    );
}

/* ----- System status led glow ----- */

@keyframes ledHighIntensity {
  0% { 
    filter: brightness(0) invert(1) 
            drop-shadow(0 0 2px #fff) 
            drop-shadow(0 0 5px rgba(255, 255, 255, 0.2)); 
  }
  50% { 
    filter: brightness(0) invert(1) 
            drop-shadow(0 0 4px #fff) 
            drop-shadow(0 0 15px #fff) 
            drop-shadow(0 0 30px rgba(255, 255, 255, 1)); 
  }
  100% { 
    filter: brightness(0) invert(1) 
            drop-shadow(0 0 2px #fff) 
            drop-shadow(0 0 5px rgba(255, 255, 255, 0.2)); 
  }
}

.sh-hero .et_pb_module h1 {
    /* 2.75rem (44px) | 6vw (scaling) | 4.5rem (72px) */
	/* Fluid Typography: base divided by 16 = rem */
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    letter-spacing: -0.02em;
    line-height: 1.1em;
}

.sh-terms .et_pb_text_inner h2, 
.sh-terms .et_pb_text_inner h2 span,
.sh-terms .et_pb_text_inner h2 a {
    font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
}

.sh-terms .et_pb_text_inner h3, 
.sh-terms .et_pb_text_inner h3 span,
.sh-terms .et_pb_text_inner h3 a {
    font-size: clamp(1.1rem, 2vw, 1.25rem) !important;
}

/* This targets the outer edge of the table */
.privacy-policy table {
    border-collapse: collapse; /* This ensures borders between cells don't double up  */
    border: 1px solid #333;
    width: 100%;
    margin-bottom: 15px; 
}

/* This targets the borders for every individual cell inside the table */
.privacy-policy table th, 
.privacy-policy table td {
    border: 1px solid #333;
    padding: 10px;
    text-align: left; 
}

/*================================================
  1. PRIMARY HEADER & STICKY LOGIC
================================================*/
/* The Outer Section Wrapper */
.et_pb_section_0_tb_header {
    position: fixed !important;
    top: 30px !important; 
    left: 0;
    right: 0;
    z-index: 99999 !important;
    background-color: transparent !important;
    pointer-events: none;
    transition: top 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Reduce top gap on mobile devices */
@media all and (max-width: 980px) {
    .et_pb_section_0_tb_header {
        top: 16px !important;
    }
}

/* Scrolled state for the wrapper */
.et_pb_section_0_tb_header.sh-sticky-active {
    top: 0px !important;
}

/* The Inner Pill Container */
.sh-menu-container {
    pointer-events: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 95% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    z-index: 999999 !important;
    background: radial-gradient(circle at bottom left, rgba(147, 51, 234, 0.14), transparent 10%), 
                rgba(3, 6, 24, 0.30) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Scrolled state for the Pill */
.sh-sticky-active .sh-menu-container {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 0 20px 20px !important;
    margin-top: 0px !important;
}

/*================================================
  2. DESKTOP NAVIGATION & BUTTONS
================================================*/
/* Header Links */
.sh-menu-container .df-menu-nav li a {
    color: #94A3B8 !important;
    text-decoration: none !important;
    position: relative !important;
    transition: color 0.3s ease !important;
    display: inline-flex !important;
}

.sh-menu-container .df-menu-nav li a:hover { color: #F1F5F9 !important; }

/* Underline Animation */
.sh-menu-container .df-menu-nav li a::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, #9333EA 0%, #C084FC 100%) !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: transform 0.4s cubic-bezier(0.5, 1, 0.89, 1) !important;
}

.sh-menu-container .df-menu-nav li a:hover::after { transform: scaleX(1) !important; }

/* Sign Up Button */
.sh-menu-container .df-menu-button {
    background: linear-gradient(90deg, #9333EA 0%, #C084FC 100%) !important;
    box-shadow: 0px 10px 20px -5px rgba(168, 85, 247, 0.2), inset 0 0 0 100px #9333EA;
    transition: all 0.3s ease-out !important;
}

.sh-menu-container .df-menu-button:hover {
    box-shadow: 0px 20px 40px -10px rgba(168, 85, 247, 0.5), inset 0 0 0 100px rgba(147, 51, 234, 0); 
    text-shadow: 0px 1px 0px #9333EA; 
}

/*================================================
  3. HAMBURGER ICON (Desktop: Hidden | Mobile: Visible)
================================================*/
.sh-menu-container .difl_advancedmenuitem_3_tb_header.df-am-item {
    display: none !important; /* Hidden on Desktop */
    cursor: pointer !important;
    position: relative !important;
    height: 30px !important;
    width: 28px !important;
    vertical-align: middle;
    margin-left: 15px !important;
}

.sh-menu-container .difl_advancedmenuitem_3_tb_header.df-am-item .line {
    display: block !important;
    position: absolute !important;
    height: 3px !important;
    width: 100% !important;
    background-color: #9333EA !important;
    border-radius: 9px !important;
    left: 0 !important;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* Initial Line Spacing */
.sh-menu-container .difl_advancedmenuitem_3_tb_header.df-am-item .line-1 { top: 5px !important; }
.sh-menu-container .difl_advancedmenuitem_3_tb_header.df-am-item .line-2 { top: 14px !important; }
.sh-menu-container .difl_advancedmenuitem_3_tb_header.df-am-item .line-3 { top: 23px !important; }

/* Option 2: The Double Spin Animation (Open State) */
.sh-menu-container .difl_advancedmenuitem_3_tb_header.df-am-item.open .line-1 {
    top: 14px !important;
    transform: rotate(225deg) !important;
}
.sh-menu-container .difl_advancedmenuitem_3_tb_header.df-am-item.open .line-2 { 
    opacity: 0 !important;
    transform: translateX(-20px) !important;
}
.sh-menu-container .difl_advancedmenuitem_3_tb_header.df-am-item.open .line-3 {
    top: 14px !important;
    transform: rotate(-225deg) !important;
}

/*================================================
  4. SLIDE-IN MENU & BLUR EFFECT
================================================*/
body .et_pb_section.sh-menu-container .slide-in-menu-container {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; 
    position: fixed !important;
    right: -100%; 
    width: 100%;
    height: 100vh !important; 
    z-index: 999990 !important; 
    transition: all 0.5s ease-in-out !important;

    /* BLUR & GLASS EFFECT */
	background-color: rgba(3, 6, 24, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

body .et_pb_section.sh-menu-container .slide-in-menu-container.slide-in-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    right: 0 !important; 
}

/* Scroll Lock */
html.noscroll, 
body.noscroll {
    overflow: hidden !important;
    /* Remove height: 100% and position: relative if they were there */
    /* This prevents the "reset" to the top of the page */
}

/* Hide the redundant mobile toggle inside the slide-in menu */
.slide-in-menu-container .et_mobile_nav_menu {
    display: none !important;
}

/* Force the desktop menu items to stay visible */
.slide-in-menu-container .et_pb_menu__menu {
    display: block !important;
    visibility: visible !important;
}

/* Make the list items stack vertically (since it's a mobile slide-in) */
.slide-in-menu-container .et_pb_menu__menu nav > ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Change to center if preferred */
    gap: 40px; /* Adds space between your links */
}

/* Remove Divi's default horizontal float/flex behavior */
.slide-in-menu-container .et_pb_menu__menu nav > ul > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

/* ----- Loading Animations -----*/

/* Set the initial state of the links (Hidden and shifted left) */
.slide-in-menu-container .et_pb_menu__menu nav > ul > li {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* When the menu container is open, animate the links in */
.slide-in-menu-container.slide-in-menu .et_pb_menu__menu nav > ul > li {
    opacity: 1;
    transform: translateX(0);
}

/* The Stagger (Delay for each specific link) */
.slide-in-menu-container.slide-in-menu .et_pb_menu__menu nav > ul > li:nth-child(1) { transition-delay: 0.1s; }
.slide-in-menu-container.slide-in-menu .et_pb_menu__menu nav > ul > li:nth-child(2) { transition-delay: 0.2s; }
.slide-in-menu-container.slide-in-menu .et_pb_menu__menu nav > ul > li:nth-child(3) { transition-delay: 0.3s; }
.slide-in-menu-container.slide-in-menu .et_pb_menu__menu nav > ul > li:nth-child(4) { transition-delay: 0.4s; }
.slide-in-menu-container.slide-in-menu .et_pb_menu__menu nav > ul > li:nth-child(5) { transition-delay: 0.5s; }

/* Target the Button and the Footer Links Row */
.slide-in-menu-container .et_pb_button,
.slide-in-menu-container .et_pb_column_2_tb_header {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* Animate them in when the menu opens */
.slide-in-menu-container.slide-in-menu .et_pb_button,
.slide-in-menu-container.slide-in-menu .et_pb_column_2_tb_header {
    opacity: 1;
    transform: translateX(0);
}

/* Set the timing for the "Grand Finale" */
/* If you have 4 menu links, the button should wait until roughly 0.5s */
.slide-in-menu-container.slide-in-menu .et_pb_button {
    transition-delay: 0.5s !important;
}

/*----- End Loading Animations -----*/

/* The small links at the very bottom (FAQs, Privacy, etc.) */
.slide-in-menu-container.slide-in-menu .et_pb_column_2_tb_header {
    transition-delay: 0.65s !important;
}

/* Force the main flex container to the left */
.slide-in-menu-container .et_pb_menu_inner_container {
    justify-content: flex-start !important;
}

/* Target the navigation wrapper specifically */
.slide-in-menu-container .et_pb_menu__menu {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* Ensure the UL (the list itself) isn't centered or right-aligned */
.slide-in-menu-container .et_pb_menu__menu nav > ul {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding-left: 0 !important;
}

/* Ensure individual list items align left */
.slide-in-menu-container .et_pb_menu__menu nav > ul > li {
    text-align: left !important;
    width: 100% !important;
}

/* Style the Button inside the slide-in menu */
.slide-in-menu-container .et_pb_button {
    display: inline-block !important;
    margin-top: 44px !important;
    padding: 6px 32px !important;
    border-radius: 8px !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 1px;
    
    /* Mirroring your Desktop Style */
    background: linear-gradient(90deg, #9333EA 0%, #C084FC 100%) !important;
    box-shadow: 0px 10px 20px -5px rgba(168, 85, 247, 0.2), 
                inset 0 0 0 100px #9333EA !important;
    
    /* Animation for the Button itself */
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1), 
                box-shadow 0.3s ease !important;
}

/* Staggered animation: Appears after the last menu link */
.slide-in-menu-container.slide-in-menu .et_pb_button {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.6s; /* Fires after the 5 links finish */
}

/* Hover State for Mobile (Touch) */
.slide-in-menu-container .et_pb_button:active,
.slide-in-menu-container .et_pb_button:hover {
    box-shadow: 0px 15px 30px -10px rgba(168, 85, 247, 0.5), 
                inset 0 0 0 100px rgba(147, 51, 234, 0) !important;
}

/*================================================
  5. RESPONSIVE BREAKPOINTS (Mobile/Tablet)
================================================*/
@media all and (max-width: 980px) {
    /* Show Hamburger */
    .sh-menu-container .difl_advancedmenuitem_3_tb_header.df-am-item {
        display: inline-block !important;
    }

    /* Page Padding to prevent menu overlap */
    #main-content .et_pb_section:first-child, #sh-hero {
        padding-top: 140px !important;
    }
}

@media (max-width: 767px) {
    #main-content .et_pb_section:first-child, #sh-hero { padding-top: 120px !important; }
}

@media (max-width: 480px) {
    #main-content .et_pb_section:first-child, #sh-hero { padding-top: 100px !important; }
}

/*========================================
  VIDEO - HERO STYLES
========================================*/


/* ----- VIDEO MAX HEIGHT & CONTAINMENT ----- */

/* 1. Fix the 'Overflow' Warning (Deprecated API) */
.et_pb_section_video_bg, 
.et_pb_section_video_bg video {
    overflow: clip !important;
    overflow-clip-margin: content-box !important;
}

/*.sh-hero {
  background-image: url('/wp-content/uploads/2026/02/Seamless-Video-Poster.avif');
  background-size: cover;
  background-position: center;
  min-height: 800px; /* match your actual hero height */
}*/

/* Hide background image once video is playing */
.sh-hero .et-pb-background-video--play-outside-viewport ~ .et_pb_section_video_bg {
  background-image: none;
}

/* Prevent the video container from causing layout shift */
.sh-hero .et-pb-background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 2. Fix the Poster/Background Conflict */
/* We target the container specifically so the browser doesn't double-load */
.et_pb_section.et-pb-has-background-video {
    /*background-image: url('/wp-content/uploads/2026/02/Seamless-Video-Poster.avif') !important;*/
    background-size: cover;
    background-position: center;
	min-height: 800px;
}

/* 3. Force the video to obey the container (Prevents NotSupportedError in some browsers) */
.et_pb_section_video_bg video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 1. THE MAIN SECTION FRAME */
.video-max-height {
    height: 800px !important;
    max-height: 800px !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    position: relative !important;
    /* This ensures your dark blue is the base layer */
    background-color: #020617 !important; 
}

/* 2. THE OVERLAYS (Tints on top of video) */
.video-max-height::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, 0.7) !important;
    pointer-events: none !important;
    z-index: 1 !important; /* Higher than video */
}

/* 3. THE VIDEO WRAPPERS (Nesting Dolls) */
.video-max-height .et-pb-background-video,
.video-max-height .et_pb_section_video_bg,
.video-max-height .mejs-container,
.video-max-height .mejs-inner,
.video-max-height .mejs-mediaelement,
.video-max-height #mep_0 {
    height: 800px !important; 
    max-height: 800px !important;
    width: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    z-index: 0 !important; /* Above Blue, Below Overlay */
    background: transparent !important; /* Ensures player isn't black */
}

/* 4. THE ACTUAL VIDEO TAG */
.video-max-height video {
    position: absolute !important; 
    /* Anchor to the bottom instead of center */
    top: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* Only center horizontally */
    
    width: 100% !important;
    height: auto !important; /* Allow height to scale naturally */
    min-height: 800px !important; /* But never shorter than our frame */
    min-width: 100% !important;
    
    object-fit: cover !important;
    /* This ensures the bottom of the video file stays visible */
    object-position: bottom center !important; 
    margin: 0 !important;
}

/* 5. FIXES & CLEANUP */
.mejs-controls { display: none !important; }

/* Ensure content Row is on top of everything */
.video-max-height .et_pb_row {
    position: relative !important;
    z-index: 10 !important;
}

/* Fix for Video Download Link Touch Targets */
.mejs-offscreen, 
.mejs-container a, 
a[data-type="video/mp4"], 
a[data-type="video/webm"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/*========================================
  DF CONTENT TOGGLE 
========================================*/

.df-cs-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    position: relative !important;
}

.df-cs-primary-badge {
    position: relative !important;
    display: inline-block !important;
    margin-left: 8px !important;
}

/* Prevent badge from being absolutely positioned */
.df-cs-button .df-cs-primary-badge.arrow-bottom {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
}

.df-cs-button.primary {
    display: flex !important;
    flex-direction: row-reverse !important;
}

.df-cs-switch-wrapper .df-cs-button.active  {
	background-color: rgba(0,0,0,0) !important;
}

.df-cs-switch-wrapper .button-slider {
	background-color: #9333ea !important;
}

.df-cs-content-wrapper,
.df-cs-content-container {
	overflow: visible !important;
}

/* Target both buttons when they are NOT active */
.df-cs-button.primary:not(.active) .title,
.df-cs-button.secondary:not(.active) .title,
.df-cs-button:not(.active) span {
    color: #94A3B8 !important;
    opacity: 1 !important;
    transition: color 0.3s ease;
}

/* Ensure the ACTIVE button stays bright white (or your chosen color) */
.df-cs-button.active .title,
.df-cs-button.active span {
    color: #ffffff !important;
}

/* 1. The Dark "Track" Outer Container */
background: rgba(15, 23, 42, 0.4) !important; 
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 100px !important;
padding: 5px !important; /* This creates the gap between slider and outer edge */
display: inline-flex !important; /* Keeps the toggle from stretching full-width if not needed */
position: relative !important;
overflow: visible !important;

/* 2. Adjust the Purple Slider (The Thumb) */
.button-slider {
    background-color: #9333ea !important;
    border-radius: 100px !important;
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.4) !important;
    /* Ensure it doesn't overlap the container border */
    top: 5px !important;
    bottom: 5px !important;
}

/* 3. Refine the Badge (The Save 20% part) */
.df-cs-primary-badge {
    background: rgba(30, 41, 59, 0.8) !important; /* Darker badge bg */
    padding: 2px 10px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 1. Shrink the container to fit the buttons and style the track */
.df-cs-switch-wrapper {
    display: inline-flex !important; /* This stops the full-width purple bar */
    background: rgba(15, 23, 42, 0.4) !important; /* Dark Slate Grey */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Light Grey Border */
    border-radius: 100px !important;
    padding: 6px !important; /* This creates the 'recessed' look for the slider */
    position: relative !important;
    margin: 0 auto !important; /* Centers it if the parent is a flex container */
}

/* 2. Fix the Purple Slider position inside the new track */
.df-cs-switch-wrapper .button-slider {
    background-color: #9333ea !important;
    border-radius: 100px !important;
    top: 6px !important;    /* Matches the padding above */
    bottom: 6px !important; /* Matches the padding above */
    box-shadow: 0 4px 15px rgba(147, 51, 234, 0.3) !important;
}

/* 3. Ensure the buttons don't have their own backgrounds */
.df-cs-button {
    background: transparent !important;
    border: none !important;
}

/* 1. Force the wrapper to hug its content */
.df-cs-switch-wrapper {
    display: inline-flex !important;
    width: auto !important; /* This stops the full-width stretch */
    min-width: unset !important;
    max-width: fit-content !important;
    
    /* 2. Style the Dark Track */
    background: rgba(15, 23, 42, 0.4) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 100px !important;
    padding: 6px !important;
    
    /* 3. Center the capsule in the row */
    margin: 0 auto !important;
    position: relative !important;
}

/* 4. Fix the Purple Slider internal gap */
.df-cs-switch-wrapper .button-slider {
    top: 6px !important;    /* Matches padding */
    bottom: 6px !important; /* Matches padding */
    background-color: #9333ea !important;
    border-radius: 100px !important;
}

.df-cs-switch-container {
	margin-bottom: 60px;
}


/*========================================
  BUTTON STYLES
========================================*/

/* SHARED BASE STYLES */
.btn {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
	text-align: center;
  color: #FFFFFF !important;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  border: none !important;
  /* Sync all transitions: shadows, text-glow, and borders */
  transition: box-shadow 0.3s ease-out, text-shadow 0.3s ease-out, border-color 0.3s ease-out !important;
	z-index: 10 !important;
    isolation: isolate !important; /* This prevents background "bleeding" */
    -webkit-backface-visibility: hidden; /* Fixes "half-pixel" rendering glitches */
    transform: translateZ(0); /* Forces the browser to render the button on its own layer */
}

/* Remove Divi default icon spacing */
.btn::after {
  display: none !important;
  content: "" !important;
}

.et_pb_button.btn {
  padding-right: 32px !important;
  /*background-color: transparent !important;*/
}

/* PRIMARY VARIATION (Purple Glow) */
.btn--brand {  
  background: linear-gradient(90deg, #9333EA 0%, #C084FC 100%) !important;
  /* Inset shadow acts as the "solid color" covering the gradient */
  box-shadow: 0px 10px 20px -5px rgba(168, 85, 247, 0.2), 
              inset 0 0 0 100px #9333EA;
}

/* PRIMARY VARIATION HOVER */
.btn--brand:hover {
  border-radius: 12px !important; /* Add this */
  box-shadow: 0px 20px 40px -10px rgba(168, 85, 247, 0.5), 
              inset 0 0 0 100px rgba(147, 51, 234, 0); 
  text-shadow: 0px 1px 0px #9333EA; 
}

/* SECONDARY VARIATION (Slate to Purple Glow) */
.btn--alt {    
  /* The hidden gradient ends in a soft purple tint */
  background: linear-gradient(90deg, #1E293B 0%, #4C1D95 100%) !important;
  /* The "Solid" state is Slate Blue */
  box-shadow: 0px 10px 20px -5px rgba(2, 6, 23, 0.4), 
              inset 0 0 0 100px #1E293B;
  border: 1px solid #334155 !important;
}

/* SECONDARY VARIATION HOVER */
.btn--alt:hover {
  border-radius: 12px !important; /* Add this */
  box-shadow: 0px 20px 40px -12px rgba(168, 85, 247, 0.25), 
              inset 0 0 0 100px rgba(30, 41, 59, 0);
  border: 1px solid #9333EA !important;
  text-shadow: 0px 1px 0px #9333EA;
}


/* Ensure the standard card button starts as the Alt (Slate) style */
/* PRICING CARD BUTTON HOVER */
.card--pricing-standard .et_pb_button:hover {
    border-radius: 12px !important; /* Add this */
    background: linear-gradient(90deg, #9333EA 0%, #C084FC 100%) !important;
    box-shadow: 0px 20px 40px -10px rgba(168, 85, 247, 0.5), 
                inset 0 0 0 100px rgba(147, 51, 234, 0) !important;
    border: 1px solid #9333EA !important; 
    text-shadow: 0px 1px 0px #9333EA !important;
}

/* On hover, transition it to the Brand (Purple Glow) style */
.card--pricing-standard .et_pb_button:hover {
    /* Swap background to the Purple gradient */
    background: linear-gradient(90deg, #9333EA 0%, #C084FC 100%) !important;
    
    /* Reveal gradient + Purple bloom */
    box-shadow: 0px 20px 40px -10px rgba(168, 85, 247, 0.5), 
                inset 0 0 0 100px rgba(147, 51, 234, 0) !important;
    
    border: 1px solid #9333EA !important; 
    text-shadow: 0px 1px 0px #9333EA !important;
}

/*----- Text Only Link -----*/

/* THE BASE LINK */
.text-link {
    text-decoration: none !important;
	color: inherit !important;
	font-size: inherit !important;
    position: relative !important;
    display: inline-block !important;
    transition: color 0.3s ease !important;
}

/* THE UNDERLINE (Consistent Gradient) */
.text-link::after {
    content: "" !important;
    position: absolute !important;
    bottom: 2px; 
    left: 0 !important;
    width: 100% !important;
    height: 1px !important;
    
    /* Apply the gradient to both states */
    background: linear-gradient(90deg, #9333EA 0%, #C084FC 100%) !important;
    
    /* ANIMATION SETUP */
    transform: scaleX(0.95) !important; /* Static at 85% */
    transform-origin: left !important;  /* Grows from left to right */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.4s ease !important;
}

/* THE HOVER STATE */
.text-link:hover {
    color: #FFFFFF !important; /* Text wakes up to white */
}

.text-link:hover::after {
    transform: scaleX(1) !important; /* Grows to 100% */
    box-shadow: 0px 0px 8px rgba(168, 85, 247, 0.5); /* Glow activates on hover */
}

/* 1. THE UNDERLINE: Perfect positioning */
.df_faq_wrapper .text-link::after,
.dif_faq .text-link::after,
.dif_l_faq_0 .text-link::after {
    bottom: -2px !important;
}

/* 2. THE VISIBILITY: Only allow overflow when the item is active */
.df_faq_item_active .faq_answer_wrapper,
.dif_faq_item_active .faq_answer_wrapper {
    overflow: visible !important;
}

/* 3. THE SMOOTHNESS: Prevents the 'jump' when switching items */
.faq_answer_wrapper {
    transition: height 0.4s ease, opacity 0.3s ease !important;
}


/*----- Text Based Button -----*/

/* 1. THE BASE LINK */
.btn-text-link {
    font-family: 'Inter', sans-serif !important;
    color: #FFFFFF !important;
    text-decoration: none !important;  
    display: inline-flex !important;
    width: fit-content !important;   
    align-items: center !important;   
    position: relative !important;
    /* REDUCED padding-bottom to bring line closer to text */
    /*padding-bottom: 2px !important;*/ 
    /*margin-top: 8px;*/
    transition: color 0.3s ease !important;
}

/* 2. THE UNDERLINE */
.btn-text-link::before {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    
    /* FIX: Width is 100% of the link MINUS the arrow (24px) and margin (8px) */
    width: calc(100% - 32px) !important; 
    
    height: 1px !important;
    background: linear-gradient(90deg, #9333EA 0%, #C084FC 100%) !important;   
    
    transform: scaleX(0) !important;
    transform-origin: right !important;
    transition: transform 0.4s cubic-bezier(0.5, 1, 0.89, 1) !important;
}

.btn-text-link:hover {
    cursor: pointer;
    color: #F1F5F9 !important; /* Optional: matches the line color */
}

.btn-text-link:hover::after {
    transform: translateX(4px) !important;
}

.btn-text-link:hover::before {
    transform: scaleX(1) !important;
    transform-origin: left !important;
}

/* 3. THE ARROW */
.btn-text-link::after {
    content: "" !important; 
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    margin-left: 6px !important;  
    background-image: url('/wp-content/uploads/2026/02/icon-arrow-1.svg') !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
	margin-top: 3px !important;
    transition: transform 0.3s ease !important;
}

.text-link-sm::after {
    width: 18px !important;
    height: 18px !important;
    margin-left: 4px !important;  
	margin-top: 3px !important;
}


/*========================================
  CARD STYLES
========================================*/

/*----- Standard Feature Cards -----*/

.card--featured {
/*border: 1px solid rgba(168, 85, 247, 0.3);
backdrop-filter: blur(6px);
/* Note: backdrop-filter has minimal browser support */
border-radius: 24px;
}


.card--featured, 
.email-notice-pill,
.contact-card {
    background: rgba(30, 41, 59, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    position: relative;
    overflow: hidden;
}

/* The subtle corner highlight */
.card--featured::before,
.email-notice-pill::before,
.contact-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, rgba(192, 132, 252, 0.15), transparent 40%);
    pointer-events: none;
}

/*----- Pricing Cards -----*/

.card--pricing {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid #1E293B;
    box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-radius: 24px;
    position: relative; /* Ensures badge positioning works */
	transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
}

.card--pricing .et_pb_main_blurb_image {
	min-width: 21px;
}

.card--pricing:hover {
	background: rgba(18, 28, 53, 1) !important;
    border-color: #C084FC !important; /* Optional: brightens the border on hover */
    box-shadow: 0px 30px 60px -12px rgba(147, 51, 234, 0.2) !important; /* Glow effect */
}

.card--pricing-text {
    font-style: normal;
    font-weight: 700;
    font-size: 50px;
    line-height: 1.1; /* Added for gradient safety */
    background: linear-gradient(90deg, #C084FC 0%, #F472B6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.card-pricing-feature {
	font-weight: 700;
	color: #F1F5F9;
}

/* 1. Force the Wrapper to be 286px and Centered */
.card--pricing .et_pb_button_module_wrapper {
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

/* 2. Force the Button to fill that space */
.card--pricing a.et_pb_button {
    display: flex !important;
    flex-grow: 1 !important;    /* This forces it to stretch to the 286px limit */
    width: 100% !important;     
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}


/*----- Featured Pricing Card -----*/

.card--pricing-featured {
    border: 2px solid #9333EA;
}

/*----- Standard Pricing Card -----*/

.card--pricing-standard {
    /* Replace with your preferred dark slate/purple border */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; 
    background: rgba(15, 23, 42, 0.6) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    transition: border-color 0.3s ease;
}

/* Optional: Make it glow slightly on hover to match your LED */
.card--pricing-standard:hover {
    border-color: rgba(147, 51, 234, 0.5) !important;
}

.card--pricing-standard:hover {
   border-color: #334155 !important; /* Optional: brightens the border on hover */
}

.df-cs-content-container .df-cs-content-section {
	padding: 0 !important;
}

/*========================================
  PRICING GRID STYLES
========================================*/

/* 1. The Spaced-Out Row */
.sh-pricing-specs .spec-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* 2. The Text Trigger (Subtle Underline) */
.sh-pricing-specs .tooltip-trigger {
    position: relative;
    cursor: help;
    color: #94A3B8;
    /* Using rgba for a "ghost" underline that blends with the background */
    border-bottom: 1px dashed rgba(203, 213, 225, 0.4) !important; 
    padding-bottom: 1px;
    transition: border-color 0.3s ease;
}

/* 3. The Contained Tooltip Box */
.sh-pricing-specs .tooltip-box {
    visibility: hidden;
    width: 220px;
    background-color: #1a1a1a;
    color: #fff;
    text-align: left; /* Better for readability */
    border-radius: 8px;
    padding: 12px;
    position: absolute;
    z-index: 1000;
    bottom: 125%; 
    
    /* Shifted to the right to prevent left-side cutoff */
    left: 0; 
    transform: translateX(0); 
    
    opacity: 0;
    transition: all 0.3s ease;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid #a855f7;
    pointer-events: none;
    box-shadow: 0px 10px 25px rgba(0,0,0,0.6);
}

/* 4. Show Tooltip on Hover */
.sh-pricing-specs .tooltip-trigger:hover .tooltip-box {
    visibility: visible;
    opacity: 1;
    bottom: 140%;
}

/* 5. The Value (Right Side) */
.sh-pricing-specs .spec-value {
    color: #94A3B8;
    font-weight: 500;
}

/* 1. Force a tight line-height on the row */
.sh-pricing-specs .spec-row {
    line-height: 1 !important;
    min-height: 0 !important;
}

/* 2. Kill any phantom <br> tags injected by the Divi editor */
.sh-pricing-specs .spec-row br {
    display: none !important;
}

/* 3. Ensure the text itself doesn't have default bottom padding */
.sh-pricing-specs .spec-row span {
    display: inline-block;
    vertical-align: middle;
}

/* Force the Button to fill that space */
.sh-pricing-specs a.et_pb_button {
    display: flex !important;
    flex-grow: 1 !important;    /* This forces it to stretch to the 286px limit */
    width: 100% !important;     
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/*======= Email Callout =====*/

/* 1. Main Container: Keep the pill shape and center on page */
.email-notice-pill {
    width: 100% !important;
    max-width: 850px !important;
    margin: 40px auto !important;
    align-self: center !important;
}

/* 2. Content Wrapper: Force absolute vertical centering */
.email-notice-pill .et_pb_blurb_content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Forces icon to the vertical middle of the text */
    justify-content: flex-start !important;
    width: 100% !important;
}

/* 3. Icon Container: Kill the 'bottom-heavy' margin */
.email-notice-pill .et_pb_main_blurb_image {
    margin-bottom: 0 !important; /* Critical: Removes the gap pushing the icon down */
    margin-top: 0 !important;
    margin-right: 20px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    width: 24px !important;
}

/* 4. Text Container: Ensure no extra padding is shifting the alignment */
.email-notice-pill .et_pb_blurb_container {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 5. The Actual Image: Keep it sharp at 24px */
.email-notice-pill .et_pb_main_blurb_image img {
    width: 24px !important;
    height: auto !important;
    display: block !important;
}

/* 1. Kill the default top/side borders causing the 'box' look on load */
.difl_faq_0 .difl_faqitem,
.df_faq_item {
    border-top: 0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
}

/* 2. Remove the border from the very first item's container if it persists */
.df_faq_wrapper {
    border: none !important;
}

/*========================================
  CONTACT FORM 7
========================================*/

/* Container Spacing */
.sh-cf .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 25px;
}

/* Input & Textarea Base Styling */
.sh-cf input[type="text"],
.sh-cf input[type="email"],
.sh-cf input[type="url"],
.sh-cf textarea {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(148, 163, 184, 1) !important;
    font-size: 16px !important;
    padding: 12px 0px !important;
    width: 100% !important;
    border-radius: 0 !important;
    transition: border-color 0.3s ease;
}

/* Placeholder Color */
.sh-cf ::placeholder {
    color: rgba(148, 163, 184, 0.6) !important;
}

/* Focus State (Purple Bottom Border) */
.sh-cf input:focus,
.sh-cf textarea:focus {
    outline: none !important;
    border-bottom: 1px solid #7b51db !important; /* Matches your button */
}

/* Adjust Message Box Height */
.sh-cf textarea {
    height: 150px !important;
    resize: vertical;
}

/* Hide CF7's default Validation Spans if they create weird gaps */
.sh-cf .wpcf7-not-valid-tip {
    color: #ff4d4d;
    font-size: 12px;
    padding-top: 5px;
}

/* Force the CF7 container to expand */
.sh-cf .wpcf7 {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure the form itself fills the space */
.sh-cf form.wpcf7-form {
    width: 100% !important;
    display: flex;
    flex-direction: column;
}

/* Ensure individual inputs span the full width */
.sh-cf .wpcf7-form-control-wrap {
    width: 100% !important;
    display: block;
}

/* Target the CF7 Submit Button inside your .sh-cf container */
.sh-cf input.wpcf7-submit {
    /* Apply SHARED BASE STYLES */
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important;
    text-align: center;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 16px 32px !important;
    border-radius: 12px !important;
    cursor: pointer;
    position: relative;
    border: none !important;
    width: auto; /* Keeps it from stretching full-width unless you want it to */
    
    /* Performance & Rendering Fixes */
    z-index: 10 !important;
    isolation: isolate !important;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    
    /* PRIMARY VARIATION (Purple Glow) */
    background: linear-gradient(90deg, #9333EA 0%, #C084FC 100%) !important;
    box-shadow: 0px 10px 20px -5px rgba(168, 85, 247, 0.2), 
                inset 0 0 0 100px #9333EA !important;
    
    /* Transitions */
    transition: box-shadow 0.3s ease-out, text-shadow 0.3s ease-out, transform 0.2s ease !important;
}

/* HOVER STATE */
.sh-cf input.wpcf7-submit:hover {
    /* Remove inset to reveal gradient + add outer bloom */
    box-shadow: 0px 20px 40px -10px rgba(168, 85, 247, 0.5), 
                inset 0 0 0 100px rgba(147, 51, 234, 0) !important;
    text-shadow: 0px 1px 0px #9333EA;
    transform: translateY(-1px); /* Subtle lift effect */
}

/* ACTIVE/CLICK STATE */
.sh-cf input.wpcf7-submit:active {
    transform: translateY(1px);
    box-shadow: 0px 5px 10px -5px rgba(168, 85, 247, 0.4) !important;
}

.wpcf7 form.invalid .wpcf7-response-output {
	border-radius: 8px;
}

/*========================================
  FOOTER
========================================*/

/* 1. RESTORE ORIGINAL FOOTER LINKS */
.sh-footer a:not(.sh-social-icons a) {
    color: #94A3B8;
    text-decoration: none !important;  
    display: inline-flex !important;
    width: fit-content !important;   
    align-items: center !important;   
    position: relative !important;
    padding-bottom: 0px !important; 
    transition: color 0.3s ease !important;
}

/* 2. RESTORE ORIGINAL UNDERLINE HOVER */
.sh-footer a:not(.sh-social-icons a)::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important; 
    height: 1px !important;
    background: linear-gradient(90deg, #9333EA 0%, #C084FC 100%) !important;   
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: transform 0.4s cubic-bezier(0.5, 1, 0.89, 1) !important;
}

.sh-footer a:not(.sh-social-icons a):hover::after {
    transform: scaleX(1) !important;
}

/* 3. THE "KILL SWITCH" FOR SPECIAL LINKS */
/* This specifically removes the global footer underline from your arrow links */
.sh-footer .btn-text-link a::after {
    display: none !important;
    content: none !important;
}

.sh-footer .btn-text-link a {
    position: static !important; /* Removes the anchor for the global underline */
    padding-bottom: 0 !important;
}

/*----- social icons -----*/

/* 1. Default State (#94A3B8 at 60%) */
.sh-social-icons .et_pb_module img {
    opacity: 1;
    transition: all 0.3s ease !important;
    filter: drop-shadow(0 0 0px rgba(192, 132, 252, 0)); /* Hidden initially */
}

/* 2. HOVER STATE: White Icon + Purple Glow */
.sh-social-icons .et_pb_module:hover img {
    /* Turn icon white */
    filter: brightness(0) invert(1) 
            drop-shadow(0 0 8px rgba(192, 132, 252, 0.8)) !important;
    
    opacity: 1 !important;
    transform: translateY(-3px) !important;
}

/* 1. FORCE THE MODULE WIDTH */
.sh-social-icons .et_pb_module {
    width: 20px !important;
    max-width: 20px !important;
}

/* 2. FORCE THE IMAGE SIZE */
.sh-social-icons .et_pb_module img {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    display: block !important;
}

/* 3. ENSURE THE WRAPPER DOESN'T CLIP */
.sh-social-icons .et_pb_image_wrap {
    width: 20px !important;
    display: block !important;
}


/*--- Glowing border effect */
.card-top-gradient {
  position: relative;
  background: #020617; 
  padding: 24px;
  border-top: none; 
  /* Force container to allow the glow to spill out */
  overflow: visible !important; 
}

/* THE THIN FILAMENT */
.card-top-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg, 
    #9333EA, 
    #C084FC, 
    rgba(244, 114, 182, 0.8),
    #C084FC, 
    #9333EA
  );
  background-size: 200% 100%;
  
  /* Webkit Prefixes */
  -webkit-animation: slide-gradient 3s linear infinite;
  animation: slide-gradient 3s linear infinite;
  
  /* GPU Triggers */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  
  z-index: 10;
  opacity: 0.8;
}

/* THE SUBTLE PULSING GLOW */
.card-top-gradient::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(
    90deg, 
    #9333EA, 
    #C084FC, 
    rgba(244, 114, 182, 0.8), 
    #C084FC, 
    #9333EA
  );
  background-size: 200% 100%;
  
  /* Combined animations with Webkit prefix */
  -webkit-animation: slide-gradient 3s linear infinite, pulse-glow-visible 4s ease-in-out infinite;
  animation: slide-gradient 3s linear infinite, pulse-glow-visible 4s ease-in-out infinite;
  
  /* CRITICAL FOR IPHONE: hardware acceleration for blurs */
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  will-change: opacity, filter;
    
  z-index: 9;
}

/* Prefixed Keyframes */
@-webkit-keyframes slide-gradient {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}
@keyframes slide-gradient {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

@-webkit-keyframes pulse-glow-visible {
  0%, 100% { 
    opacity: 0.45; 
    -webkit-filter: blur(8px);
    filter: blur(8px);
  }
  50% { 
    opacity: 0.75; 
    -webkit-filter: blur(12px);
    filter: blur(12px);
  }
}
@keyframes pulse-glow-visible {
  0%, 100% { 
    opacity: 0.45; 
    filter: blur(8px);
  }
  50% { 
    opacity: 0.75; 
    filter: blur(12px);
  }
}


/*========================================
  DF FAQ
========================================*/

/* 1. Target the exact double-class chain to override the module defaults */
body .difl_faq_0 .difl_faqitem,
body .difl_faqitem.df_faq_item, 
body .difl_faqitem .df_faq_item {
    border-top: 0px none !important;
    border-left: 0px none !important;
    border-right: 0px none !important;
    border-style: none !important;
    background-color: transparent !important; /* Removes that white background flicker */
    
    /* 2. Re-apply ONLY your clean bottom border */
    border-bottom: 1px solid rgba(192, 132, 252, 0.3) !important;
}

/* 3. Ensure the wrapper doesn't have any hidden borders */
body .difl_faq_0, 
body .df_faq_wrapper {
    border: none !important;
}