/* assets/css/style.css */
:root {
    --primary: #4a6ee0;
    --secondary: #6c757d;
    --dark: #343a40;
    --light: #f8f9fa;
    --success: #28a745;
    --warning: #ffc107;
    --danger: #dc3545;
    /* --nord-accent is page-specific, will be set by JS or inline style if needed,
       but we can define a default or use it in review-specific CSS rules */
    --nord-accent: #4685FF; /* Default for review page, can be overridden */
    --text-dark: #212529;
    --text-light: #f1f3f5;
    --background-alt: #e9ecef;
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }

body {
    background-color: #f5f7fa; /* from index.html, seems more general */
    color: #333;
    line-height: 1.6;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: padding-top 0.3s ease-in-out; /* For notification bar */
}

/* Notification Bar Styling */
#notification-bar {
    background-color: var(--warning);
    color: var(--dark);
    padding: 12px 20px;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1002; /* Higher than sticky nav (1001 for nav, 1000 for mobile panel) */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    display: none; /* Initially hidden, JS will show it if not closed */
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out;
}
#notification-bar p { margin: 0; font-size: 0.95rem; }
#notification-bar a { color: var(--primary); font-weight: 600; text-decoration: underline; margin-left: 5px; }
#notification-bar a:hover { color: #3d5ac8; }
#close-notification {
    background: transparent; border: none; color: var(--dark);
    font-size: 1.6rem; font-weight: bold; cursor: pointer;
    padding: 0 10px; line-height: 1; position: absolute;
    right: 15px; top: 50%; transform: translateY(-50%);
}
#close-notification:hover { color: var(--primary); }

