/* Basic Styling */
body {
    font-family: Inter, sans-serif;
    margin: 0; /* Ensure no default body margin */
    padding: 0; /* Ensure no default body padding */
    color: #333; /* Default text color */
    line-height: 1.6; /* Improve readability */
}

.container {
    max-width: 1140px; /* Slightly wider container */
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box; /* Include padding in width calculation */
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px; /* Offset padding */
    margin-right: -15px; /* Offset padding */
}

.col-md-6 {
    width: 50%;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Header Styling */
header {
    background-color: #fff;
    padding: 15px 0; /* Adjusted padding */
    border-bottom: 1px solid #eee; /* Subtle border */
    position: sticky; /* Make header sticky */
    top: 0;
    z-index: 1000; /* Ensure header is above other content */
}

header .container { /* Target container within header */
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.logo {
    height: 35px; /* Slightly smaller logo */
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center; /* Align items vertically */
}

nav li {
    margin-left: 25px; /* Adjusted spacing */
}

nav a {
    text-decoration: none;
    color: #555; /* Slightly lighter nav link color */
    font-weight: 500; /* Medium weight */
    transition: color 0.2s ease; /* Smooth hover effect */
}

nav a:hover, nav a.active { /* Style for hover and active links */
    color: #007bff; /* Use a primary color */
}

.call-to-action {
    padding: 8px 18px; /* Adjusted padding */
    background-color: #007bff; /* Primary button color */
    color: white;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s ease;
}
.call-to-action:hover {
    background-color: #0056b3; /* Darker shade on hover */
    color: white;
}


/* Split Hero Styling */
.split-hero {
    padding: 80px 0; /* Increased padding */
    background-color: #f8f9fa; /* Light background */
}

.split-hero .container { /* Target container within hero */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically align items */
    gap: 40px; /* Space between text/image and login area */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}


.split-hero-content {
    display: flex;
    align-items: center;
    gap: 40px; /* Add gap between image and text */
    flex: 1; /* Allow content to take up available space */
    min-width: 300px; /* Prevent content from getting too squished */
}

.split-hero-media {
    width: 50%;
    /* margin-right: 30px; */ /* Replaced by gap */
}

.split-hero-text {
    width: 50%;
}

.split-hero-image {
    width: 100%;
    max-width: 500px; /* Limit image size */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
    margin: 0 auto; /* Center if needed */
}

.split-hero h1 {
    font-size: 2.8rem; /* Adjusted size */
    font-weight: 700; /* Bolder */
    margin-bottom: 20px;
    line-height: 1.2;
    color: #212529; /* Darker heading color */
}

.split-hero p {
    font-size: 1.1rem; /* Adjusted size */
    margin-bottom: 30px;
    color: #6c757d; /* Softer paragraph color */
}

.get-started {
    padding: 12px 25px; /* Larger button padding */
    background-color: #007bff; /* Primary color */
    color: white;
    border: none;
    border-radius: 5px;
    margin-right: 10px;
    text-decoration: none; /* Ensure links look like buttons */
    display: inline-block; /* Proper alignment */
    font-weight: 500;
    transition: background-color 0.2s ease;
}
.get-started:hover {
    background-color: #0056b3;
    color: white;
}

.learn-more {
    padding: 12px 25px;
    background-color: white;
    color: #007bff; /* Primary color text */
    border: 1px solid #007bff; /* Primary color border */
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.learn-more:hover {
    background-color: #e7f3ff; /* Light primary background on hover */
    color: #0056b3;
}

/* Login/Register Area Styling */
.rightArea {
    width: 320px; /* Fixed width for the login area */
    flex-shrink: 0; /* Prevent shrinking */
    /* Removed padding, background, border from .rightArea itself */
    box-sizing: border-box;
    margin-left: auto; /* Push to the right if space allows */
}

.login-box {
    background-color: #fff; /* White background */
    padding: 30px; /* Add padding inside the box */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    border: 1px solid #eee; /* Light border */
}

.login-box h4 { /* Style for the title */
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: 600;
    color: #333;
}


.login-box form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between form elements */
}

.login-box input[type="email"],
.login-box input[type="password"] {
    width: 100%;
    padding: 12px; /* Consistent padding */
    border: 1px solid #ced4da; /* Standard border color */
    border-radius: 5px;
    box-sizing: border-box; /* Include padding in width */
    font-size: 1rem;
}
.login-box input[type="email"]:focus,
.login-box input[type="password"]:focus {
    border-color: #80bdff; /* Highlight on focus */
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}


.login-box .loginBtn {
    /* Inherit from .get-started for consistency */
    padding: 12px 25px;
    background-color: #28a745; /* Green color for continue/register */
    color: white;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    transition: background-color 0.2s ease;
    cursor: pointer; /* Add pointer cursor */
    width: 100%; /* Make button full width */
    text-align: center;
    font-size: 1rem;
}
.login-box .loginBtn:hover {
    background-color: #218838; /* Darker green on hover */
    color: white;
}

.login-box .helper-text {
    font-size: 0.85em; /* Slightly smaller helper text */
    color: #6c757d;
    text-align: center;
    margin-top: 0; /* Adjust spacing */
    margin-bottom: 5px; /* Add margin below */
    line-height: 1.4;
}

/* Remove Tab specific styles */
/*
.tabs { ... }
.tab-link { ... }
.tab-content { ... }
*/

/* How It Works Styling */
.how-it-works {
    padding: 60px 0;
    text-align: center;
}

.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 40px;
    gap: 20px; /* Add gap between items */
}

.gallery-item {
    width: calc(33.333% - 14px); /* Adjust width for gap */
    margin-bottom: 0; /* Removed margin, using gap */
}

.gallery-item img {
    width: 100%;
    border-radius: 8px; /* Add slight rounding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}

/* Features Section Styling */
.features {
    padding: 60px 0;
    text-align: center;
    background-color: #f8f9fa; /* Light background */
}

.tagline {
    font-weight: 600; /* Bolder tagline */
    color: #007bff; /* Primary color */
    margin-bottom: 10px;
    text-transform: uppercase; /* Uppercase tagline */
    letter-spacing: 1px;
}

.features h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #212529;
}
.features > .container > p { /* Target the main paragraph */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: #6c757d;
}

.feature-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center cards */
    margin-top: 40px;
    gap: 30px; /* Increased gap */
}

