/* ========================================== */
/* BROWSER COMPATIBILITY & RESET             */
/* ========================================== */

/* Force consistent rendering across browsers */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Normalize differences between browsers */
img {
    border: 0;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Fix Chrome's default button styling */
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: none;
    cursor: pointer;
}

/* ========================================== */
/* SIMPLIFIED DESCRIBBLER CSS                */
/* ========================================== */
/* This is a clean, commented version for beginners */

* {
    margin: 0;         /* Remove default spacing */
    padding: 0;        /* Remove default spacing */
    box-sizing: border-box; /* Makes sizing calculations easier */
    /* Better cross-browser consistency */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Sets the font */
    line-height: 1.6;  /* Space between text lines */
    color: #333;       /* Dark gray text color */
    background-color: #f8f9fa; /* Light gray background */
    /* Fix for Chrome rendering issues */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Ensure consistent box model */
    min-height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scrolling issues */
}

.container {
    max-width: 1200px;  /* Content can't be wider than 1200px */
    margin: 0 auto;     /* Centers the container */
    padding: 0 20px;    /* Adds space on left and right */
}

/* ========================================== */
/* NAVIGATION BAR */
/* ========================================== */

.navbar {
    background: #fff;            /* White background */
    padding: 0.5rem 0;          /* Less space above and below */
    position: fixed;            /* Stays at top when scrolling */
    width: 100%;               /* Full width */
    top: 0;                    /* Positioned at very top */
    z-index: 1000;             /* Appears above other content */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Subtle shadow */
}

.nav-container {
    max-width: 1200px;         /* Max width like other containers */
    margin: 0 auto;            /* Centers the nav content */
    padding: 0 20px;           /* Space on sides */
    display: flex;             /* Places items side by side */
    justify-content: space-between; /* Spreads items apart */
    align-items: center;       /* Centers items vertically */
    /* Cross-browser flex support */
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    -webkit-align-items: center;
}

.nav-center {
    flex: 1;                   /* Takes remaining space */
    display: flex;             /* For centering */
    justify-content: center;   /* Centers content */
    /* Cross-browser support */
    -webkit-flex: 1;
    display: -webkit-flex;
    -webkit-justify-content: center;
}

.nav-logo h2 {
    color: #6c5ce7;           /* Purple color */
    font-size: 1.5rem;        /* Smaller, more reasonable text */
}

.nav-menu {
    display: flex;             /* Places buttons side by side */
    align-items: center;       /* Centers vertically */
    gap: 1.5rem;              /* Less space between buttons */
}

.auth-btn {
    background: #4285f4;       /* Google blue color */
    color: white;              /* White text */
    border: none;              /* Removes button border */
    padding: 0.25rem 0.6rem;   /* Much smaller padding */
    border-radius: 12px;       /* Smaller rounded corners */
    cursor: pointer;           /* Hand cursor on hover */
    font-weight: 500;          /* Medium bold text */
    transition: all 0.3s;      /* Smooth hover animation */
    display: flex;             /* For icon and text side by side */
    align-items: center;       /* Centers content vertically */
    gap: 0.25rem;             /* Minimal space between icon and text */
    font-size: 0.7rem;         /* Very small text size */
    height: 28px;              /* Fixed compact height */
}

.auth-btn:hover {
    background: #3367d6;       /* Darker blue on hover */
    transform: translateY(-1px); /* Moves button up slightly */
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3); /* Shadow effect */
}

/* User profile image styling (for when user is signed in) */
.user-profile-img {
    width: 20px;               /* Small profile image */
    height: 20px;              /* Small profile image */
    border-radius: 50%;        /* Makes image perfectly circular */
    border: 1px solid white;   /* White border around image */
    object-fit: cover;         /* Ensures image fills circle properly */
}

/* Google profile image specifically */
.auth-btn img {
    width: 18px !important;    /* Force small size for any img in auth button */
    height: 18px !important;   /* Force small size for any img in auth button */
    border-radius: 50% !important; /* Force circular shape */
    border: 1px solid rgba(255,255,255,0.3) !important; /* Subtle border */
    object-fit: cover !important; /* Force proper cropping */
    flex-shrink: 0;            /* Prevent shrinking */
}

/* Auth button when user is signed in with profile */
.auth-btn.signed-in {
    padding: 0.2rem 0.5rem;    /* Even smaller padding for profile */
    gap: 0.4rem;              /* Space for profile image */
}

/* ========================================== */
/* HERO SECTION (Main banner area) */
/* ========================================== */

.hero {
    padding: 120px 0 60px;     /* Increased top padding to ensure hero and button are below navbar */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Purple gradient */
    color: white;              /* All text is white */
    display: flex;             /* For centering */
    align-items: center;       /* Centers content vertically */
    min-height: 100vh;         /* Takes up full screen height */
    /* Ensure consistent cross-browser rendering */
    display: -webkit-flex;
    -webkit-align-items: center;
    position: relative;        /* Create stacking context */
}