/* General Header, Nav, Container */
header { /* This is for the main hero section, not the <nav> element */
    background: linear-gradient(135deg, var(--primary), #304b99);
    color: white;
    padding: 2rem 0;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.container {
    width: 90%;
    max-width: 1200px; /* General max-width */
    margin: 0 auto;
    padding: 0 20px; /* general padding */
}
/* Specific container widths for different layouts */
.container-narrow { max-width: 900px; } /* For content pages like what-is-a-vpn */
.container-review { max-width: 1100px; } /* For review page */


.hero { /* Used in index.html and about.html for the big banner */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}
.logo { font-size: 2.5rem; font-weight: bold; margin-bottom: 1rem; }
.tagline { font-size: 1.2rem; margin-bottom: 2rem; max-width: 600px; text-align: center; }

/* Search bar (from index.html hero) */
.search-bar { width: 100%; max-width: 600px; display: flex; margin-bottom: 2rem; }
.search-bar input { flex: 1; padding: 0.75rem 1rem; border: 1px solid #ddd; border-radius: 4px 0 0 4px; font-size: 1rem;}
.search-bar button { background-color: var(--primary); color: white; border: none; padding: 0 1.5rem; border-radius: 0 4px 4px 0; cursor: pointer; font-weight: bold; }

/* Navigation Bar */
nav {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top:0; /* JS will adjust this if notification bar is visible */
    z-index: 1001;
    transition: top 0.3s ease-in-out;
}
.nav-container { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; /* Uses main .container for width */ }
.nav-logo { font-size: 1.5rem; font-weight: bold; color: var(--primary); text-decoration: none; }
.nav-links { display: flex; list-style: none; }
.nav-links li { margin-left: 1.5rem; }
.nav-links li:first-child { margin-left: 0; }
.nav-links a { color: var(--dark); text-decoration: none; font-weight: 500; transition: color 0.3s; padding: 0.5rem 0; }
.nav-links a:hover, .nav-links a.active-nav-link { color: var(--primary); font-weight: bold; }

.menu-toggle { display: none; flex-direction: column; cursor: pointer; padding: 0.5rem; }
.menu-toggle span { height: 3px; width: 25px; background-color: var(--dark); margin-bottom: 4px; border-radius: 2px; display: block; }
.menu-toggle span:last-child { margin-bottom: 0; }

/* Main Content Area */
.main { padding: 3rem 0; }

.section-title { font-size: 2rem; color: var(--dark); margin-bottom: 2rem; text-align: center; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background-color: var(--primary);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    transition: background-color 0.3s;
}
.btn:hover { background-color: #3d5ac8; }
.btn-block { display: block; width: 100%; }
.btn-review { /* For review learn more button on index/vpn-guides */
    display: block; width: 100%; padding: 0.7rem 1.5rem;
    background-color: var(--light) !important; color: var(--primary) !important;
    text-decoration: none; border-radius: 4px; text-align: center;
    font-weight: 500; transition: background-color 0.3s, color 0.3s;
    border: 1px solid var(--primary); margin-bottom: 0.75rem;
}
.btn-review:hover { background-color: var(--primary) !important; color: white !important; }
.btn-special-offer { background-color: var(--success); } /* For vpn-guides page */
.btn-special-offer:hover { background-color: #218838; }


/* Generic Content Sections (for about, privacy, terms, internet-security) */
.content-section {
    background-color: white;
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}
.content-section h3 { color: var(--primary); margin-top: 1.5rem; margin-bottom: 0.75rem; font-size: 1.4rem; }
.content-section h3:first-child { margin-top: 0; }
.content-section p, .content-section ul, .content-section ol { margin-bottom: 1rem; }
.content-section ul, .content-section ol { padding-left: 20px; }
.content-section ul li { margin-bottom: 0.5rem; list-style: disc; }
.content-section ol li { margin-bottom: 0.5rem; }


/* Index Page Specifics / VPN Card Grid */
.what-is-vpn-content { /* from index.html */
    background-color: white; padding: 2rem; border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); max-width: 800px;
    margin: 0 auto 2rem;
}
.what-is-vpn-content p { margin-bottom: 1rem; }
.what-is-vpn-content ul { list-style-type: disc; margin-left: 20px; margin-bottom: 1.5rem; }
.what-is-vpn-content ul li { margin-bottom: 0.5rem; }
.what-is-vpn-content .btn { margin-top: 1rem; }

.vpn-grid { /* from index.html & vpn-guides.html */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Default from index */
    gap: 2rem;
    margin-bottom: 3rem;
}
/* vpn-guides.html uses minmax(320px, 1fr) - can make this a modifier class or decide on one */
.vpn-grid.vpn-grid-guides { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }


.vpn-card { /* from index.html, adapted for vpn-guides card structure too */
    background-color: white; border-radius: 8px; overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex; flex-direction: column; /* For vpn-guides layout */
}
.vpn-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); }

.vpn-card-header { /* from index.html, adapted for vpn-guides */
    background-color: var(--primary); padding: 1rem 1.5rem; color: white;
    font-weight: bold; font-size: 1.2rem; /* index: 1.2rem, guides: 1.3rem. Using 1.2rem */
    display: flex; justify-content: space-between; align-items: center;
}
.vpn-card-header .rating { /* from vpn-guides */
    display: flex; align-items: center;
    background-color: rgba(255,255,255,0.2);
    padding: 0.3rem 0.6rem; border-radius: 4px;
}
.vpn-card-header .rating .stars { color: var(--warning); margin-right: 0.5rem; font-size: 0.9rem;}
.vpn-card-header .rating span:last-child { font-size: 0.9rem; } /* For score */

.vpn-logo, .vpn-logo-banner { /* Merging vpn-logo from index and vpn-logo-banner from guides */
    height: 100px; /* index: 100px, guides: 120px. Using 100px */
    display: flex; align-items: center; justify-content: center;
    background-color: #f8f9fa; padding: 1rem;
    border-bottom: 1px solid #eee; /* from guides */
}
.vpn-logo img, .vpn-logo-banner img {
    max-height: 60px; /* index: 60px, guides: 70px. Using 60px */
    max-width: 180px; /* index: 180px, guides: 200px. Using 180px */
    object-fit: contain;
}

.vpn-details { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; } /* from guides */
.offer-badge { /* from vpn-guides */
    background-color: var(--danger); color: white; padding: 0.4rem 0.9rem;
    font-size: 0.9rem; font-weight: bold; border-radius: 20px; display: inline-block;
    margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.5px;
}
.marketing-blurb { /* from vpn-guides */
    font-size: 0.95rem; color: var(--secondary);
    margin-bottom: 1.5rem; min-height: 60px;
}
.feature-list { list-style: none; margin-bottom: 1.5rem; }
.feature-list li { margin-bottom: 0.5rem; display: flex; align-items: flex-start; font-size: 0.9rem; } /* from guides, index similar */
.feature-list li::before {
    content: "✓"; color: var(--success); font-weight: bold;
    margin-right: 0.5rem; font-size: 1.1rem; /* index: 0.5rem, guides: 0.75rem. Using 0.5rem */
}
.price { /* from index.html */
    font-size: 1.2rem; font-weight: bold;
    margin-bottom: 1rem; color: var(--dark);
}
.discount { color: var(--success); font-weight: normal; font-size: 0.9rem; margin-left: 0.5rem; } /* from index */
/* Buttons inside vpn-card are handled by .btn-review and .btn .btn-block */


/* Comparison Table (index.html) */
.compare-table {
    width: 100%; border-collapse: collapse; margin-bottom: 3rem;
    background-color: white; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-radius: 8px; overflow: hidden;
}
.compare-table th, .compare-table td { padding: 1rem; text-align: left; border-bottom: 1px solid #eee; }
.compare-table th { background-color: var(--primary); color: white; }
.compare-table tr:hover { background-color: #f5f7fa; }

/* Features Section (index.html, about.html similar) */
.feature-section { /* Can be reused, e.g., "Our Core Values" on about.html */
    background-color: white; padding: 3rem 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}
.feature-box { text-align: center; padding: 2rem 1rem; }
.feature-icon { margin-bottom: 1rem; font-size: 2.5rem; color: var(--primary); }
.feature-title { margin-bottom: 0.5rem; font-size: 1.2rem; font-weight: bold; }

/* FAQ Section (index.html) */
.faq-section { padding: 3rem 0; }
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-item { margin-bottom: 1rem; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
.faq-question {
    background-color: #f8f9fa; padding: 1rem; font-weight: bold;
    cursor: pointer; display: flex; justify-content: space-between; align-items: center;
}
.faq-question:after { content: "+"; font-size: 1.5rem; }
.faq-question.active:after { content: "-"; }
.faq-answer { padding: 1rem; display: none; }
.faq-answer.active { display: block; }

/* CTA Section (index.html, about.html similar) */
.cta-section {
    background: linear-gradient(135deg, var(--primary), #304b99);
    color: white; text-align: center; padding: 4rem 0;
}
.cta-title { font-size: 2rem; margin-bottom: 1rem; }
.cta-text { max-width: 600px; margin: 0 auto 2rem; }

/* Contact Form (index.html) */
#contact { padding-bottom: 4rem; } /* section from index */
#contactForm label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm select,
#contactForm textarea {
    width: 100%; padding: 0.75rem; border: 1px solid #ddd;
    border-radius: 4px; font-size: 1rem; margin-bottom: 1.5rem;
}
#contactForm button[type="submit"] { /* Uses .btn styles */ }


/* About Page Specifics */
#about-intro p { max-width: 800px; margin: 0 auto 1.5rem auto; font-size: 1.1rem; }
#our-mission { background-color: var(--light); border-radius: 8px; margin-bottom: 3rem; padding: 2.5rem 2rem; text-align: center; }
#our-mission p { font-size: 1.25rem; max-width: 750px; margin: 0 auto; color: var(--dark); line-height: 1.7; }
#our-approach > div { /* The grid for approach cards */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem; align-items: stretch;
}
#our-approach > div > div { /* Individual approach card */
    background-color: white; padding: 2rem; border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
#our-approach > div > div h3 { color: var(--primary); margin-bottom: 1rem; font-size: 1.3rem; }
/* Core values section on about page reuses .feature-section, .features-grid, .feature-box styles */
#our-values .feature-box { background-color: white; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

/* vpn-guides.html Specifics */
.page-intro { /* Used in vpn-guides.html */
    max-width: 800px; margin: 0 auto 3rem auto;
    font-size: 1.1rem; text-align: center; color: var(--secondary);
}
.filter-bar { /* Used in vpn-guides.html */
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 2rem; padding: 1rem; background-color: white;
    border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.filter-bar select, .filter-bar button {
    padding: 0.5rem 1rem; border: 1px solid #ddd; border-radius: 4px;
    font-size: 0.9rem; margin-left: 0.5rem;
}
.filter-bar button { background-color: var(--primary); color: white; cursor: pointer; }
.filter-bar label { font-weight: 500; color: var(--dark); }

/* Review Page Specifics (review.html) */
.product-hero {
    background: linear-gradient(135deg, var(--nord-accent) 0%, #2a5bbd 100%);
    color: white; padding: 4rem 0 3rem; text-align: center;
    position: relative; overflow: hidden;
}
.product-hero::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('https://nordvpn.com/wp-content/themes/nordvpn/assets/images/patterns/network-pattern-dark.svg');
    opacity: 0.07; background-size: cover;
}
.product-hero-content { position: relative; z-index: 1; }
.product-logo-hero { max-width: 220px; margin-bottom: 1.5rem; filter: brightness(75%) invert(1); }
.product-hero h1 { font-size: 2.8rem; margin-bottom: 0.75rem; font-weight: 700; }
.product-hero .tagline { font-size: 1.3rem; max-width: 700px; margin: 0 auto 2rem auto; opacity: 0.9; }
.hero-cta-button {
    display: inline-block; background-color: var(--warning); color: var(--dark);
    padding: 1rem 2.5rem; font-size: 1.1rem; font-weight: bold;
    text-decoration: none; border-radius: 50px;
    transition: transform 0.2s ease-out, background-color 0.2s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.hero-cta-button:hover { transform: translateY(-3px); background-color: #ffca2c; }
.hero-rating-summary { margin-top: 2.5rem; font-size: 1.1rem; }
.hero-rating-summary .stars { color: var(--warning); font-size: 1.3rem; margin-right: 0.5rem;}

.main-content-area.review-page { padding: 3rem 0; background-color: white; } /* Modifier for review page main area */
.main-content-area.review-page .container { max-width: 1100px; } /* Use container-review implicitly */

.content-section.review-item { /* Specific styling for content sections on review page */
    margin-bottom: 3.5rem; padding: 2.5rem; border-radius: 12px;
    background-color: var(--light);
}
.content-section.review-item:nth-child(odd) { background-color: #fdfdfd; }

.section-heading { /* For review page section titles */
    font-size: 2.2rem; color: var(--nord-accent); margin-bottom: 1rem;
    text-align: center; position: relative; padding-bottom: 0.75rem;
}
.section-heading::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 70px; height: 4px;
    background-color: var(--nord-accent); border-radius: 2px;
}
.section-subheading { /* For review page */
    text-align: center; font-size: 1.1rem; color: var(--secondary);
    max-width: 700px; margin: 0 auto 2.5rem auto;
}
.feature-highlight-grid { /* For review page */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem; margin-top: 2rem;
}
.feature-highlight-item { /* For review page */
    background-color: white; padding: 2rem 1.5rem; border-radius: 8px;
    text-align: center; box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    transition: transform 0.3s;
}
.feature-highlight-item:hover { transform: translateY(-5px); }
.feature-highlight-item .feature-icon { /* from review, different class for icon */
    font-size: 2.8rem; color: var(--nord-accent); margin-bottom: 1rem;
}
.feature-highlight-item h4 { font-size: 1.3rem; margin-bottom: 0.5rem; color: var(--dark); }
.feature-highlight-item p { font-size: 0.95rem; color: var(--secondary); }

.pros-cons-section { /* Review page */
    display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 2rem;
}
.pros-list, .cons-list {
    background-color: white; padding: 2rem; border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}
.pros-cons-section h4 { font-size: 1.4rem; margin-bottom: 1rem; }
.pros-list h4 { color: var(--success); }
.cons-list h4 { color: var(--danger); }
.pros-cons-section ul { list-style: none; padding: 0; }
.pros-cons-section ul li { padding: 0.6rem 0 0.6rem 2rem; position: relative; border-bottom: 1px solid #eee; }
.pros-cons-section ul li:last-child { border-bottom: none; }
.pros-cons-section ul li::before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-weight: bold; font-size: 1.2rem; }
.pros-list ul li::before { content: '✓'; color: var(--success); }
.cons-list ul li::before { content: '✕'; color: var(--danger); }

.image-showcase { margin: 2.5rem 0; text-align: center; } /* Review page */
.image-showcase img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.image-caption { font-size: 0.9rem; color: var(--secondary); margin-top: 0.75rem; font-style: italic; }

.performance-table-wrapper { /* Review page */
    overflow-x: auto; margin: 2rem 0; background-color: white;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05); border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}
.performance-table { /* Review page */
    width: 100%; min-width: 600px; border-collapse: collapse;
}
.performance-table th, .performance-table td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid #eee; white-space: nowrap; }
.performance-table th { background-color: var(--nord-accent); color: white; font-weight: 600; position: sticky; top: 0; z-index: 1; }
.performance-table th:first-child { border-top-left-radius: 8px; }
.performance-table th:last-child { border-top-right-radius: 8px; }
.performance-table tr:hover { background-color: #f9f9f9; }
.performance-table td:first-child { font-weight: 500; }
.performance-table tr:last-child td { border-bottom: none; }

.final-verdict { /* Review page */
    background-color: var(--nord-accent); color: white; padding: 3rem 2rem;
    border-radius: 12px; text-align: center; margin-top: 2rem;
}
.final-verdict h3 { font-size: 2rem; margin-bottom: 1rem; }
.final-verdict p { font-size: 1.1rem; max-width: 750px; margin: 0 auto 2rem auto; opacity: 0.95; }
.final-cta-button { /* Review page, similar to hero-cta-button */
    display: inline-block; background-color: var(--warning); color: var(--dark);
    padding: 1rem 2.5rem; font-size: 1.1rem; font-weight: bold;
    text-decoration: none; border-radius: 50px;
    transition: transform 0.2s ease-out, background-color 0.2s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.final-cta-button:hover { transform: translateY(-3px); background-color: #ffca2c; }

.article-content p, .article-content ul, .article-content ol { /* Review page, for dynamic content */
    margin-bottom: 1.5rem; font-size: 1.05rem; color: #495057;
}
.article-content ul, .article-content ol { padding-left: 1.5rem; }
.article-content strong { color: var(--dark); }
.article-content a { color: var(--nord-accent); text-decoration: underline; }
.article-content a:hover { text-decoration: none; }
.article-content h3 { font-size: 1.6rem; color: var(--dark); margin-top: 2.5rem; margin-bottom: 1rem; }


/* what-is-a-vpn.html Specifics */
.page-hero { /* used by what-is-a-vpn */
    background-color: var(--nord-accent); /* can be var(--primary) too */
    color: white;
    padding: 3rem 0 2rem;
    text-align: center;
}
.page-hero h1 { font-size: 2.5rem; margin-bottom: 0.5rem; font-weight: 700; }
.page-hero p.subtitle { font-size: 1.2rem; max-width: 700px; margin: 0 auto 1rem auto; opacity: 0.9; }

.main-content-area.article-page .container { max-width: 900px; } /* For what-is-a-vpn content page */

.article-section { /* Used by what-is-a-vpn */
    margin-bottom: 2.5rem; padding: 2rem; border-radius: 8px;
    background-color: var(--light);
}
.article-section h2 { /* Used by what-is-a-vpn */
    font-size: 1.8rem; color: var(--nord-accent); margin-bottom: 1.5rem;
    padding-bottom: 0.5rem; border-bottom: 2px solid var(--nord-accent);
    display: inline-block;
}
.article-section p, .article-section ul, .article-section ol { margin-bottom: 1.2rem; font-size: 1.05rem; color: #333; }
.article-section ul, .article-section ol { padding-left: 1.5rem; }
.article-section ul li, .article-section ol li { margin-bottom: 0.5rem; }
.article-section strong { color: var(--dark); font-weight: 600; }
.article-section .analogy {
    background-color: #eef2ff; border-left: 4px solid var(--primary);
    padding: 1rem 1.5rem; margin: 1.5rem 0; border-radius: 4px;
}
.article-section .analogy p { margin-bottom: 0.5rem; }
.article-section .analogy strong { color: var(--primary); }
.article-section img.inline-diagram {
    max-width: 100%; height: auto; border-radius: 8px;
    margin: 1.5rem auto; display: block; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.article-section .key-takeaway {
    background-color: #fffbe6; border-left: 4px solid var(--warning);
    padding: 1rem 1.5rem; margin: 1.5rem 0; border-radius: 4px;
}
.article-section .key-takeaway strong { color: var(--warning); }

/* Inline Promo Spot from what-is-a-vpn.html */
.inline-promo-spot {
    margin: 2.5rem 0; padding: 1.5rem 0;
    border-top: 1px solid var(--background-alt);
    border-bottom: 1px solid var(--background-alt);
    background-color: #fdfdff;
}
.inline-promo-spot h3 { text-align: center; margin-bottom: 1.5rem; font-size: 1.3rem; color: var(--dark); }
.inline-promo-container {
    display: flex; justify-content: space-around; align-items: stretch;
    flex-wrap: wrap; gap: 1.5rem;
}
.vpn-inline-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 1rem; background-color: white; border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    flex: 1 1 280px; min-width: 260px; max-width: 380px;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.vpn-inline-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.12); }
.vpn-inline-card img.logo {
    height: 40px; width: auto; max-width: 100px; margin-bottom: 0.75rem;
    object-fit: contain; align-self: center;
}
.vpn-inline-card .details {
    font-size: 0.9rem; width: 100%; text-align: center; margin-bottom: 0.75rem;
}
.vpn-inline-card .name { font-weight: 600; font-size: 1.05rem; display: block; margin-bottom: 0.25rem; color: var(--primary); }
.vpn-inline-card .rating-stars { color: var(--warning); font-size: 0.9rem; margin-bottom: 0.3rem; display: inline-block; }
.vpn-inline-card .rating-text { font-size: 0.85rem; color: var(--secondary); margin-left: 0.3rem; }
.vpn-inline-card .btn-promo, .vpn-inline-card .btn-review { /* Combined for similar structure */
    padding: 0.6rem 1.2rem; color: white !important; text-decoration: none;
    border-radius: 5px; font-size: 0.9rem; font-weight: 500;
    white-space: nowrap; transition: background-color 0.2s;
    width: 100%; text-align: center; box-sizing: border-box;
}
.vpn-inline-card .btn-review { background-color: var(--secondary); margin-top: 0.5rem; margin-bottom: 0.5rem;} /* Added margin */
.vpn-inline-card .btn-review:hover { background-color: var(--dark); }
.vpn-inline-card .btn-promo { background-color: var(--success); margin-top: auto; } /* Pushes this to bottom */
.vpn-inline-card .btn-promo:hover { background-color: #218838; }

.cta-section.article-cta { /* from what-is-a-vpn */
    text-align: center; padding: 2rem; background-color: var(--background-alt);
    border-radius: 8px; margin-top: 2rem;
}
.cta-section.article-cta h3 { font-size: 1.6rem; color: var(--dark); margin-bottom: 1rem; }
.cta-button { /* General CTA button, used by what-is-a-vpn too */
    display: inline-block; background-color: var(--success); color: white;
    padding: 0.8rem 2rem; font-size: 1.1rem; font-weight: bold;
    text-decoration: none; border-radius: 50px;
    transition: transform 0.2s ease-out, background-color 0.2s;
}
.cta-button:hover { transform: translateY(-2px); background-color: #218838; }


/* Loading / Error states */
.loading, .error {
    text-align: center; padding: 2rem; font-size: 1.2rem;
    color: var(--secondary); grid-column: 1 / -1; /* For grids */
}
.error { color: var(--danger); }


/* Footer */
footer { background-color: var(--dark); color: white; padding: 3rem 0; margin-top: 3rem; }
.footer-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem; /* Uses main .container for width */
}
.footer-column h3 { margin-bottom: 1.5rem; font-size: 1.2rem; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { color: #ddd; text-decoration: none; transition: color 0.3s; }
.footer-links a:hover { color: white; }
.copyright { margin-top: 2rem; text-align: center; color: #aaa; font-size: 0.9rem; }


/* Responsive Styles */
@media (max-width: 768px) {
    .menu-toggle { display: flex; }
    .nav-links { /* Mobile Menu Panel */
        display: none; position: fixed;
        /* top: 0; Will be set by JS to be below main nav */
        left: -100%; width: 80%; max-width: 300px;
        height: 100vh; background-color: white;
        flex-direction: column; padding: 2rem;
        transition: left 0.3s ease-in-out, top 0.3s ease-in-out;
        z-index: 1000; /* Below main nav (1001) and notification (1002) */
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }
    .nav-links.active { display: flex; left: 0; }
    .nav-links li { margin: 1rem 0; width: 100%; }
    .nav-links li:first-child { margin-left: 0; } /* Reset from desktop */
    .nav-links a { display: block; padding: 0.75rem 0; }

    /* Notification Bar Mobile */
    #notification-bar { padding: 10px; font-size: 0.9rem; }
    #notification-bar p { font-size: 0.85rem; max-width: calc(100% - 50px); }
    #close-notification { font-size: 1.4rem; right: 10px; }

    /* General content adjustments */
    .section-title { font-size: 1.8rem; }
    .content-section { padding: 1.5rem; }
    .hero { padding: 2rem 1rem; }
    .logo { font-size: 2rem; }
    .tagline { font-size: 1.1rem; }

    /* Index page hero search bar */
    .search-bar { flex-direction: column; }
    .search-bar input { border-radius: 4px 4px 0 0; margin-bottom: -1px; }
    .search-bar button { border-radius: 0 0 4px 4px; }

    /* About Page */
    #our-approach > div { grid-template-columns: 1fr; }

    /* VPN Guides Page */
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar > * { margin-bottom: 0.5rem; margin-left: 0; }
    .vpn-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .vpn-grid.vpn-grid-guides { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }


    /* Review Page */
    .product-hero h1 { font-size: 2.2rem; }
    .product-hero .tagline { font-size: 1.1rem; }
    .hero-cta-button, .final-cta-button { padding: 0.8rem 2rem; font-size: 1rem; }
    .section-heading { font-size: 1.8rem; }
    .pros-cons-section { grid-template-columns: 1fr; }
    .content-section.review-item { padding: 2rem 1.5rem; }
    .performance-table th, .performance-table td { padding: 0.8rem 1rem; }

    /* what-is-a-vpn page */
    .page-hero h1 { font-size: 2rem; }
    .page-hero p.subtitle { font-size: 1.1rem; }
    .article-section h2 { font-size: 1.6rem; }
    .inline-promo-container { flex-direction: column; align-items: center; }
    .vpn-inline-card { flex-basis: auto; width: 90%; max-width: 400px; }
}

@media (max-width: 480px) {
    .tagline { font-size: 1rem; }
    .product-hero h1 { font-size: 1.8rem; }
    .product-hero .tagline { font-size: 1rem; }
    .feature-highlight-grid { grid-template-columns: 1fr; }
    .page-hero h1 { font-size: 1.8rem; }
}

#mc_embed_shell {
    margin-top: 1rem;
    text-align: center;
    width: 80%;
}

#mc_embed_signup h2 {
    margin: 0 auto !important;
    text-align: center;
    color: var(--primary);
}

#mc_embed_signup p {
    text-align: center;
}

#mc-embedded-subscribe {
    background-color: var(--primary) !important;
    margin: 0 auto !important;
}

#mc_embed_signup .button {
    text-align: center;
    margin: 20px auto !important;
    display: block !important;
}