.feature-card {
    width: calc(33.333% - 20px); /* Adjust for gap */
    padding: 30px;
    background-color: #fff; /* White background for cards */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Softer shadow */
    text-align: left; /* Align text left within card */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}


.feature-card h3 {
    font-size: 1.25rem; /* Adjusted size */
    font-weight: 600; /* Semi-bold */
    margin-bottom: 15px;
    color: #007bff; /* Primary color for heading */
}
.feature-card p {
    font-size: 0.95rem;
    color: #6c757d;
}


/* Banner Styling */
.banner {
    background-color: #007bff; /* Primary color background */
    color: #fff;
    padding: 60px 0;
    text-align: center;
}

.subheading {
    font-weight: 500; /* Medium weight */
    margin-bottom: 10px;
    opacity: 0.9; /* Slightly transparent */
}

.banner h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 20px;
}
.banner p {
    opacity: 0.9;
    margin-bottom: 30px;
}

.subscribe-now {
    padding: 12px 25px;
    background-color: #fff; /* White button */
    color: #007bff; /* Primary color text */
    border: none;
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.subscribe-now:hover {
    background-color: #e7f3ff; /* Light primary background */
    color: #0056b3;
}


/* Testimonials Styling */
.testimonials {
    padding: 60px 0;
    text-align: center;
}
.testimonials h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #212529;
}
.testimonials > .container > p { /* Target the main paragraph */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: #6c757d;
    margin-bottom: 40px;
}


.testimonial-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center cards */
    margin-top: 40px;
    gap: 30px;
}

.testimonial-card {
    width: calc(33.333% - 20px);
    padding: 30px;
    border: 1px solid #eee; /* Lighter border */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Very subtle shadow */
    background-color: #fff;
}

.testimonial-logo {
    height: 30px; /* Smaller logo */
    margin-bottom: 20px;
    opacity: 0.7;
}