.hide-hero-btn {
    position: absolute;
    top: calc(56px + 20px); /* 56px is the default navbar height (0.5rem top/bottom + content), adjust if needed */
    right: 30px;
    background: #222;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.5rem 1.2rem;
    font-size: 1rem;
    cursor: pointer;
    z-index: 10;
    opacity: 0.85;
    transition: background 0.2s, opacity 0.2s;
}
.hide-hero-btn:hover {
    background: #444;
    opacity: 1;
}
    width: 100%;               /* Full width */
    box-sizing: border-box;    /* Include padding in height */
}

.hero-container {
    max-width: 1200px;         /* Same max width as other containers */
    margin: 0 auto;            /* Centers the container */
    padding: 0 20px;           /* Space on sides */
    width: 100%;               /* Uses full available width */
}

.hero-content {
    display: grid;                    /* Uses CSS grid layout */
    grid-template-columns: 1fr;       /* Single column layout */
    grid-template-rows: auto auto;    /* Two rows: images then text */
    gap: 3rem;                       /* Space between sections */
    align-items: center;             /* Centers content horizontally */
    justify-items: center;           /* Centers grid items */
    height: 100%;                    /* Full height */
    text-align: center;              /* Center align text */
    /* Fallback for older browsers */
    display: -webkit-grid;
    -webkit-grid-template-columns: 1fr;
    -webkit-grid-template-rows: auto auto;
    -webkit-align-items: center;
    -webkit-justify-items: center;
}

.hero-text {
    display: flex;             /* Stacks text elements */
    flex-direction: column;    /* From top to bottom */
    align-items: center;       /* Centers content horizontally */
    justify-content: center;   /* Centers content vertically */
    max-width: 800px;          /* Limits text width for readability */
}

