@font-face {
    font-family: 'kindred-bold'; /* This is the name you'll use in font-family properties */
    src: url('fonts/Kindred-Bold.otf') format('opentype');
    font-weight: bold; /* Define its weight */
    font-style: normal;
}

/* Basic Reset & Defaults */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Link Styling */
a {
    color: rgb(218, 75, 82); /* Red link color */
    text-decoration: none; /* Optional: remove underline */
}

a:hover {
    text-decoration: underline; /* Optional: add underline on hover */
}

body {
    font-family: 'Lato', sans-serif; /* Clean sans-serif font */
    line-height: 1.6;
    background-color: #f8f8f8; /* Light background */
    color: #333;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align to top */
    min-height: 100vh;
    padding: 20px;
}

.landing-container {
    background-color: #ffffff; /* White container background */
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 650px;
    width: 100%;
    text-align: center;
}

/* Add styling for the new image */
.main-image {
    max-width: 200px; /* Ensure image is responsive */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 25px; /* Space below image */
    border-radius: 6px; /* Optional: slightly rounded corners */
}

/* Optional Header Styling */
.header {
    margin-bottom: 30px;
}

.logo {
    max-width: 150px; /* Adjust size as needed */
    height: auto;
}

/* Content Styling */
.content h1 {
    color: rgb(61, 34, 98); /* Updated Purple headline */
    font-size: 2em;
    margin-bottom: 10px; /* Reduced margin */
    font-weight: 700;
    font-family: kindred-bold, Georgia, "Times New Roman", serif; /* Added specific font stack */
}

/* New rule for H2 tagline */
.content .tagline {
    color: rgb(218, 75, 82); /* Red tagline */
    font-size: 1.6em; /* Appropriate size relative to H1 */
    font-weight: 400; /* Normal weight to match body */
    margin-bottom: 25px;
    line-height: 1.4;
    max-width: 550px; /* Keep width manageable */
    margin-left: auto;
    margin-right: auto;
}

.content .description {
    color: #555; /* Slightly darker grey for readability */
    font-size: 1.1em;
    margin-bottom: 30px;
    max-width: 550px; /* Keep description width manageable */
    margin-left: auto;
    margin-right: auto;
}

/* Form Container */
.form-container {
    background-color: #F5D1C8;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 30px;
}

/* Updated form title rule */
.form-container .form-title { /* Changed from h2 to specific class */
    color: rgb(61, 34, 98); /* White text on purple */
    margin-bottom: 20px;
    font-size: 1.1em;
}

/* Form Styling */
#audio-download-form {
    display: flex;
    flex-direction: column;
    gap: 1px; /* Space between form elements */
}

.form-group {
    width: 100%;
}

/* Visually hide labels but keep for accessibility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Updated rule to target both text and email inputs */
#audio-download-form input:not([type="submit"]) { /* Selects inputs that are NOT submit buttons */
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 5px;
    font-size: 1em;
    font-family: inherit;
    margin-bottom: 5px; /* Added slight margin for validation message spacing */
}

/* Updated focus rule for both text and email inputs */
#audio-download-form input:not([type="submit"]):focus {
    outline: none;
    border-color: #FBAA6A; /* Highlight border on focus */
    box-shadow: 0 0 5px rgba(251, 170, 106, 0.5);
}

/* Optional: Style for validation message placeholders */
.validation-message {
    font-size: 0.85em;
    color: #da4b52; /* Red for error messages */
    text-align: left;
    min-height: 1.2em; /* Reserve space even when empty */
}

.cta-button {
    background-color:rgb(218, 75, 82); /* Yellow/Orange button */
    color: #fff; /* Dark Purple text for contrast */
    border: none;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 10px; /* Space above button */
}

.cta-button:hover {
    background-color: #f99a4e; /* Slightly darker orange on hover */
    transform: translateY(-2px); /* Subtle lift effect */
}

.privacy-note {
    color: #3D2262;
    font-size: 0.85em;
    margin-top: 15px;
}

/* Testimonial Snippet */
.testimonial-snippet {
    margin-top: 30px;
    padding: 15px 20px 15px 20px;
    background-color: #f1f1f1; /* Light grey background for snippet */
    border-left: 4px solid #da4b52; /* Red accent border */
    border-radius: 4px;
    text-align: left;
}

.testimonial-snippet p {
    font-style: italic;
    color: #333;
    margin-bottom: 5px; /* Space before author */
}

.testimonial-snippet .author {
    font-style: normal;
    font-weight: bold;
    color: #3D2262; /* Purple author name */
    text-align: right;
}

/* Footer Styling */
.footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 0.9em;
    color: #888;
}

/* Responsive Adjustments */

/* Mobile */
@media (max-width: 600px) {
    .landing-container {
        padding: 30px 15px;
    }

    .content .tagline {
        font-size: 1.4em; /* Scaled down for mobile */
        margin-bottom: 20px;
    }

    .content .description {
        font-size: 1em;
    }

    .form-container {
        padding: 20px;
    }

    .form-container .form-title {
        font-size: 1.2em;
        font-weight: 500;
    }

     .cta-button {
        font-size: 1em;
        padding: 12px 15px;
     }
}