.quote {
    font-style: italic; /* Italic quote */
    color: #555;
    margin-bottom: 20px;
    font-size: 1.05rem;
}
/* Add quote marks visually */
.quote::before {
    content: '“';
    font-size: 1.5em;
    margin-right: 5px;
    color: #ccc;
}
.quote::after {
    content: '”';
    font-size: 1.5em;
    margin-left: 5px;
    color: #ccc;
}


.avatar {
    width: 50px; /* Smaller avatar */
    height: 50px;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    display: block;
}

.name {
    font-weight: 600; /* Semi-bold name */
    margin-bottom: 2px; /* Reduced margin */
    color: #333;
}
.company {
    font-size: 0.9em;
    color: #777;
}


/* FAQ Styling */
.faq {
    padding: 60px 0;
    text-align: center;
    background-color: #f8f9fa; /* Light background */
}
.faq h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #212529;
}
.faq > .container > p {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: #6c757d;
    margin-bottom: 15px; /* Adjusted margin */
}
.faq > .container > p a { /* Style link in paragraph */
    color: #007bff;
    text-decoration: underline;
}
.faq > .container > p a:hover {
    color: #0056b3;
}


.faq-grid {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    text-align: left; /* Align accordion text left */
}

.faq-column {
    width: 48%;
}

.accordion-item {
    border: 1px solid #ddd; /* Standard border */
    margin-bottom: 10px;
    border-radius: 5px; /* Rounded corners */
    overflow: hidden; /* Contain background */
    background-color: #fff; /* White background */
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    background-color: #fff; /* White header */
    transition: background-color 0.2s ease;
}
.accordion-header:hover {
    background-color: #f8f9fa; /* Light hover */
}


.accordion-header h3 {
    margin: 0;
    font-size: 1.05rem; /* Adjusted size */
    font-weight: 600; /* Semi-bold */
    color: #333;
}

.accordion-icon {
    font-size: 18px; /* Adjusted size */
    font-weight: bold;
    color: #007bff; /* Primary color icon */
    transition: transform 0.2s ease; /* Rotate icon */
}
/* Rotate icon when open - requires JS to add/remove an 'open' class */
/* .accordion-item.open .accordion-icon { transform: rotate(45deg); } */


.accordion-body {
    padding: 15px;
    display: none; /* Initially hide the body content */
    border-top: 1px solid #eee; /* Separator line */
    background-color: #fff;
}

.accordion-body p {
    margin: 0;
    font-size: 0.95rem;
    color: #555;
}