/* Main title styling */
.hero-title {
    font-size: 3.5rem;         /* Very large text */
    font-weight: 700;          /* Very bold */
    margin-bottom: 1rem;       /* Space below title */
    line-height: 1.2;          /* Tight line spacing */
    /* Simplified to solid white for better browser compatibility */
    color: #ffffff;            /* Solid white text */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Description text styling */
.hero-description {
    font-size: 1.3rem;         /* Medium-large text */
    margin-bottom: 2.5rem;     /* Space below */
    opacity: 0.95;             /* Slightly transparent */
    line-height: 1.6;          /* Space between lines */
}

/* Call-to-action button */
.cta-btn {
    background: linear-gradient(45deg, #ff6b6b, #ff8e8e); /* Red gradient */
    color: white;              /* White text */
    border: none;              /* No border */
    padding: 1.2rem 2.5rem;    /* Space inside button */
    font-size: 1.2rem;         /* Text size */
    font-weight: 600;          /* Bold text */
    border-radius: 50px;       /* Very rounded corners */
    cursor: pointer;           /* Hand cursor */
    transition: all 0.3s ease; /* Smooth hover animation */
    display: inline-flex;      /* Icon and text side by side */
    align-items: center;       /* Centers content vertically */
    gap: 0.8rem;              /* Space between icon and text */
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4); /* Shadow effect */
    align-self: center;        /* Centers the button */
}

.cta-btn:hover {
    transform: translateY(-3px); /* Moves up on hover */
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6); /* Bigger shadow */
    background: linear-gradient(45deg, #ff5252, #ff7979); /* Darker red */
}

.cta-btn i {
    font-size: 1.1rem;         /* Icon size */
}

/* ========================================== */
/* HERO IMAGES (Stacked above text layout) */
/* ========================================== */

.hero-images {
    display: flex;             /* Places images side by side */
    gap: 2rem;                /* Space between images */
    width: 100%;              /* Full width */
    max-width: 1200px;        /* Maximum width for large screens */
    justify-content: center;   /* Centers the image pair */
    /* Better cross-browser support */
    display: -webkit-flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
}

.hero-image {
    width: calc(50% - 1rem);   /* Each image takes half width minus gap */
    height: 70vh;             /* Larger height - 70% of screen height */
    max-height: 600px;        /* Maximum height for very large screens */
    object-fit: contain;      /* Shows full image without cropping */
    border: none;             /* No border */
    border-radius: 8px;       /* Slightly rounded corners */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    /* Ensure consistent rendering */
    -webkit-object-fit: contain;
    -o-object-fit: contain;
    flex-shrink: 0;           /* Prevents shrinking */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

.hero-image:hover {
    transform: translateY(-5px); /* Slight lift on hover */
}

/* ========================================== */
/* RESPONSIVE DESIGN FOR DIFFERENT SCREENS */
/* ========================================== */

/* TABLET SCREENS (769px to 1024px wide) */
@media (max-width: 1024px) and (min-width: 769px) {
    .hero {
        padding: 100px 0 50px; /* Less padding */
        min-height: 80vh;      /* Smaller height */
    }
    
    .hero-content {
        gap: 1.5rem;          /* Less space between columns */
    }
    
    .hero-title {
        font-size: 2.8rem;    /* Smaller title */
    }
    
    .hero-description {
        font-size: 1.15rem;   /* Smaller description */
    }
    
    .hero-image {
        height: 50vh;         /* Shorter images */
    }
}

/* MOBILE PHONES (768px and smaller) */
@media (max-width: 768px) {
    /* Navigation adjustments */
    .nav-container {
        padding: 0 15px;     /* Less padding */
        flex-wrap: wrap;     /* Allow items to wrap */
        gap: 1rem;          /* Space between items */
    }
    
    .nav-logo h2 {
        font-size: 1.5rem;   /* Smaller logo */
    }
    
    .auth-btn {
        padding: 0.4rem 1rem; /* Smaller button */
        font-size: 0.8rem;    /* Smaller text */
        gap: 0.3rem;         /* Less space */
    }
    
    /* Hero section mobile layout */
    .hero {
        padding: 90px 0 40px; /* Less padding */
        min-height: 100vh;    /* Full screen height */
    }
    
    .hero-content {
        grid-template-columns: 1fr; /* Single column - stack everything */
        gap: 2rem;           /* Space between text and images */
        text-align: center;  /* Center all text */
        /* Cross-browser grid support */
        display: -webkit-grid;
        -webkit-grid-template-columns: 1fr;
        display: grid;
    }
    
    .hero-title {
        font-size: 2.2rem;   /* Smaller title */
        margin-bottom: 0.8rem; /* Less space below */
    }
    
    .hero-description {
        font-size: 1rem;     /* Smaller description */
        margin-bottom: 1.5rem; /* Less space below */
    }
    
    .cta-btn {
        padding: 1rem 2rem;  /* Smaller button */
        font-size: 1.1rem;   /* Smaller text */
        align-self: center;  /* Center the button */
    }
    
    /* Images for mobile - stack vertically */
    .hero-images {
        flex-direction: column; /* Stack images vertically */
        gap: 0;              /* No space between images */
        /* Cross-browser flex support */
        -webkit-flex-direction: column;
        display: -webkit-flex;
        display: flex;
    }
    
    .hero-image {
        width: 100%;         /* Full width */
        height: 40vh;        /* Each image takes 40% of screen height */
        /* Ensure consistent mobile image rendering */
        -webkit-object-fit: cover;
        -o-object-fit: cover;
        object-fit: cover;
    }
}

/* SMALL MOBILE PHONES (480px and smaller) */
@media (max-width: 480px) {
    .hero {
        padding: 80px 0 30px; /* Even less padding */
    }
    
    .hero-content {
        gap: 1.5rem;         /* Less space */
    }
    
    .hero-title {
        font-size: 1.8rem;   /* Smaller title */
        margin-bottom: 0.5rem; /* Less space */
    }
    
    .hero-description {
        font-size: 0.95rem;  /* Smaller description */
        margin-bottom: 1rem; /* Less space */
    }
    
    .hero-image {
        height: 35vh;        /* Shorter images on small screens */
    }
    
    .cta-btn {
        padding: 0.8rem 1.5rem; /* Smaller button */
        font-size: 1rem;     /* Smaller text */
    }
}

/* ========================================== */
/* UPLOAD SECTION */
/* ========================================== */

.upload-section {
    padding: 80px 0;         /* Space above and below */
    background: white;       /* White background */
}

.upload-section h2 {
    text-align: center;      /* Centers the heading */
    margin-bottom: 3rem;     /* Space below heading */
    font-size: 2.5rem;       /* Large text */
    color: #333;            /* Dark gray */
}

.upload-area {
    border: 3px dashed #6c5ce7;    /* Purple dashed border */
    border-radius: 20px;           /* Rounded corners */
    padding: 4rem 2rem;            /* Space inside */
    text-align: center;            /* Centers content */
    background: #f8f9ff;           /* Light purple background */
    transition: all 0.3s;          /* Smooth hover effect */
    cursor: pointer;               /* Hand cursor */
    position: relative;            /* For drag effects */
    overflow: hidden;              /* Hides overflow */
    margin: 0 auto;               /* Centers the area */
    max-width: 600px;             /* Maximum width */
}

.upload-area:hover {
    border-color: #5a4fcf;         /* Darker purple on hover */
    background: #f0f2ff;           /* Lighter background */
}

.upload-area.dragover {
    border-color: #ff6b6b;         /* Red border when dragging files */
    background: #fff5f5;           /* Light red background */
    transform: scale(1.02);        /* Slightly enlarges */
}

.upload-content i {
    font-size: 4rem;               /* Large icon */
    color: #6c5ce7;               /* Purple color */
    margin-bottom: 1rem;          /* Space below icon */
}

.upload-content h3 {
    font-size: 1.5rem;            /* Large text */
    margin-bottom: 0.5rem;        /* Space below */
    color: #333;                  /* Dark gray */
}

.upload-content p {
    color: #666;                  /* Medium gray */
    font-size: 1.1rem;            /* Medium text */
}

#file-input {
    display: none;                /* Hides the default file input */
}

/* ========================================== */
/* FEATURES SECTION */
/* ========================================== */

.features {
    padding: 80px 0;              /* Space above and below */
    background: white;            /* White background */
}

.features h2 {
    text-align: center;           /* Centers heading */
    margin-bottom: 4rem;          /* Space below */
    font-size: 2.5rem;            /* Large text */
    color: #333;                  /* Dark gray */
}

.features-grid {
    display: grid;                               /* Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 2rem;                                  /* Space between cards */
}

.feature-card {
    text-align: center;           /* Centers content */
    padding: 2rem;               /* Space inside card */
    border-radius: 20px;         /* Rounded corners */
    background: #f8f9ff;         /* Light purple background */
    transition: transform 0.3s, box-shadow 0.3s; /* Hover effects */
}

.feature-card:hover {
    transform: translateY(-10px); /* Moves up on hover */
    box-shadow: 0 20px 40px rgba(108, 92, 231, 0.1); /* Shadow effect */
}

.feature-card i {
    font-size: 3rem;             /* Large icon */
    color: #6c5ce7;              /* Purple color */
    margin-bottom: 1rem;         /* Space below */
}

.feature-card h3 {
    font-size: 1.3rem;           /* Medium-large text */
    margin-bottom: 1rem;         /* Space below */
    color: #333;                 /* Dark gray */
}

.feature-card p {
    color: #666;                 /* Medium gray */
    line-height: 1.6;            /* Space between lines */
}

/* ========================================== */
/* PRICING SECTION */
/* ========================================== */

.pricing {
    padding: 80px 0;             /* Space above and below */
    background: #f8f9fa;         /* Light gray background */
}

.pricing h2 {
    text-align: center;          /* Centers heading */
    margin-bottom: 4rem;         /* Space below */
    font-size: 2.5rem;           /* Large text */
    color: #333;                 /* Dark gray */
}

.pricing-grid {
    display: flex;               /* Flexbox layout */
    justify-content: center;     /* Centers content */
    align-items: center;         /* Centers vertically */
}

.pricing-card {
    max-width: 400px;            /* Maximum width */
    margin: 0 auto;              /* Centers card */
    background: white;           /* White background */
    padding: 3rem 2rem;          /* Space inside */
    border-radius: 20px;         /* Rounded corners */
    text-align: center;          /* Centers content */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* Shadow effect */
    position: relative;          /* For colored top border */
    overflow: hidden;            /* Hides overflow */
}

.pricing-card::before {
    content: '';                 /* Creates empty element */
    position: absolute;          /* Positioned at top */
    top: 0;                     /* At very top */
    left: 0;                    /* Left edge */
    right: 0;                   /* Right edge */
    height: 5px;                /* Thin height */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Purple gradient */
}

.pricing-card h3 {
    font-size: 1.5rem;          /* Medium-large text */
    margin-bottom: 1rem;        /* Space below */
    color: #333;                /* Dark gray */
}

.price {
    margin-bottom: 2rem;        /* Space below */
}

.currency {
    font-size: 1.5rem;          /* Medium text */
    color: #666;                /* Medium gray */
}

.amount {
    font-size: 4rem;            /* Very large text */
    font-weight: bold;          /* Bold */
    color: #6c5ce7;             /* Purple */
}

.period {
    font-size: 1.2rem;          /* Medium text */
    color: #666;                /* Medium gray */
}

.features-list {
    list-style: none;           /* Removes bullet points */
    margin-bottom: 2rem;        /* Space below */
}

.features-list li {
    padding: 0.5rem 0;          /* Space above and below each item */
    display: flex;              /* Icon and text side by side */
    align-items: center;        /* Centers vertically */
    gap: 0.5rem;               /* Space between icon and text */
}

.features-list i {
    color: #27ae60;             /* Green checkmark */
    font-size: 1.1rem;          /* Icon size */
}

.subscribe-btn {
    width: 100%;                /* Full width */
    background: #6c5ce7;        /* Purple background */
    color: white;               /* White text */
    border: none;               /* No border */
    padding: 1rem 2rem;         /* Space inside */
    font-size: 1.1rem;          /* Text size */
    border-radius: 10px;        /* Rounded corners */
    cursor: pointer;            /* Hand cursor */
    transition: background 0.3s; /* Hover effect */
    margin-bottom: 1rem;        /* Space below */
}

.subscribe-btn:hover {
    background: #5a4fcf;        /* Darker purple on hover */
}

.trial-note {
    color: #666;                /* Medium gray */
    font-size: 0.9rem;          /* Small text */
}

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

.footer {
    background: #2c3e50;        /* Dark blue-gray */
    color: white;               /* White text */
    padding: 3rem 0 1rem;       /* Space above and below */
    margin-top: 4rem;           /* Space above footer */
}

.footer-content {
    display: grid;              /* Grid layout */
    grid-template-columns: 2fr 1fr; /* Two columns, first is wider */
    gap: 3rem;                  /* Space between columns */
    margin-bottom: 2rem;        /* Space below */
}

.footer-section h3 {
    color: #6c5ce7;             /* Purple heading */
    margin-bottom: 1rem;        /* Space below */
    font-size: 1.5rem;          /* Large text */
}

.footer-section h4 {
    color: #ecf0f1;             /* Light gray */
    margin-bottom: 1rem;        /* Space below */
    font-size: 1.2rem;          /* Medium-large text */
}

.footer-section p {
    color: #bdc3c7;             /* Light gray */
    line-height: 1.6;           /* Space between lines */
    margin-bottom: 1rem;        /* Space below */
}

.support-email {
    display: inline-flex;       /* Icon and text side by side */
    align-items: center;        /* Centers vertically */
    gap: 0.5rem;               /* Space between icon and text */
    color: #6c5ce7;             /* Purple color */
    text-decoration: none;      /* Removes underline */
    font-weight: 500;           /* Medium bold */
    padding: 0.5rem 1rem;       /* Space inside */
    border: 2px solid #6c5ce7;  /* Purple border */
    border-radius: 25px;        /* Rounded corners */
    transition: all 0.3s ease;  /* Hover effect */
}

.support-email:hover {
    background: #6c5ce7;        /* Purple background on hover */
    color: white;               /* White text on hover */
    transform: translateY(-2px); /* Moves up slightly */
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3); /* Shadow effect */
}

