/* --- Global & Typography --- */
:root {
    /* Define NEW Dark Theme color palette */
    --primary-neon-blue: #00ffff;
    /* Cyan/Electric Blue */
    --secondary-neon-magenta: #0059ff;
    /* Adjusted Magenta/Blue */
    --background-dark: #0f172a;
    /* Deep Dark Blue */
    --background-medium: #0b1c39;
    /* Slightly Lighter Dark Blue/Grey */
    --text-color-light: #e7f1fd;
    /* Light Grey/Off-White */
    --text-color-medium: #b5c8e4;
    /* Medium Grey */
    --border-color-dark: #172334;
    /* Dark Border */

    /* Keep original names but change values for dark theme */
    --primary-color: var(--primary-neon-blue);
    /* Use neon blue as primary */
    --secondary-color: var(--secondary-neon-magenta);
    /* Use neon magenta as secondary */
    --text-color: var(--text-color-light);
    /* Default text is light */
    --text-color-light: var(--text-color-medium);
    /* Lighter text is medium grey */
    --background-color: var(--background-dark);
    /* Main background is dark */
    --background-light-grey: var(--background-medium);
    /* Use medium dark for sections */
    --border-color: var(--border-color-dark);
    /* Use dark border */

    /* Neon Glow Variables */
    /* OLD Glows - will be replaced or updated */
    /* --neon-blue-glow: 0 0 5px var(--primary-neon-blue), 0 0 10px var(--primary-neon-blue), 0 0 15px var(--primary-neon-blue); */
    /* --neon-magenta-glow: 0 0 5px var(--secondary-neon-magenta), 0 0 10px var(--secondary-neon-magenta), 0 0 15px var(--secondary-neon-magenta); */

    /* NEW Consistent Glows */
    --neon-outline-glow: 0 0 7px rgba(0, 255, 255, 0.5), 0 0 15px rgba(0, 255, 255, 0.4), 0 0 25px rgba(0, 255, 255, 0.3);
    /* For box outlines - "Darker Blue Glow" */
    --neon-outline-glow-hover: 0 0 10px var(--primary-neon-blue), 0 0 20px var(--primary-neon-blue), 0 0 30px var(--primary-neon-blue);
    --neon-text-glow: 0 0 3px var(--primary-neon-blue), 0 0 6px var(--primary-neon-blue);
    /* For text - Reduced to two layers for less glow */
    --neon-text-glow-hover: 0 0 8px var(--primary-neon-blue), 0 0 15px var(--primary-neon-blue), 0 0 25px var(--primary-neon-blue);

    /* Gradient Height Variable */
    --gradient-height: 150px;
    /* Increased height for smoother transitions */

    /* Font Variables */
    --font-primary: 'Google Sans', 'Roboto', sans-serif;
    --font-secondary: 'Google Sans', 'Roboto', sans-serif;

    /* Other Variables */
    --border-radius: 6px;
    /* Consistent border radius */
}

body {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
    /* Default light text */
    background-color: var(--background-color);
    /* Dark background */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: default;
    /* Ensure default cursor is back */
}

body,
h1,
h2,
h3,
button,
a {
    font-family: var(--font-primary);
}

h1,
h2,
h3 {
    font-weight: 500;
    margin-top: 0;
    color: var(--text-color-light);
    /* Ensure headings are light */
}

h1 {
    font-size: 2.8rem;
    line-height: 1.2;
}

h2 {
    font-size: 1.8rem;
    line-height: 1.3;
}

h3 {
    font-size: 1.2rem;
    line-height: 1.4;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--text-color-light);
    /* Light text for paragraphs */
    font-family: var(--font-secondary);
    /* Use Roboto for body text */
}

a {
    color: var(--primary-color);
    /* Neon blue links */
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* --- Layout --- */
.container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    width: 90%;
    /* Ensure container doesn't touch edges on smaller viewports */
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
    /* Updated to match h1.hero-title style */
    color: var(--text-color-light);
    text-shadow:
        1px 1px 3px rgba(0, 0, 0, 0.7),
        /* Dark shadow for readability */
        var(--neon-text-glow);
    /* Consistent neon text glow */
}

/* --- NEW: Content Section Base Styles --- */
.content-section {
    padding: 60px 20px;
    /* Standard vertical and horizontal padding */
    position: relative;
    /* Needed for ::before gradients */
    position: relative;
    /* Needed for ::before gradients and z-index stacking */
    z-index: 1;
    /* Ensures section content is above the next section's ::before gradient */
}

/* --- Buttons --- */
.button {
    display: inline-block;
    padding: 10px 24px;
    border: 1px solid var(--primary-neon-blue);
    /* Neon blue border */
    border-radius: 20px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: center;
    background-color: transparent;
    /* Transparent background */
    color: var(--primary-neon-blue);
    /* Neon blue text */
    transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    box-shadow: inset 0 0 5px rgba(0, 255, 255, 0.3), 0 0 5px rgba(0, 255, 255, 0.3);
    /* Subtle inner and outer glow */
}

.button:hover {
    text-decoration: none;
    background-color: rgba(0, 255, 255, 0.1);
    /* Slight blue background on hover */
    color: var(--text-color-light);
    /* White text on hover */
    box-shadow: var(--neon-outline-glow-hover);
    /* Full neon glow on hover */
    transform: translateY(-1px);
    cursor: pointer;
    /* Ensure pointer cursor */
}

/* Primary button variation (Solid Blue with Glow) */
.button-primary {
    /* [MODIFIED] Layer gradients on top of the base blue color for a dome effect */
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0) 70%),
        /* Cyan highlight */
        #003b7e;
    /* Base blue color */
    border-color: var(--primary-neon-blue);
    color: var(--text-color-light);
    /* Light text for contrast */
    /* [MODIFIED] Add inset shadows for thickness */
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        /* Darker offset shadow */
        inset 0 1px 1px rgba(0, 255, 255, 0.5),
        /* Inner top highlight */
        inset 0 -1px 1px rgba(0, 0, 0, 0.4),
        /* Inner bottom shadow */
        var(--neon-outline-glow);
    /* Standard blue outline glow */
    position: relative;
    /* For shine effect */
    overflow: hidden;
    /* Contain shine effect */
    transition: all 0.3s ease;
}

.button-primary:hover {
    background-color: #004cb3;
    /* Slightly lighter base blue on hover */
    color: var(--text-color-light);
    /* Ensure text stays white/bright */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), var(--neon-outline-glow-hover);
    /* Enhanced glow, keep subtle drop shadow */
    transform: translateY(-1px);
    /* Keep the transform */
    cursor: pointer;
    /* Ensure pointer cursor */
}

/* [NEW] Add shine effect to primary button */
.button-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 75%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: left 0.5s ease;
}

.button-primary:hover::before {
    left: 125%;
}