.contact-us {
    padding: 10px 20px;
    background-color: transparent;
    color: #007bff; /* Primary color */
    border: 1px solid #007bff; /* Primary color border */
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.contact-us:hover {
    background-color: #007bff;
    color: #fff;
}


/* Footer Styling */
footer {
    background-color: #343a40; /* Dark footer background */
    color: #adb5bd; /* Light text color */
    padding: 50px 0 30px 0; /* Adjusted padding */
    font-size: 0.9rem;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 20px; /* Add gap */
}

.footer-column {
    width: 22%; /* Adjust width */
    min-width: 150px; /* Minimum width */
    text-align: left;
    margin-bottom: 20px; /* Add margin for wrapping */
}
.footer-column:first-child { /* Style first column (logo/desc) */
     width: 28%;
}
.footer-column:first-child .logo {
    margin-bottom: 15px;
    filter: brightness(0) invert(1); /* Make logo white */
    opacity: 0.8;
}
.footer-column:first-child p {
    color: #ced4da; /* Slightly brighter text */
}


.footer-column h6 { /* Footer headings */
    color: #fff; /* White headings */
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 1rem;
}

.footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-column li {
    margin-bottom: 8px; /* Adjusted spacing */
}

.footer-column a {
    text-decoration: none;
    color: #adb5bd; /* Footer link color */
    transition: color 0.2s ease;
}
.footer-column a:hover {
    color: #fff; /* White on hover */
    text-decoration: underline;
}

footer hr { /* Footer separator */
    border-top: 1px solid #495057; /* Darker border */
    margin-top: 30px;
    margin-bottom: 20px;
}

.copyright {
    text-align: center;
    margin-top: 20px;
    font-size: 0.85rem; /* Smaller copyright */
    color: #6c757d; /* Grey copyright text */
}

/* Dashboard/App Specific Styles (from app.tt section) */
.dashboard { padding: 40px 0; }
.sync-setup { display: flex; justify-content: space-around; margin: 20px 0; gap: 20px; flex-wrap: wrap; }
.sync-panel { width: calc(50% - 10px); padding: 20px; background: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); box-sizing: border-box; }
.sync-panel h3 { margin-bottom: 15px; font-size: 1.2rem; font-weight: 600; color: #333; }
.cloud-option { display: flex; align-items: center; margin: 10px 0; padding: 10px; border: 1px solid #eee; border-radius: 5px; }
.cloud-option img { width: 24px; height: 24px; margin-right: 10px; }
.cloud-option span { flex-grow: 1; } /* Make text take available space */
.cloud-option button { margin-left: auto; padding: 5px 10px; font-size: 0.85rem; } /* Use call-to-action class */
.folder-selected { margin-top: 15px; font-style: italic; color: #555; background-color: #f8f9fa; padding: 8px; border-radius: 4px; }
.sync-panel button.learn-more { /* Style select folder button */
    display: block;
    width: 100%;
    margin-top: 15px;
    text-align: center;
    padding: 8px 15px;
    font-size: 0.9rem;
}
.sync-panel button.learn-more:disabled {
    background-color: #e9ecef;
    border-color: #ced4da;
    color: #6c757d;
    cursor: not-allowed;
}

.sync-settings { margin: 30px 0; padding: 20px; background: #f8f9fa; border-radius: 8px; text-align: center; border: 1px solid #eee; }
.sync-settings h3 { margin-bottom: 15px; font-size: 1.2rem; font-weight: 600; }
.sync-settings label { display: inline-block; margin: 5px 15px; cursor: pointer; }
.sync-settings input[type="radio"], .sync-settings input[type="checkbox"] { margin-right: 5px; }

.start-sync {
    display: block;
    width: 100%;
    max-width: 300px; /* Limit width */
    margin: 30px auto 0 auto; /* Center button */
    padding: 15px;
    background: #28a745; /* Green color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    transition: background-color 0.2s ease;
}
.start-sync:hover {
    background-color: #218838;
}

.more-clouds { margin-top: 10px; text-align: center; }
.more-clouds a { color: #007bff; text-decoration: underline; cursor: pointer; }
.more-clouds-content { display: none; margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px; }
.sync-history { margin-top: 40px; }
.sync-history h2 { text-align: center; margin-bottom: 20px; font-size: 1.5rem; font-weight: 600; }
.sync-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.sync-table th, .sync-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #dee2e6; }
.sync-table th { background: #f8f9fa; font-weight: 600; color: #495057; }
.sync-table td a { color: #007bff; text-decoration: none; }
.sync-table td a:hover { text-decoration: underline; }

/* Folder Browser Styles */
.folder-browser {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    margin-top: 10px;
}

.folder-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
    min-height: 40px;
}

.breadcrumb-item {
    color: #007bff;
    cursor: pointer;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 4px;
    border-radius: 3px;
}
.breadcrumb-item:hover { background: #e9ecef; }
.breadcrumb-item.current { color: #333; cursor: default; font-weight: 500; }
.breadcrumb-item.current:hover { background: transparent; }
.breadcrumb-sep { color: #aaa; margin: 0 2px; }

.folder-search {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}
.folder-search input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 0.9rem;
}
.folder-search input:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
}

.folder-list-container {
    position: relative;
}

.folder-list {
    max-height: 350px;
    min-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}

.folder-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}
.folder-item:hover, .folder-item.focused { background: #e8f4ff; }
.folder-item:last-child { border-bottom: none; }
.folder-item-icon { width: 20px; margin-right: 10px; color: #6c757d; flex-shrink: 0; }
.folder-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.folder-empty {
    padding: 20px;
    text-align: center;
    color: #666;
}
.folder-error {
    color: #dc3545;
}

.folder-actions {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
}

.folder-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #e9ecef;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.folder-selected {
    margin-top: 10px;
    font-weight: bold;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
}
.folder-selected.selected {
    background: #d4edda;
    color: #155724;
}

/* Folder browser buttons */
.btn-secondary {
    padding: 8px 16px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
}
.btn-secondary:hover { background: #5a6268; }
.btn-secondary:disabled {
    background: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
}

.btn-primary {
    padding: 8px 16px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
}
.btn-primary:hover { background: #0069d9; }

/* Additional styles specific to pricing page */
.pricing-section { padding: 60px 0; text-align: center; }
.pricing-section h2 { font-size: 2.25rem; font-weight: 700; margin-bottom: 20px; color: #212529; }
.pricing-section > .container > p { max-width: 700px; margin-left: auto; margin-right: auto; color: #6c757d; margin-bottom: 40px; }

.pricing-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; margin-top: 20px; }
.pricing-card {
    width: 280px; /* Adjusted width */
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    border: 1px solid #eee;
    display: flex;
    flex-direction: column; /* Align items vertically */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.pricing-card h3 { margin: 0 0 15px 0; font-size: 1.3rem; font-weight: 600; color: #333; }
.pricing-card .price { font-size: 2.5rem; font-weight: 700; color: #007bff; margin: 10px 0 20px 0; line-height: 1; }
.pricing-card .price span { font-size: 1rem; color: #6c757d; font-weight: 400; }
.pricing-card ul { list-style: none; padding: 0; text-align: left; margin-bottom: 30px; flex-grow: 1; /* Make list grow */ }
.pricing-card ul li { margin: 10px 0; font-size: 0.95rem; color: #555; }
.pricing-card ul li:before { content: "✓"; color: #28a745; margin-right: 8px; font-weight: bold; }
.pricing-card .cta-button {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: auto; /* Push button to bottom */
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none; /* For links styled as buttons */
    text-align: center;
    font-weight: 500;
    transition: background-color 0.2s ease;
}
.pricing-card .cta-button:hover {
    background-color: #0056b3;
}

.pricing-card.free .price { color: #28a745; }
.pricing-card.free .cta-button { background: #28a745; }
.pricing-card.free .cta-button:hover { background: #218838; }

.pricing-card.team { border-top: 4px solid #6c757d; } /* Highlight team plan */
.pricing-card.team .price { color: #6c757d; }
.pricing-card.team .cta-button { background: #6c757d; }
.pricing-card.team .cta-button:hover { background: #5a6268; }


/* contact Page-specific styles */
.contact-section { padding: 60px 0; text-align: center; }
.contact-section h2 { font-size: 2.25rem; font-weight: 700; margin-bottom: 20px; color: #212529; }
.contact-section > .container > p { max-width: 700px; margin-left: auto; margin-right: auto; color: #6c757d; margin-bottom: 40px; }

.contact-form { max-width: 600px; margin: 0 auto; text-align: left; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ced4da;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1rem;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.contact-form textarea { height: 150px; }
.contact-form .send-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 12px 25px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 500;
    transition: background-color 0.2s ease;
    display: inline-block; /* Align properly */
}
.contact-form .send-btn:hover {
    background-color: #0056b3;
}
.contact-form .g-recaptcha { /* Style recaptcha container */
    margin: 20px 0;
    display: inline-block; /* Center if needed */
}


.faq-section { padding: 60px 0; background-color: #f8f9fa; } /* Match FAQ section on index */
/* FAQ Grid/Column/Accordion styles are shared, defined earlier */


/* Profile Page-specific styles */
.profile-section { padding: 60px 0; }
.profile-section h2 { text-align: center; font-size: 2rem; font-weight: 700; margin-bottom: 15px; color: #212529; }
.profile-section > .container > p { text-align: center; max-width: 700px; margin-left: auto; margin-right: auto; color: #6c757d; margin-bottom: 40px; }

.profile-form { max-width: 700px; margin: 0 auto; background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border: 1px solid #eee; }
.profile-row { display: flex; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.profile-label { width: 180px; text-align: right; padding-right: 20px; font-weight: 600; color: #495057; box-sizing: border-box; }
.profile-input { flex: 1; text-align: left; box-sizing: border-box; min-width: 250px; /* Prevent excessive shrinking */ }
.profile-input input[type="email"],
.profile-input input[type="password"],
.profile-input input[type="text"],
.profile-input span {
    width: 100%;
    padding: 10px 12px; /* Adjusted padding */
    border: 1px solid #ced4da;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1rem;
}
.profile-input input[type="email"]:focus,
.profile-input input[type="password"]:focus,
.profile-input input[type="text"]:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.profile-input span { display: inline-block; background: #e9ecef; color: #495057; border: 1px solid #ced4da; } /* Style span like disabled input */
.profile-input a { margin-left: 10px; color: #007bff; text-decoration: none; font-size: 0.9rem; }
.profile-input a:hover { text-decoration: underline; }

.profile-input input[type="submit"].call-to-action { /* Target specific submit buttons */
    background: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    width: auto; /* Don't force full width */
    padding: 10px 20px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}
.profile-input input[type="submit"].call-to-action:hover {
    background-color: #0056b3;
}

.profile-input .coupon-row { display: flex; gap: 10px; }
.profile-input .coupon-row input[type="text"] { flex-grow: 1; } /* Allow text input to grow */
.profile-input .coupon-row input[type="submit"] { width: auto; background: #28a745; } /* Green for apply */
.profile-input .coupon-row input[type="submit"]:hover { background: #218838; }

.feedback { margin: 15px 0; font-style: italic; text-align: center; min-height: 1.2em; /* Reserve space */ }
.feedback span { display: block; } /* Ensure messages are on separate lines */

.profile-form hr { margin: 30px 0; border: 0; border-top: 1px solid #eee; }

.profile-input a[onclick*="confirmDelete"] { /* Style delete link */
    color: #dc3545; /* Red color */
    text-decoration: none;
    font-size: 0.9rem;
}
.profile-input a[onclick*="confirmDelete"]:hover {
    color: #c82333;
    text-decoration: underline;
}
.profile-input p { /* Style note below delete link */
    font-size: 0.85em;
    color: #6c757d;
    margin-top: 5px;
}


@media (max-width: 992px) { /* Adjust breakpoint for login box */
    .split-hero .container {
        flex-direction: column; /* Stack content and login area */
        gap: 30px;
    }
    .split-hero-content {
        /* Allow content to take full width when stacked */
        flex-basis: auto;
    }
    .rightArea {
        width: 100%; /* Login area takes full width */
        max-width: 400px; /* Limit max width */
        margin: 0 auto; /* Center */
        padding: 0; /* Remove side padding */
        margin-left: auto; /* Keep auto margin */
        margin-right: auto;
    }
    .login-box {
        margin-top: 20px; /* Add space above login box */
    }
}


@media (max-width: 768px) {
    .split-hero-content { flex-direction: column; text-align: center; }
    .split-hero-media, .split-hero-text { width: 100%; margin-right: 0; }
    .split-hero-media { margin-bottom: 30px; }
    /* .rightArea already handled above */

    .feature-grid, .testimonial-grid, .pricing-grid { justify-content: center; }
    .feature-card, .testimonial-card, .pricing-card { width: calc(50% - 15px); } /* Two columns */

    .faq-grid { flex-direction: column; }
    .faq-column { width: 100%; }

    .profile-row { flex-direction: column; align-items: flex-start; margin-bottom: 15px; }
    .profile-label, .profile-input { width: 100%; text-align: left; }
    .profile-label { padding: 0 0 5px 0; }

    .footer-grid { justify-content: flex-start; }
    .footer-column { width: 45%; } /* Two columns */
    .footer-column:first-child { width: 100%; margin-bottom: 20px; } /* Logo column full width */

    nav ul { flex-direction: column; align-items: flex-start; } /* Stack nav items */
    nav li { margin: 10px 0; }
    header .container { flex-direction: column; align-items: flex-start; } /* Stack logo and nav */
    header nav { margin-top: 15px; width: 100%; }
}

@media (max-width: 576px) {
    .feature-card, .testimonial-card, .pricing-card { width: 90%; } /* Single column */
    .footer-column { width: 100%; } /* Single column */
    .split-hero h1 { font-size: 2.2rem; }
    .get-started, .learn-more { display: block; width: 100%; margin: 10px 0 0 0; text-align: center; } /* Stack buttons */
}