.support-email i {
    font-size: 1rem;            /* Icon size */
}

.footer-bottom {
    border-top: 1px solid #34495e; /* Top border */
    padding-top: 2rem;          /* Space above */
    text-align: center;         /* Centers text */
}

.footer-bottom p {
    color: #95a5a6;             /* Light gray */
    font-size: 0.9rem;          /* Small text */
    margin: 0;                  /* No margin */
}

/* ========================================== */
/* ADDITIONAL STYLES FOR APP FUNCTIONALITY */
/* ========================================== */

/* Pages display in navigation */
.pages-display {
    background: rgba(108, 92, 231, 0.1); /* Light purple background */
    border: 2px solid #6c5ce7;  /* Purple border */
    border-radius: 20px;        /* Rounded corners */
    padding: 8px 16px;          /* Space inside */
    display: flex;              /* Content side by side */
    align-items: center;        /* Centers vertically */
    gap: 8px;                   /* Space between elements */
    font-weight: 600;           /* Bold text */
    color: #6c5ce7;             /* Purple text */
    cursor: pointer;            /* Hand cursor */
    transition: all 0.3s ease;  /* Hover effect */
}

.pages-display:hover {
    background: rgba(108, 92, 231, 0.2); /* Darker background on hover */
    transform: translateY(-1px); /* Moves up slightly */
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3); /* Shadow effect */
}