/* [NEW] Secondary button variation (Glassmorphism) */
.button-secondary {
    /* [MODIFIED] Use multiple background gradients for a more realistic glass effect */
    /* [MODIFIED] Add a radial gradient to create a "dome" highlight */
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 70%), rgba(0, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    /* The "frosted glass" effect */
    -webkit-backdrop-filter: blur(10px);
    /* For Safari compatibility */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Subtle light border */
    /* [MODIFIED] Add a dark inner bottom shadow to complete the dome effect */
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.2),
        /* Softer, closer shadow */
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        /* Inner top highlight */
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
    /* Inner bottom shadow */
    color: var(--text-color-light);
    /* Ensure text is light and readable */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    /* Add a subtle shadow to text for readability */
    position: relative;
    /* Required for the ::before pseudo-element */
    overflow: hidden;
    /* Keep the shine effect contained */
    transition: all 0.3s ease;
    /* Smooth transition for all properties */
}

.button-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    /* Slightly brighter on hover */
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        /* More pronounced shadow on hover */
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        var(--neon-outline-glow);
    /* Add the theme glow on hover */
}

/* [NEW] Add a shine/glare pseudo-element for the hover effect */
.button-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    /* Start off-screen to the left */
    width: 75%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    /* Angle the shine */
    transition: left 0.5s ease;
}

.button-secondary:hover::before {
    left: 125%;
    /* Move the shine across the button on hover */
}

/* --- Hero Section --- */
.hero-section {
    padding: 80px 0 0 0;
    /* Reduced bottom padding */
    text-align: center;
    height: 85vh;
    /* Reduced height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background-color: var(--background-dark);
    /* Base color if video fails */
}

/* Gradient overlay at the TOP of the hero section */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    /* Position at the top */
    left: 0;
    width: 100%;
    height: calc(var(--gradient-height) * 0.75);
    /* Make it slightly smaller than bottom gradient */
    background: linear-gradient(to top,
            /* Fades upwards */
            rgba(15, 23, 42, 0) 0%,
            /* Transparent dark start at bottom of gradient */
            rgba(15, 23, 42, 0.8) 100%
            /* Semi-transparent dark at the top edge */
        );
    z-index: 1;
    /* Above video, below content */
    pointer-events: none;
}

/* Gradient overlay at the BOTTOM of the hero section */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--gradient-height);
    background: linear-gradient(to bottom,
            rgba(15, 23, 42, 0) 0%,
            /* Fully transparent dark at the top of the gradient */
            rgba(11, 28, 57, 0.7) 60%,
            /* Start fading to medium background color around 60% down */
            var(--background-medium) 100%
            /* Solid medium background at the very bottom */

        );
    z-index: 1;
    /* Above video, below content */
    pointer-events: none;
}

.hero-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Behind content and gradient overlay */
    overflow: hidden;
    opacity: 0.85;
    /* Video opacity */
    /* Add transition for smooth fade */
    transition: opacity 0.75s ease-in-out;
    /* Faster transition */
}

/* Class to fade video out */
.hero-video-background.fading-out {
    opacity: 0 !important;
    /* Use !important to override base opacity if needed */
}

.hero-video-background video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.hero-content {
    position: relative;
    z-index: 2;
    /* Ensure content is above the ::after gradient */
    width: 100%;
    max-width: 1000px;
    padding: 20px;
    box-sizing: border-box;
    padding-bottom: 5vh;
    /* Add padding so content doesn't sit on gradient edge */
}

.hero-title {
    font-size: 3.2rem;
    /* Increased size */
    font-weight: 700;
    /* Bolder for a stronger effect */
    /* [MODIFIED] Apply glass effect to the text itself */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(0, 255, 255, 0.7) 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    /* Drop shadow for readability */
    margin-bottom: 15px;
    transition: all 0.3s ease;
    /* Add transition for hover */
    cursor: default;
    /* Set default cursor */
}

.hero-subtitle {
    color: var(--text-color-medium);
    /* Use medium grey */
    max-width: 600px;
    margin: 0 auto 30px auto;
    font-size: 1.25rem;
    /* Increased size */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    /* Dark shadow for readability */
    transition: text-shadow 0.3s ease;
    /* Add transition for hover */
    cursor: default;
    /* Set default cursor */
    font-family: var(--font-secondary);
    /* Use Roboto */
}

.hero-cta {
    font-size: 1.1rem;
    /* Slightly larger font */
    /* Uses .button and .button-primary styles */
    padding: 12px 28px;
    /* Slightly larger padding */
}

/* Style for the button wrapper */
.hero-cta-buttons {
    display: flex;
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    /* Center buttons horizontally */
    gap: 20px;
    /* Increased space between buttons */
}

/* Styles for grouping button and its subtitle */
.button-with-subtitle {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.button-subtitle {
    font-size: 0.8rem;
    /* Smaller text */
    color: var(--text-color-medium);
    /* Less prominent color */
    margin-top: 8px;
    /* Space below the button */
    max-width: 280px;
    /* Limit width for better wrapping */
}

/* --- Gradient Transitions --- */

/* Generic Gradient Style for sections AFTER the first one */
/* Apply to sections that need a gradient *before* them */
.early-access-section::before,
.features-section::before,
.notify-launch-section::before,
.comparison-section::before,
.how-it-works-section::before,
.video-demo-section::before,
.how-to-upgrade-section::before,
.target-audience-section::before,
/* Added new section */
.testimonials-section::before,
.pricing-section::before,
.feedback-support-section::before,
.site-footer::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--gradient-height);
    top: calc(-1 * var(--gradient-height));
    /* Position gradient above the section */
    z-index: 0;
    /* Behind section content if needed, but above body bg */
    pointer-events: none;
    /* Make sure it doesn't interfere with clicks */
}

/* Specific Gradients - Adjust based on section order and background colors */
/* Sequence: hero(ends medium) -> features(dark) -> comparison(dark) -> how-it-works(medium) -> video(dark) -> how-to-upgrade(medium) -> target-audience(dark) -> testimonials(dark) -> pricing(medium) -> feedback(dark) -> cws-review(dark) -> footer(dark) */

/* Top of Early Access Section (Hero Medium -> Early Access Medium) */
.early-access-section::before {
    background: linear-gradient(to bottom,
            var(--background-medium),
            /* Color from hero end */
            var(--background-medium)
            /* Color of early access section */
        );
}

/* Top of Features Section (Early Access Medium -> Features Dark) */
.features-section::before {
    background: linear-gradient(to bottom,
            var(--background-medium),
            /* Color of early access section */
            var(--background-dark)
            /* Color of features section */
        );
}

/* Top of Notify Me Section (Features Dark -> Notify Medium) */
.notify-launch-section::before {
    background: linear-gradient(to bottom,
            var(--background-dark),
            /* Color of features section */
            var(--background-medium)
            /* Color of notify section */
        );
}

/* Top of Comparison Section (Notify Medium -> Comparison Dark) */
.comparison-section::before {
    background: linear-gradient(to bottom,
            var(--background-dark),
            /* Color of features section (assuming notify is removed) */
            var(--background-dark)
            /* Color of comparison section */
        );
}