.pages-display i {
    font-size: 1.1rem;          /* Icon size */
}

#pages-count {
    font-size: 1.2rem;          /* Larger text for number */
    font-weight: 700;           /* Very bold */
}

.pages-label {
    font-size: 0.9rem;          /* Smaller text */
    opacity: 0.8;               /* Slightly transparent */
}

/* Loading overlay */
.loading-overlay {
    position: fixed;            /* Covers entire screen */
    top: 0;                    /* Top edge */
    left: 0;                   /* Left edge */
    width: 100%;               /* Full width */
    height: 100%;              /* Full height */
    background: rgba(255,255,255,0.95); /* Semi-transparent white */
    display: none;             /* Hidden by default */
    justify-content: center;   /* Centers content */
    align-items: center;       /* Centers content */
    flex-direction: column;    /* Stacks elements vertically */
    z-index: 3000;            /* Appears above everything */
}

.spinner {
    width: 50px;               /* Spinner size */
    height: 50px;              /* Spinner size */
    border: 5px solid #f3f3f3; /* Light gray border */
    border-top: 5px solid #6c5ce7; /* Purple top border */
    border-radius: 50%;        /* Makes it circular */
    animation: spin 1s linear infinite; /* Spinning animation */
    margin-bottom: 1rem;       /* Space below */
}

@keyframes spin {
    0% { transform: rotate(0deg); }   /* Start position */
    100% { transform: rotate(360deg); } /* End position (full rotation) */
}

/* File list styles */
.file-list {
    margin: 2rem 0;            /* Space above and below */
}

.file-item {
    background: white;         /* White background */
    padding: 1rem;            /* Space inside */
    margin: 0.5rem 0;         /* Space above and below */
    border-radius: 10px;      /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Shadow effect */
    display: flex;            /* Content side by side */
    justify-content: space-between; /* Spreads content apart */
    align-items: center;      /* Centers vertically */
}

.file-info {
    display: flex;            /* Icon and text side by side */
    align-items: center;      /* Centers vertically */
    gap: 1rem;               /* Space between icon and text */
}

.file-info i {
    font-size: 1.5rem;        /* Icon size */
    color: #6c5ce7;           /* Purple color */
}

.process-btn {
    width: 100%;              /* Full width */
    background: #6c5ce7;      /* Purple background */
    color: white;             /* White text */
    border: none;             /* No border */
    padding: 1rem 2rem;       /* Space inside */
    font-size: 1.1rem;        /* Text size */
    border-radius: 10px;      /* Rounded corners */
    cursor: pointer;          /* Hand cursor */
    transition: background 0.3s; /* Hover effect */
    margin-top: 2rem;         /* Space above */
}

.process-btn:hover:not(:disabled) {
    background: #5a4fcf;      /* Darker purple on hover */
}

.process-btn:disabled {
    background: #ccc;         /* Gray when disabled */
    cursor: not-allowed;      /* Shows disabled cursor */
}

/* Results section */
.results-section {
    padding: 80px 0;          /* Space above and below */
    background: #f8f9fa;      /* Light gray background */
}

.results-container {
    background: white;        /* White background */
    border-radius: 20px;      /* Rounded corners */
    padding: 2rem;           /* Space inside */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Shadow effect */
}

.text-output {
    background: #f8f9fa;      /* Light gray background */
    padding: 2rem;           /* Space inside */
    border-radius: 10px;      /* Rounded corners */
    min-height: 300px;        /* Minimum height */
    margin-bottom: 2rem;      /* Space below */
    white-space: pre-wrap;    /* Preserves line breaks */
    font-family: 'Courier New', monospace; /* Monospace font */
    border: 1px solid #e9ecef; /* Light border */
}

.actions {
    display: flex;            /* Buttons side by side */
    gap: 1rem;               /* Space between buttons */
    justify-content: center;  /* Centers buttons */
}

.copy-btn, .download-btn {
    background: #6c5ce7;      /* Purple background */
    color: white;             /* White text */
    border: none;             /* No border */
    padding: 0.75rem 1.5rem;  /* Space inside */
    border-radius: 10px;      /* Rounded corners */
    cursor: pointer;          /* Hand cursor */
    font-weight: 500;         /* Medium bold */
    transition: background 0.3s; /* Hover effect */
    display: flex;            /* Icon and text side by side */
    align-items: center;      /* Centers vertically */
    gap: 0.5rem;             /* Space between icon and text */
}

.copy-btn:hover, .download-btn:hover {
    background: #5a4fcf;      /* Darker purple on hover */
}

/* Modal styles */
.modal {
    display: none;            /* Hidden by default */
    position: fixed;          /* Covers screen */
    z-index: 2000;           /* High z-index */
    left: 0;                 /* Left edge */
    top: 0;                  /* Top edge */
    width: 100%;             /* Full width */
    height: 100%;            /* Full height */
    background-color: rgba(0,0,0,0.5); /* Dark overlay */
    backdrop-filter: blur(5px); /* Blurs background */
}

.modal-content {
    background-color: white;  /* White background */
    margin: 10% auto;        /* Centers modal */
    padding: 2rem;           /* Space inside */
    border-radius: 20px;     /* Rounded corners */
    width: 90%;              /* 90% of screen width */
    max-width: 400px;        /* Maximum width */
    position: relative;      /* For close button positioning */
}

.close {
    position: absolute;      /* Positioned in corner */
    right: 1rem;            /* Right edge */
    top: 1rem;              /* Top edge */
    font-size: 2rem;        /* Large size */
    cursor: pointer;        /* Hand cursor */
    color: #999;            /* Gray color */
}

.close:hover {
    color: #333;            /* Darker on hover */
}

/* ========================================== */
/* RESPONSIVE DESIGN FOR DIFFERENT SCREENS */
/* ========================================== */