/* Top of How It Works Section (Comparison Dark -> How It Works Medium) */
.how-it-works-section::before {
    background: linear-gradient(to bottom,
            var(--background-dark),
            /* Color of comparison section */
            var(--background-medium)
            /* Color of how-it-works section */
        );
}

/* Top of Video Demo Section (How It Works Medium -> Video Dark) */
.video-demo-section::before {
    background: linear-gradient(to bottom,
            var(--background-medium),
            /* Color of how-it-works section */
            var(--background-dark)
            /* Color of video-demo section */
        );
}

/* Top of How To Upgrade Section (Video Dark -> How To Upgrade Medium) */
.how-to-upgrade-section::before {
    background: linear-gradient(to bottom,
            var(--background-dark),
            /* Color of video-demo section */
            var(--background-medium)
            /* Color of how-to-upgrade section */
        );
}

/* Top of Target Audience Section (from How To Upgrade's var(--background-medium) to Target Audience's var(--background-dark)) */
.target-audience-section::before {
    background: linear-gradient(to bottom,
            var(--background-medium),
            /* This should be the background of how-to-upgrade-section */
            var(--background-dark)
            /* This should be the background of target-audience-section */
        );
}

/* Top of Testimonials Section (from Target Audience's var(--background-dark) to Testimonials' var(--background-dark)) */
.testimonials-section::before {
    background: linear-gradient(to bottom,
            var(--background-dark),
            /* Color of target-audience section */
            var(--background-dark)
            /* Color of testimonials section */
        );
}

/* Top of Pricing Section (Testimonials Dark -> Pricing Medium) */
.pricing-section::before {
    background: linear-gradient(to bottom,
            var(--background-dark),
            /* Color of testimonials section */
            var(--background-medium)
            /* Color of pricing section */
        );
}

/* Top of Feedback Section (Pricing Medium -> Feedback Dark) */
.feedback-support-section::before {
    background: linear-gradient(to bottom,
            var(--background-medium),
            /* Color of pricing section */
            var(--background-dark)
            /* Color of feedback section */
        );
}

/* Top of CWS Review Section (Feedback Dark -> CWS Review Dark) */
.cws-review-section::before {
    background: linear-gradient(to bottom,
            var(--background-dark),
            /* Color of feedback section */
            var(--background-dark)
            /* Color of cws-review section */
        );
}

/* Top of Footer (Feedback Dark -> Footer Dark) */
.site-footer::before {
    background: linear-gradient(to bottom,
            var(--background-dark),
            /* Color of cws-review section (or feedback if cws is not using this system) */
            var(--background-dark)
            /* Color of footer */
        );
}

/* --- Early Access Section --- */
.early-access-section {
    /* Uses .content-section for padding */
    background-color: var(--background-medium);
    /* Set explicit background */
    margin-top: var(--gradient-height);
    /* Add margin for gradient */
}

/* --- Features Section --- */
.features-section {
    /* Uses .content-section for padding */
    background-color: var(--background-dark);
    /* Set explicit background */
    margin-top: var(--gradient-height);
    /* Add margin for gradient */
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

/* Style for grids that might only have one item, like early access */
.single-item-grid {
    grid-template-columns: 1fr;
    /* Force single column */
    max-width: 700px;
    /* Limit width for single items */
    margin-left: auto;
    margin-right: auto;
}

.feature-item {
    text-align: center;
    padding: 30px 20px;
    background-color: var(--background-dark);
    border-radius: var(--border-radius);
    border: 1px solid var(--primary-neon-blue);
    /* Changed to primary blue */
    box-shadow: var(--neon-outline-glow);
    /* Changed to blue outline glow */
    opacity: 0;
    /* Initial state for animation */
    transform: translateY(20px);
    /* Initial state for animation */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
}

/* This class is added by script.js when the element is visible */
.feature-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.feature-item:hover,
.audience-item:hover,
.testimonial-item:hover,
.pricing-option:hover {
    /* [NEW] Add a subtle radial highlight on hover to simulate a glass sheen */
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 70%), var(--background-medium);
}

.feature-item:hover {
    box-shadow: var(--neon-outline-glow-hover);
    /* Changed to blue outline glow hover */
    transform: translateY(-3px);
}

/* Specific styling for feature items in sections with medium background */
.early-access-section .feature-item,
.notify-launch-section .feature-item,
.how-it-works-section .feature-item,
/* If steps use feature-item */
.how-to-upgrade-section .feature-item,
/* If steps use feature-item */
.pricing-section .feature-item {
    /* If pricing uses feature-item */
    background-color: var(--background-dark);
    /* Keep dark background for contrast */
}

/* Specific styling for feature items in sections with dark background */
.features-section .feature-item,
.comparison-section .feature-item,
/* If comparison uses feature-item */
.video-demo-section .feature-item,
/* If video uses feature-item */
.testimonials-section .feature-item,
/* If testimonials use feature-item */
.feedback-support-section .feature-item {
    background-color: var(--background-medium);
    /* Use medium background for contrast */
}

/* Adjust border/glow for feedback section items to match core features */
.feedback-support-section .feature-item {
    border-color: var(--primary-neon-blue);
    /* Use primary blue border */
    box-shadow: var(--neon-outline-glow);
    /* Use blue outline glow */
}

.feedback-support-section .feature-item {
    background-color: var(--background-medium);
    /* Ensure consistent background for hover effect */
}

.feedback-support-section .feature-item:hover {
    box-shadow: var(--neon-outline-glow-hover);
    /* Enhance blue outline glow on hover */
    transform: translateY(-3px);
    /* Match core feature hover transform */
}


.feature-icon {
    font-size: 2.5rem;
    /* Adjust size if using SVGs */
    margin-bottom: 15px;
    color: var(--primary-neon-blue);
    /* Changed to primary blue */
    text-shadow: var(--neon-text-glow);
    /* Changed to blue text glow */
    line-height: 1;
    /* Prevent extra space if using inline SVGs */
    /* If using SVG: display: inline-block; vertical-align: middle; */
}

.feature-item h3 {
    margin-bottom: 10px;
    color: var(--text-color-light);
    transition: text-shadow 0.3s ease;
    /* Add transition for hover */
    cursor: default;
    /* Set default cursor */
}

.feature-item p {
    font-family: var(--font-secondary);
    /* Ensure body font */
    color: var(--text-color-medium);
    /* Lighter text for feature description */
}

/* --- Notify Me Section --- */
.notify-launch-section {
    /* Uses .content-section for padding */
    background-color: var(--background-medium);
    /* Set explicit background */
    margin-top: var(--gradient-height);
    /* Add margin for gradient */
}

.notify-form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
    /* Allow wrapping on small screens */
}

.notify-form input[type="email"] {
    padding: 10px 15px;
    border-radius: 20px;
    border: 1px solid var(--border-color-dark);
    background-color: var(--background-dark);
    color: var(--text-color-light);
    min-width: 250px;
    font-size: 0.9rem;
}

.notify-form input[type="email"]:focus {
    outline: none;
    border-color: var(--primary-neon-blue);
    box-shadow: inset 0 0 5px rgba(0, 255, 255, 0.3);
}