/* TABLET SCREENS (769px to 1024px wide) */
@media (max-width: 1024px) and (min-width: 769px) {
    .hero {
        padding: 100px 0 50px; /* Less padding */
        min-height: 60vh;      /* Smaller height */
    }
    
    .hero-content {
        gap: 2.5rem;          /* Less space between columns */
    }
    
    .hero-title {
        font-size: 2.8rem;    /* Smaller title */
    }
    
    .hero-subtitle {
        font-size: 1.5rem;    /* Smaller subtitle */
    }
    
    .hero-description {
        font-size: 1.15rem;   /* Smaller description */
    }
    
    .before-after-container {
        padding: 1.5rem;      /* Less padding */
        gap: 1rem;           /* Less space */
    }
    
    .image-wrapper {
        max-width: 110px;     /* Smaller images */
    }
    
    .marketing-image {
        height: 80px;        /* Shorter images */
    }
}

/* MOBILE PHONES (768px and smaller) */
@media (max-width: 768px) {
    /* Navigation adjustments */
    .nav-container {
        padding: 0 15px;     /* Less padding */
        flex-wrap: wrap;     /* Allow items to wrap */
        gap: 1rem;          /* Space between items */
    }
    
    .nav-logo h2 {
        font-size: 1.5rem;   /* Smaller logo */
    }
    
    .auth-btn {
        padding: 0.4rem 1rem; /* Smaller button */
        font-size: 0.8rem;    /* Smaller text */
        gap: 0.3rem;         /* Less space */
    }
    
    /* Hero section mobile layout */
    .hero {
        padding: 90px 0 40px; /* Less padding */
        min-height: auto;     /* Remove height restriction */
    }
    
    .hero-content {
        grid-template-columns: 1fr; /* Stack everything vertically */
        gap: 2rem;           /* Less space */
        text-align: center;  /* Center all text */
    }
    
    .hero-title {
        font-size: 2.2rem;   /* Smaller title */
        margin-bottom: 0.8rem; /* Less space below */
    }
    
    .hero-subtitle {
        font-size: 1.3rem;   /* Smaller subtitle */
        margin-bottom: 0.8rem; /* Less space below */
    }
    
    .hero-description {
        font-size: 1rem;     /* Smaller description */
        margin-bottom: 1.5rem; /* Less space below */
    }
    
    .cta-btn {
        padding: 1rem 2rem;  /* Smaller button */
        font-size: 1.1rem;   /* Smaller text */
        align-self: center;  /* Center the button */
    }
    
    /* Images for mobile */
    .marketing-showcase {
        max-width: 100%;     /* Use full width */
    }
    
    .before-after-container {
        flex-direction: column; /* Stack images vertically */
        gap: 1rem;           /* Less space */
        padding: 1.5rem 1rem; /* Less padding */
        margin-bottom: 1rem; /* Less space below */
    }
    
    .image-wrapper {
        max-width: 180px;    /* Bigger images on mobile */
    }
    
    .marketing-image {
        height: 135px;       /* Taller images */
    }
    
    /* Switch arrow direction for mobile */
    .arrow-desktop {
        display: none;       /* Hide right arrow */
    }
    
    .arrow-mobile {
        display: block;      /* Show down arrow */
    }
    
    /* Benefit tags for mobile */
    .benefit-tags {
        gap: 0.6rem;         /* Less space */
        justify-content: center; /* Center tags */
    }
    
    .benefit-tag {
        font-size: 0.75rem;  /* Smaller text */
        padding: 0.3rem 0.6rem; /* Less padding */
    }
}

/* SMALL MOBILE PHONES (480px and smaller) */
@media (max-width: 480px) {
    .hero {
        padding: 80px 0 30px; /* Even less padding */
    }
    
    .hero-content {
        gap: 1.5rem;         /* Less space */
    }
    
    .hero-title {
        font-size: 1.8rem;   /* Smaller title */
        margin-bottom: 0.5rem; /* Less space */
    }
    
    .hero-subtitle {
        font-size: 1.1rem;   /* Smaller subtitle */
        margin-bottom: 0.5rem; /* Less space */
    }
    
    .hero-description {
        font-size: 0.95rem;  /* Smaller description */
        margin-bottom: 1rem; /* Less space */
    }
    
    .before-after-container {
        padding: 1.2rem 0.8rem; /* Less padding */
        gap: 0.8rem;         /* Less space */
        margin-bottom: 0.8rem; /* Less space */
    }
    
    .image-wrapper {
        max-width: 160px;    /* Smaller images */
    }
    
    .marketing-image {
        height: 120px;       /* Shorter images */
    }
    
    .benefit-tags {
        flex-direction: column; /* Stack tags vertically */
        align-items: center;  /* Center tags */
        gap: 0.4rem;         /* Less space */
    }
    
    .benefit-tag {
        font-size: 0.7rem;   /* Smaller text */
        padding: 0.25rem 0.5rem; /* Less padding */
    }
    
    .cta-btn {
        padding: 0.8rem 1.5rem; /* Smaller button */
        font-size: 1rem;     /* Smaller text */
    }
}