.notify-form .button {
    /* Uses default button styles */
}

.notify-launch-section .note,
.early-access-section .note,
.feedback-support-section .note {
    font-size: 0.8rem;
    color: var(--text-color-medium);
    margin-top: 15px;
    text-align: center;
}

/* Screen reader only class */
.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    /* 1 */
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    /* 2 */
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
    /* 3 */
}


/* --- Comparison Section --- */
.comparison-section {
    /* Uses .content-section for padding */
    background-color: var(--background-dark);
    /* Set explicit background */
    margin-top: var(--gradient-height);
    /* Add margin for gradient */
}

.comparison-table {
    width: 100%;
    max-width: 700px;
    /* Limit table width */
    margin: 40px auto 0 auto;
    /* Center table */
    border-collapse: collapse;
    text-align: center;
}

.comparison-table th,
.comparison-table td {
    border: 1px solid var(--border-color-dark);
    padding: 12px 15px;
    color: var(--text-color-light);
}

.comparison-table th {
    background-color: var(--background-medium);
    color: var(--text-color-light);
    font-weight: 500;
}

.comparison-table td:first-child {
    text-align: left;
    /* Align feature names to the left */
    font-weight: 500;
    color: var(--text-color-light);
}

/* Style checkmarks/crosses */
.comparison-table .check {
    color: var(--primary-neon-blue);
    /* Green or blue check */
    font-weight: bold;
    font-size: 1.2em;
}

.comparison-table .cross {
    color: #888;
    /* Grey cross */
    font-size: 1.2em;
}


/* --- How It Works Section --- */
.how-it-works-section {
    /* Uses .content-section for padding */
    background-color: var(--background-medium);
    /* Set explicit background */
    margin-top: var(--gradient-height);
    /* Add margin-top for gradient space */
}

/* --- Video Styles (Moved from inline and enhanced) --- */
.how-it-works-video {
    /* Style for the video container itself */
    max-width: 700px;
    /* Match carousel width */
    margin: 40px auto 0;
    /* Center horizontally, add top margin */
    border-radius: 8px;
    /* Consistent rounding */
    overflow: hidden;
    /* Clip video to rounded corners */
    border: 1px solid var(--primary-neon-blue);
    box-shadow: var(--neon-outline-glow);
    transition: box-shadow 0.3s ease;
    /* Smooth transition for hover */
}

.how-it-works-video:hover {
    box-shadow: var(--neon-outline-glow-hover);
}

.how-it-works-video video {
    width: 100%;
    display: block;
    /* Remove extra space below video */
}

/* --- NEW: Video Demo Section Styles --- */
.video-demo-section {
    /* Uses .content-section for padding */
    background-color: var(--background-dark);
    /* Alternating color */
    margin-top: var(--gradient-height);
}

/* Adjust margin for video now inside its own section */
.video-demo-section .how-it-works-video {
    margin: 0 auto;
}

/* --- How To Upgrade Section --- */
.how-to-upgrade-section {
    /* Uses .content-section for padding */
    background-color: var(--background-medium);
    /* Set explicit background */
    margin-top: var(--gradient-height);
}

/* --- Target Audience Section --- */
.target-audience-section {
    /* Uses .content-section for padding */
    background-color: var(--background-dark);
    /* Ensure this section has its dark background */
    margin-top: var(--gradient-height);
    /* Add margin for gradient */
}

/* Style for Audience Items, similar to Feature Items */
.audience-item {
    text-align: center;
    padding: 30px 20px;
    background-color: var(--background-medium);
    /* Or dark, depending on section bg */
    border-radius: var(--border-radius);
    border: 1px solid var(--primary-neon-blue);
    box-shadow: var(--neon-outline-glow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.audience-item:hover {
    box-shadow: var(--neon-outline-glow-hover);
    transform: translateY(-3px);
}

/* --- Carousel Styles (NEW) --- */
.carousel-container {
    position: relative;
    max-width: 700px;
    /* Adjust max-width as needed */
    margin: 40px auto 0 auto;
    /* Center the carousel, add top margin */
    overflow: hidden;
    /* Hide slides outside the container */
    border-radius: 8px;
    /* Consistent rounding */
    /* box-shadow: 0 5px 15px rgba(0,0,0,0.2); */
    /* Shadow handled by glow */
    background-color: var(--background-dark);
    border: 1px solid var(--primary-neon-blue);
    box-shadow: var(--neon-outline-glow);
    transition: box-shadow 0.3s ease;
    /* Smooth transition for hover */
}

.carousel-container:hover {
    box-shadow: var(--neon-outline-glow-hover);
}

.carousel-slides {
    display: flex;
    /* Arrange slides horizontally */
    /* transition: transform 0.5s ease-in-out; */
    /* JS will handle transitions via opacity */
}

.carousel-slide {
    min-width: 100%;
    /* Each slide takes full container width */
    box-sizing: border-box;
    padding: 30px 40px;
    /* Padding inside each slide */
    text-align: center;
    opacity: 0;
    /* Hide inactive slides smoothly */
    transition: opacity 0.6s ease-in-out;
    /* Fade transition */
    display: none;
    /* Hide inactive slides by default */
    position: relative;
    /* Needed if using absolute positioning inside */
}

.carousel-slide.active {
    display: block;
    /* Show the active slide */
    opacity: 1;
}

/* Re-style screenshot specifically for carousel */
.carousel-slide .how-it-works-screenshot {
    max-width: 80%;
    /* Adjust image size within slide */
    max-height: 300px;
    /* Limit image height */
    margin: 0 auto 20px auto;
    /* Center image, add bottom margin */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    /* Subtle shadow for image */
    cursor: pointer;
    /* Indicate image is clickable */
    border: 1px solid var(--border-color-dark);
    border-radius: 6px;
}

.carousel-slide h3 {
    color: var(--text-color-light);
    margin-bottom: 10px;
}

.carousel-slide p {
    color: var(--text-color-medium);
    font-family: var(--font-secondary);
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(15, 23, 42, 0.6);
    /* Darker semi-transparent */
    color: var(--primary-neon-blue);
    border: 1px solid var(--primary-neon-blue);
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 50%;
    /* Make buttons circular */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 10;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}

.carousel-button:hover {
    background-color: rgba(0, 255, 255, 0.1);
    box-shadow: var(--neon-outline-glow-hover);
}

.carousel-button.prev {
    left: 15px;
}

.carousel-button.next {
    right: 15px;
}

.carousel-dots {
    text-align: center;
    padding: 15px 0 5px 0;
    /* Adjust padding */
}

.carousel-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--text-color-medium);
    /* Use medium grey for inactive */
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
    /* Placeholder for active state */
}

.carousel-dot.active {
    background-color: var(--primary-neon-blue);
    /* Neon blue for active */
    box-shadow: var(--neon-outline-glow);
    border-color: var(--primary-neon-blue);
}

/* --- End Carousel Styles --- */


/* --- Testimonials Section --- */
.testimonials-section {
    /* Uses .content-section for padding */
    background-color: var(--background-dark);
    /* Set explicit background */
    margin-top: var(--gradient-height);
    /* Add margin for gradient */
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
    max-width: 900px;
    /* Limit width */
    margin-left: auto;
    margin-right: auto;
}

.testimonial-item {
    background-color: var(--background-medium);
    padding: 25px;
    border-radius: 8px;
    border: 1px solid var(--primary-neon-blue);
    /* Changed from left border to full border */
    box-shadow: var(--neon-outline-glow);
    /* Added outline glow */
}

.testimonial-item {
    /* Ensure consistent background for hover effect */
    background-color: var(--background-medium);
}

.testimonial-quote {
    font-style: italic;
    color: var(--text-color-light);
    margin-bottom: 15px;
    position: relative;
    padding-left: 25px;
    /* Space for quote mark */
}

.testimonial-quote::before {
    content: '“';
    /* Opening quote */
    position: absolute;
    left: 0;
    top: -5px;
    font-size: 2.5em;
    color: var(--primary-neon-blue);
    opacity: 0.5;
    line-height: 1;
}


.testimonial-author {
    font-weight: 500;
    color: var(--text-color-medium);
    text-align: right;
}

.testimonial-author::before {
    content: '— ';
    /* Em dash before author */
}


/* --- Pricing Section --- */
.pricing-section {
    /* Uses .content-section for padding */
    text-align: center;
    background-color: var(--background-medium);
    /* Set explicit background */
    margin-top: var(--gradient-height);
    /* Add margin-top for gradient space */
}

.pricing-subtitle {
    color: var(--text-color-medium);
    margin-bottom: 30px;
    transition: text-shadow 0.3s ease;
    /* Add transition for hover */
    cursor: default;
    /* Set default cursor */
    font-family: var(--font-secondary);
    /* Use Roboto */
}

/* Pricing button uses .button and .button-primary styles */

/* --- Pricing Section Enhancements --- */
.pricing-options-container {
    display: flex;
    /* Arrange options side-by-side */
    justify-content: center;
    /* Center the options horizontally */
    align-items: stretch;
    /* Align items to the top, make cards same height */
    gap: 40px;
    /* Space between the two options */
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens */
    margin-top: 40px;
    /* Space below the main subtitle */
}

.pricing-option {
    flex: 1;
    /* Allow options to grow */
    min-width: 280px;
    /* Corrected: was '2olor' */
    border-radius: var(--border-radius);
    border: 1px solid var(--primary-neon-blue);
    /* Changed to primary blue */
    box-shadow: var(--neon-outline-glow);
    /* Changed to blue outline glow */
    display: flex;
    /* Enable flex for vertical alignment */
    flex-direction: column;
    /* Stack content vertically */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-option {
    background-color: var(--background-dark);
    /* Ensure consistent background for hover effect */
}

.pricing-option:hover {
    transform: translateY(-5px);
    box-shadow: var(--neon-outline-glow-hover);
    /* Changed to blue outline glow hover */
}

.pricing-option h3 {
    color: var(--primary-neon-blue);
    /* Changed to primary blue */
    margin-top: 10px;
    /* [FIX] Add space between top border and title */
    margin-bottom: 15px;
    /* Adjusted margin */
    font-size: 1.4rem;
    /* Slightly larger */
    text-shadow: 0 0 5px rgba(9, 18, 33, 0.5);
    /* Subtle glow to brighten */

}

.pricing-option-description {
    color: var(--text-color-medium);
    font-size: 0.95rem;
    /* Slightly larger */
    margin-bottom: 20px;
    /* Space above the button */
    flex-grow: 1;
    /* Allow description to take up available space */
    min-height: 30px;
    /* Example min-height, adjust as needed */
    color: var(--text-color-medium);
    /* Ensure text color is defined */
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.features-list li {
    margin-bottom: 10px;
}

.pricing-option.free-plan {
    /* Center content vertically */
    justify-content: center;
}

.pricing-option.free-plan .pricing-option-description {
    flex-grow: 0;
}

.pricing-option stripe-buy-button {
    display: block;
    /* Make it block to control margin */
    margin-top: auto;
    /* Push button to bottom */
    /* The button itself might need internal styling via Stripe dashboard */
    /* Add a wrapper div if more control is needed */
}

/* --- Feedback & Support Section --- */
.feedback-support-section {
    /* Uses .content-section for padding */
    background-color: var(--background-dark);
    /* Set explicit background */
    text-align: center;
    margin-top: var(--gradient-height);
}

/* Re-use feature grid for layout */
.feedback-support-section .feature-grid {
    max-width: 1000px;
    /* Adjust as needed */
    margin: 40px auto 0 auto;
}

/* Feedback item styling is handled by general .feature-item rules and overrides above */

/* Style buttons within feedback section */
.feedback-support-section .button {
    /* Uses default .button styles */
    margin-top: auto;
    /* Push button to bottom if needed */
}

/* --- Footer --- */
.site-footer {
    padding: 40px 20px 30px 20px;
    /* Increased top padding */
    background-color: var(--background-dark);
    /* border-top: 1px solid var(--border-color-dark); */
    /* Border is now part of gradient */
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-color-medium);
    position: relative;
    /* Needed for ::before */
    margin-top: var(--gradient-height);
    /* Add margin-top for gradient space */
}

/* Footer About Snippet (NEW) */
.footer-about {
    font-size: 0.85rem;
    max-width: 600px;
    margin: 0 auto 25px auto;
    /* Space below snippet */
    line-height: 1.5;
    color: var(--text-color-medium);
}

.footer-nav {
    margin-bottom: 15px;
    /* Increased space */
}

.footer-nav a {
    color: var(--text-color-medium);
    margin: 0 12px;
    /* Slightly more space */
    transition: color 0.2s ease, text-shadow 0.2s ease;
    cursor: default;
    /* Set default cursor */
}

.footer-copyright {
    font-size: 0.8rem;
    margin-top: 15px;
    /* Add space above copyright */
}

/* --- Footer Social Icons --- */
.footer-social {
    margin-bottom: 20px;
    /* Space below icons, before copyright */
    display: flex;
    justify-content: center;
    gap: 25px;
    /* Space between icons */
}

.footer-social a {
    display: inline-block;
    color: var(--text-color-medium);
    /* Use medium grey for icons */
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-social a:hover {
    color: var(--primary-neon-blue);
    /* Neon blue on hover */
    transform: scale(1.1);
    /* Slight scale effect */
    text-shadow: none;
    /* Remove text glow from icon hover */
}


/* --- Text Glow on Hover --- */

/* The glow effect applied on hover */
.features-section p:hover,
.features-section h3:hover,
/* .how-it-works-section .step-item:hover, */
/* Removed glow from steps */
.pricing-section p:hover,
/* Target p directly if needed */
.pricing-subtitle:hover,
p.hero-subtitle:hover,
.testimonial-quote:hover {
    /* Add glow to testimonial quote */
    text-shadow: var(--neon-blue-glow);
    /* Use your neon blue glow */
    cursor: text;
    /* Indicate text interaction */
}

/* Enhance existing link/button hovers */
a:hover {
    color: var(--text-color-light);
    /* Brighter on hover */
    text-shadow: var(--neon-text-glow-hover);
    /* Ensure glow on links */
    text-decoration: none;
    cursor: pointer;
    /* Ensure pointer cursor */
}

/* Special handling for hero title hover glow */
h1.hero-title:hover {
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.7),
        /* Dark shadow for readability */
        var(--neon-text-glow-hover);
    /* Consistent light blue text glow hover */
    cursor: default;
}

/* Footer link hover */
.footer-nav a:hover {
    color: var(--primary-neon-blue);
    /* Blue hover */
    text-shadow: var(--neon-text-glow);
    /* Subtle blue glow */
    text-decoration: none;
    cursor: pointer;
    /* Ensure pointer cursor */
}

/* --- Lightbox Styles (Keep if used elsewhere, otherwise remove) --- */
.lightbox-overlay {
    position: fixed;
    /* Stay in place */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.9);
    /* Darker overlay using theme color */
    display: none;
    /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    /* Ensure it's on top */
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
    /* Indicate it's clickable to close */
    opacity: 0;
    /* Start fully transparent */
    transition: opacity 0.3s ease;
    /* Fade transition */
}