/* LANDSCAPE MOBILE (when phone is rotated) */
@media (max-height: 600px) and (orientation: landscape) {
    .hero {
        padding: 60px 0 30px; /* Less vertical padding */
        max-height: none;     /* Remove height limit */
    }
    
    .hero-content {
        gap: 2rem;           /* Less space */
    }
    
    .hero-title {
        font-size: 2rem;     /* Smaller title */
        margin-bottom: 0.5rem; /* Less space */
    }
    
    .hero-subtitle {
        font-size: 1.2rem;   /* Smaller subtitle */
        margin-bottom: 0.5rem; /* Less space */
    }
    
    .hero-description {
        font-size: 1rem;     /* Smaller description */
        margin-bottom: 1rem; /* Less space */
    }
    
    .before-after-container {
        padding: 1rem;       /* Less padding */
        gap: 1rem;          /* Less space */
        margin-bottom: 1rem; /* Less space */
    }
    
    .image-wrapper {
        max-width: 120px;    /* Smaller images */
    }
    
    .marketing-image {
        height: 90px;        /* Shorter images */
    }
    
    .benefit-tags {
        gap: 0.5rem;         /* Less space */
    }
    
    .benefit-tag {
        font-size: 0.75rem;  /* Smaller text */
        padding: 0.25rem 0.5rem; /* Less padding */
    }
}

/* ========================================== */
/* MOBILE RESPONSIVE ADDITIONS */
/* ========================================== */

@media (max-width: 768px) {
    /* Footer responsive */
    .footer {
        padding: 2rem 0 1rem;  /* Less padding */
    }
    
    .footer-content {
        grid-template-columns: 1fr; /* Single column */
        gap: 2rem;             /* Less space */
        text-align: center;    /* Center align */
    }
    
    .support-email {
        display: inline-flex;  /* Maintain flex */
        justify-content: center; /* Center content */
    }
    
    /* Upload section responsive */
    .upload-section {
        padding: 60px 0;       /* Less padding */
    }
    
    .upload-section h2 {
        font-size: 2rem;       /* Smaller heading */
        margin-bottom: 2rem;   /* Less space */
    }
    
    .upload-area {
        padding: 3rem 1rem;    /* Less padding */
        margin: 0 15px;        /* Side margins */
    }
    
    .upload-content i {
        font-size: 3rem;       /* Smaller icon */
    }
    
    .upload-content h3 {
        font-size: 1.2rem;     /* Smaller text */
    }
    
    .upload-content p {
        font-size: 1rem;       /* Smaller text */
    }
    
    /* File list responsive */
    .file-list {
        margin: 0 15px;        /* Side margins */
    }
    
    .file-item {
        flex-direction: column; /* Stack vertically */
        align-items: flex-start; /* Left align */
        gap: 0.5rem;           /* Less space */
    }
    
    /* Actions responsive */
    .actions {
        flex-direction: column; /* Stack buttons */
        gap: 1rem;             /* Space between */
    }
    
    /* Pricing responsive */
    .pricing-card {
        margin: 0 15px;        /* Side margins */
        padding: 2rem 1.5rem;  /* Less padding */
    }
    
    /* Container responsive */
    .container {
        padding: 0 15px;       /* Less side padding */
    }
    
    /* Pages display responsive */
    .pages-display {
        padding: 6px 12px;     /* Less padding */
        font-size: 0.9rem;     /* Smaller text */
    }
    
    #pages-count {
        font-size: 1.1rem;     /* Smaller number */
    }
}

/* ========================================== */
/* ADDITIONAL AUTH BUTTON STYLING */
/* ========================================== */

/* Override auth button for consistent compact size */
.auth-btn {
    padding: 0.25rem 0.6rem !important;   /* Force small padding */
    font-size: 0.7rem !important;         /* Force small text */
    gap: 0.25rem !important;              /* Force minimal gap */
    height: 28px !important;              /* Force compact height */
    border-radius: 12px !important;       /* Force smaller radius */
}

/* Mobile auth button override */
@media (max-width: 768px) {
    .auth-btn {
        padding: 0.2rem 0.5rem !important;  /* Even smaller on mobile */
        font-size: 0.65rem !important;      /* Even smaller text */
        gap: 0.2rem !important;             /* Even smaller gap */
        height: 24px !important;            /* Even more compact */
    }
    
    /* Mobile profile image */
    .auth-btn img {
        width: 16px !important;    /* Even smaller on mobile */
        height: 16px !important;   /* Even smaller on mobile */
    }
}