.lightbox-overlay.active {
    display: flex;
    /* Show when active */
    opacity: 1;
    /* Fade in */
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    cursor: default;
    /* Default cursor over the content area */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    /* Drop shadow */
    transform: scale(0.95);
    /* Start slightly smaller */
    transition: transform 0.3s ease;
    /* Scale transition */
    border: 1px solid var(--primary-neon-blue);
    /* Add border */
    background-color: var(--background-medium);
    /* Slightly lighter for content box */
}

.lightbox-overlay.active .lightbox-content {
    transform: scale(1);
    /* Scale to full size when active */
}

#lightbox-image {
    display: block;
    max-width: 100%;
    max-height: calc(90vh - 40px);
    /* Adjust max height based on viewport and padding */
    width: auto;
    height: auto;
    object-fit: contain;
    /* Scale image while preserving aspect ratio */
    border-radius: 4px;
    /* Slight rounding on image */
}

.lightbox-close {
    position: absolute;
    top: -15px;
    /* Position slightly outside the content box */
    right: -15px;
    /* Position slightly outside the content box */
    width: 35px;
    height: 35px;
    background-color: var(--background-dark);
    /* Match background */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    /* Adjust size of 'x' */
    font-weight: bold;
    color: var(--primary-neon-blue);
    /* Neon blue 'x' */
    cursor: pointer;
    z-index: 1001;
    /* Above the image */
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    line-height: 1;
    /* Ensure 'x' is centered vertically */
    border: 1px solid var(--primary-neon-blue);
    /* Neon border */
    box-shadow: var(--neon-outline-glow);
}

.lightbox-close:hover {
    background-color: rgba(0, 255, 255, 0.1);
    /* Blue tint on hover */
    transform: scale(1.1);
    /* Slight scale effect on hover */
    box-shadow: var(--neon-outline-glow-hover);
    /* Enhance glow */
}

/* --- Styles for Policy Pages (Privacy & Terms) --- */

.policy-container {
    max-width: 800px;
    /* Limit width for readability */
    margin: 40px auto;
    /* Center content with top/bottom margin */
    padding: 30px 40px;
    /* More padding */
    background-color: #ffffff;
    /* White background */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    color: #333;
    /* Default text color for policy */
    font-family: 'Roboto', sans-serif;
    /* Ensure consistent font */
}

.policy-container h1 {
    font-family: 'Google Sans', sans-serif;
    /* Heading font */
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 25px;
    font-size: 2.2em;
    /* Slightly larger H1 */
    color: #1a73e8;
    /* Match primary button color */
}

.policy-container h2 {
    font-family: 'Google Sans', sans-serif;
    /* Heading font */
    margin-top: 2.5em;
    /* More space above H2 */
    margin-bottom: 1em;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 8px;
    font-size: 1.6em;
    color: #444;
}

.policy-container h3 {
    font-family: 'Google Sans', sans-serif;
    /* Heading font */
    margin-top: 2em;
    margin-bottom: 0.8em;
    font-weight: 500;
    /* Medium weight */
    font-size: 1.2em;
    color: #555;
}

.policy-container p,
.policy-container li {
    line-height: 1.7;
    /* Improve paragraph readability */
    color: #444;
    /* Slightly darker text */
    margin-bottom: 15px;
    /* Space between paragraphs/list items */
}

.policy-container ul,
.policy-container ol {
    padding-left: 25px;
    /* Indent lists */
    margin-bottom: 20px;
    /* Space after lists */
}

.policy-container .last-updated {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 25px;
    display: block;
}

/* Simple footer for policy pages */
.simple-footer {
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 1px solid #eee;
}

.simple-footer a {
    color: #1a73e8;
    text-decoration: none;
    font-weight: 500;
}

.simple-footer a:hover {
    text-decoration: underline;
}

/* --- Refined Audio Player Styles --- */
.audio-overview {
    margin: 0 auto 40px auto;
    /* Center block, add bottom margin */
    text-align: center;
}

.audio-description {
    color: var(--text-color-medium);
    /* Use medium text color */
    margin-bottom: 15px;
    /* Increased space */
    font-size: 1.2em;
    /* Slightly larger */
    font-weight: 500;
}

/* --- Plyr Customization --- */
:root {
    /* Override Plyr Variables */
    --plyr-color-main: var(--primary-neon-blue);
    /* Use neon blue for controls */
    --plyr-control-radius: 6px;
    /* Match button radius */
    --plyr-control-spacing: 10px;
    --plyr-control-background: transparent;
    --plyr-control-color: var(--primary-neon-blue);
    --plyr-control-color-hover: #fff;
    /* White on hover */

    --plyr-range-track-background: rgba(51, 65, 85, 0.7);
    /* Darker track */
    --plyr-range-fill-background: var(--primary-neon-blue);
    /* Neon blue fill */
    --plyr-range-thumb-background: var(--text-color-light);
    /* White thumb */
    --plyr-range-thumb-shadow: var(--neon-blue-glow);
    /* Glow on thumb */
    --plyr-range-thumb-height: 12px;

    --plyr-tooltip-background: var(--background-dark);
    --plyr-tooltip-color: var(--text-color-light);
    --plyr-tooltip-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Container styling */
/* Target Plyr player specifically within the audio overview section */
.audio-overview .plyr {
    border-radius: var(--border-radius);
    /* Match button border-radius */
    box-shadow: var(--neon-outline-glow);
    /* Apply outline glow */
    border: 1px solid var(--primary-neon-blue);
    background-color: var(--background-dark);
    /* Ensure dark background */
    max-width: 450px;
    /* Adjust width */
    margin: 0 auto;
    /* Center */

    /* Re-apply variables directly to the element for higher specificity */
    --plyr-color-main: var(--primary-neon-blue);
    --plyr-control-radius: 6px;
    --plyr-control-spacing: 10px;
    --plyr-control-background: transparent;
    --plyr-control-color: var(--primary-neon-blue);
    --plyr-control-color-hover: #fff;
    --plyr-range-track-background: rgba(51, 65, 85, 0.7);
    --plyr-range-fill-background: var(--primary-neon-blue);
    /* Ensure this is neon blue */
    --plyr-range-thumb-background: #fff;
    --plyr-range-thumb-shadow: var(--neon-blue-glow);
    --plyr-range-thumb-height: 12px;
    --plyr-tooltip-background: var(--background-dark);
    --plyr-tooltip-color: var(--text-color-light);
    --plyr-tooltip-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Button hover effects */
.audio-overview .plyr__controls button:hover {
    background-color: rgba(0, 255, 255, 0.15) !important;
    /* Slightly stronger blue background, ensure important */
    box-shadow: var(--neon-outline-glow-hover);
}

/* Ensure icons use the right color */
.audio-overview .plyr__controls button svg {
    fill: var(--plyr-control-color);
    color: var(--plyr-control-color);
    /* Sometimes color is used */
}

.audio-overview .plyr__controls button:hover svg {
    fill: var(--plyr-control-color-hover);
    color: var(--plyr-control-color-hover);
    /* Sometimes color is used */
}

/* Force progress bar colors */
.audio-overview .plyr__progress input[type=range]::-webkit-slider-runnable-track {
    background: var(--plyr-range-track-background) !important;
}

.audio-overview .plyr__progress input[type=range]::-moz-range-track {
    background: var(--plyr-range-track-background) !important;
}

.audio-overview .plyr__progress input[type=range]::-ms-track {
    background: var(--plyr-range-track-background) !important;
}

.audio-overview .plyr__progress__buffer {
    background: rgba(0, 255, 255, 0.2) !important;
    /* Buffered color */
}

.audio-overview .plyr__progress__container .plyr__progress__value {
    /* This targets the filled part */
    background: var(--plyr-range-fill-background) !important;
}

.audio-overview .plyr__volume input[type=range] {
    /* Ensure volume slider matches */
    color: var(--plyr-color-main) !important;
}


/* --- Responsive Styles --- */
@media (max-width: 768px) {

    /* --- Typography Adjustments --- */
    h1 {
        font-size: 2.0rem;
    }

    /* Slightly smaller */
    h2 {
        font-size: 1.5rem;
    }

    /* Slightly smaller */
    h3 {
        font-size: 1.1rem;
    }

    /* Slightly smaller */
    p,
    .comparison-table td,
    .comparison-table th {
        font-size: 0.95rem;
    }

    /* Adjust base text size */

    /* --- Layout Adjustments --- */
    .container {
        width: 90%;
    }

    /* Ensure padding works well */
    .content-section {
        padding: 40px 15px;
    }

    /* Reduce padding */

    /* --- Hero Section --- */
    .hero-section {
        height: auto;
        /* Let content define height */
        min-height: 80vh;
        /* Ensure it's still tall, but flexible */
        padding: 60px 15px 0 15px;
        /* Adjust padding */
    }

    .hero-subtitle {
        max-width: 90%;
        /* Allow subtitle to use more width */
        font-size: 1.05rem;
    }

    /* Optional: Reduce gradient height on mobile */
    /* :root { --gradient-height: 60px; } */
    /* If reducing gradient height, adjust section margin-tops accordingly */
    /* .early-access-section, .features-section, .notify-launch-section, .comparison-section, .how-it-works-section, .video-demo-section, .how-to-upgrade-section, .testimonials-section, .pricing-section, .feedback-support-section, .site-footer { margin-top: 60px; } */


    /* --- Features Section --- */
    .feature-grid {
        grid-template-columns: 1fr;
        /* Stack items */
        gap: 30px;
        /* Slightly reduce gap */
    }

    .feature-item {
        padding: 25px 15px;
        /* Adjust padding */
        /* Optional: Reduce glow intensity on mobile */
        /* box-shadow: 0 0 3px var(--secondary-neon-magenta), 0 0 6px var(--secondary-neon-magenta); */
    }

    .feature-icon {
        font-size: 2.2rem;
        /* Slightly smaller icon */
    }

    /* --- Comparison Section --- */
    .comparison-table th,
    .comparison-table td {
        padding: 8px 10px;
    }

    /* --- How It Works Section --- */
    /* Carousel adjustments for mobile */
    .carousel-container {
        max-width: 95%;
    }

    .carousel-slide {
        padding: 20px 25px;
    }

    .carousel-slide .how-it-works-screenshot {
        max-height: 250px;
    }

    .carousel-button {
        width: 35px;
        height: 35px;
        font-size: 1rem;
        padding: 6px 10px;
    }

    .carousel-button.prev {
        left: 10px;
    }

    .carousel-button.next {
        right: 10px;
    }

    .carousel-dot {
        width: 8px;
        height: 8px;
    }

    /* --- Testimonials Section --- */
    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    /* Stack testimonials */

    /* --- Pricing Section --- */
    .pricing-options-container {
        flex-direction: column;
        /* Stack options vertically */
        align-items: center;
        /* Center items when stacked */
        gap: 30px;
    }

    .pricing-option {
        width: 90%;
        /* Take more width when stacked */
        max-width: 400px;
        /* Adjust max-width if needed */
    }

    /* --- Footer --- */
    .site-footer {
        padding: 25px 15px;
        /* Adjust padding */
    }

    .footer-nav {
        display: flex;
        flex-direction: column;
        /* Stack footer links */
        gap: 8px;
        /* Add gap between stacked links */
        margin-bottom: 15px;
    }

    .footer-nav a {
        margin: 0;
        /* Remove horizontal margin */
    }

}

/* End @media (max-width: 768px) */


@media (max-width: 480px) {

    /* --- Further adjustments for very small screens --- */
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    p,
    .comparison-table td,
    .comparison-table th {
        font-size: 0.9rem;
    }

    .hero-section {
        min-height: 75vh;
        /* Adjust height */
        padding-top: 50px;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .button {
        padding: 9px 20px;
        font-size: 0.85rem;
    }

    /* Slightly larger touch target */

    .content-section {
        padding: 40px 10px;
        /* Reduce padding further */
    }

    .site-footer {
        padding: 20px 10px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 6px 8px;
    }

    /* Smaller table padding */

    .notify-form input[type="email"] {
        min-width: 200px;
        /* Adjust email input width */
    }

    /* Optional: Reduce gradient height further on small screens */
    /* :root { --gradient-height: 50px; } */
    /* If reducing gradient height, adjust section margin-tops accordingly */
    /* .early-access-section, .features-section, .notify-launch-section, .comparison-section, .how-it-works-section, .video-demo-section, .how-to-upgrade-section, .testimonials-section, .pricing-section, .feedback-support-section, .site-footer { margin-top: 50px; } */

}

/* End @media (max-width: 480px) */
/* Add this to your style.css file */

.feedback-support-section .feature-item {
    display: flex;
    flex-direction: column;
    /* If your .feature-grid is a CSS Grid and its items (feature-item)
       are set to stretch or have equal height, this 'height: 100%'
       ensures the flex container fills that space, allowing the button
       to align to the very bottom. */
    /* height: 100%; */
    /* Commented out to allow content to define height */
    /* min-height: 280px; */
    /* Commented out to allow content to define height */
    padding: 25px;
    /* Uniform padding for more internal space */
}

.feedback-support-section .feature-item>h3 {
    /* Adjust bottom margin for spacing if needed */
    margin-bottom: 1rem;
    /* Increased space after heading */
}

.feedback-support-section .feature-item>p {
    /* Ensures there's space between the last paragraph and the button.
       If you have multiple paragraphs, this applies to all of them. */
    margin-bottom: 1.5rem;
    /* Increased space after paragraphs */
}

/* Specifically target the .note paragraph if you want different spacing for it */
.feedback-support-section .feature-item>p.note {
    margin-bottom: 1.5rem;
    /* Match general paragraph spacing */
}


.feedback-support-section .feature-item>.button {
    /* This is the magic part: it pushes the button to the
       bottom of the flex container (.feature-item). */
    margin-top: auto;
    /* Optional: if your buttons are full-width by default and you want them
       to only be as wide as their content, and aligned to the start. */
    /* width: fit-content; */
    /* align-self: flex-start; */
}

/* Add to your style.css */

.cws-review-section {
    background-color: var(--background-dark);
    /* Or a slightly different shade */
    padding-top: 50px;
    margin-top: var(--gradient-height);
    /* Add margin for gradient */
    padding-bottom: 60px;
    text-align: center;
}

.cws-review-section .section-title {
    color: var(--primary-neon-blue);
    text-shadow: var(--neon-text-glow);
    /* Use consistent text glow */
    margin-bottom: 15px;
}

.cws-review-section .cta-subtitle {
    color: var(--text-color-light-secondary);
    font-size: 1.1rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
    line-height: 1.6;
}

.cws-review-section .button-primary {
    /* Ensure it stands out, maybe slightly larger or with more emphasis */
    padding: 12px 30px;
    font-size: 1.1rem;
}

.cws-review-section .note {
    color: var(--text-color-light-secondary);
    font-size: 0.9em;
    margin-top: 20px;
}

.cws-review-section .note a {
    color: var(--primary-neon-blue);
    text-decoration: underline;
}

.cws-review-section .note a:hover {
    color: var(--secondary-neon-magenta);
}

/* Optional: if you want a glow effect on the title like other sections */
.text-glow-cta-section .section-title {
    color: var(--primary-neon-blue);
    /* Changed to primary blue for consistency */
    text-shadow: var(--neon-text-glow);
    /* Use consistent text glow */
}

.pricing-option {
    cursor: pointer;
}

/* In style.css */

/* Responsive YouTube Embed in .how-it-works-video */
.how-it-works-video {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio (e.g., 315 / 560 = 0.5625) */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    /* Ensures it doesn't overflow its container */
    background: #000;
    /* Optional: background color while video loads */
    border-radius: 8px;
    /* Optional: if you want rounded corners */
    margin: 20px auto;
    /* Optional: for centering or spacing */
}

.how-it-works-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    /* Ensures no border from the iframe itself */
}

/* --- Thank You Page --- */
.thank-you-section {
    background-color: var(--background-dark);
    /* Consistent dark background */
    text-align: center;
    min-height: 70vh;
    /* Ensure it takes up a good portion of the screen */
    display: flex;
    /* For vertical centering of content */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* .content-section already provides padding: 60px 20px; */
}

.thank-you-section .section-title {
    /* Uses existing .section-title styles (color, text-shadow, etc.) */
    margin-bottom: 30px;
    /* Space below "Thank You!" */
    font-size: 2.8rem;
    /* Make it prominent */
}

.thank-you-content {
    max-width: 600px;
    /* Keep text block readable */
    margin-left: auto;
    margin-right: auto;
}

.thank-you-content p {
    color: var(--text-color-light);
    /* Light text for readability */
    font-family: var(--font-secondary);
    /* Consistent paragraph font */
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 15px;
}

.thank-you-content p:last-of-type {
    margin-bottom: 35px;
    /* More space before the button */
}

.thank-you-cta .button {
    /* Uses existing .button and .button-primary styles */
    padding: 12px 28px;
    /* Standard padding for primary CTA */
    font-size: 1rem;
}


/* --- Responsive Styles --- */
@media (max-width: 768px) {

    /* --- Typography Adjustments --- */
    .carousel-button.next {
        right: 10px;
    }

    .carousel-dot {
        width: 8px;
        height: 8px;
    }

    /* Thank You Page Responsive */
    .thank-you-section .section-title {
        font-size: 2.2rem;
    }

    .thank-you-content p {
        font-size: 1rem;
    }

    /* --- Testimonials Section --- */
    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    /* Stack testimonials */
    /* Thank You Page Responsive Small */
    .thank-you-section .section-title {
        font-size: 2rem;
    }

    .thank-you-content p {
        font-size: 0.95rem;
    }

    .thank-you-cta .button {
        padding: 10px 24px;
        font-size: 0.9rem;
    }
}

/* End @media (max-width: 480px) */
/* Add this to your style.css file */

/* In your style.css, you might already have some of these selectors */

/* Adjust existing or add new styles for the link containers */
.thank-you-cta .thank-you-additional-link {
    margin-top: 30px;
    /* Increased space from buttons to the first link (support) */
    font-size: 0.95rem;
    color: var(--text-color-medium);
}

/* If you want specific spacing between the support and feedback links */
.thank-you-cta .feedback-link-container {
    margin-top: 15px;
    /* Space between support link and feedback link */
}

/* Style for the actual links within these containers */
.thank-you-cta .thank-you-additional-link a {
    /* General style for these links */
    color: var(--primary-neon-blue);
    text-decoration: underline;
    font-weight: 500;
    /* Make them slightly bolder than paragraph text */
}

.thank-you-cta .thank-you-additional-link a:hover {
    color: var(--text-color-light);
    text-shadow: var(--neon-text-glow-subtle);
    /* Optional subtle glow on hover */
}

/* You might already have these from a previous suggestion, ensure they are up-to-date */
.thank-you-cta a.thank-you-support-link {
    /* Specific styles for support link if needed, otherwise covered by the general rule above */
}

.thank-you-cta a.thank-you-feedback-link {
    /* Specific styles for feedback link if needed, otherwise covered by the general rule above */
}

/* [NEW] Glass container style for CTA section */
.glass-container {
    background: rgba(0, 43, 91, 0.25);
    /* Semi-transparent dark blue */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    border: 1px solid rgba(0, 255, 255, 0.18);
    padding: 40px 30px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    transition: background 0.3s ease, border 0.3s ease;
}

.glass-container:hover {
    background: rgba(0, 43, 91, 0.35);
}