/* CLEAN SLATE - AUTHORITY ADVERTORIAL V7 */

/* 1. RESET & BASE */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #FFFFFF;
    color: #333333;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    font-size: 18px;
}

h1,
h2,
h3,
h4 {
    font-family: 'Merriweather', serif;
    color: #1a1a1a;
}

.container {
    max-width: 700px;
    /* Single Column Focus */
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. HEADER & ALERT */
.alert-bar {
    background-color: #c0392b;
    /* Alert Red */
    color: #fff;
    text-align: center;
    padding: 10px;
    font-weight: 700;
    font-size: 0.9rem;
}

.main-header {
    border-bottom: 1px solid #eee;
    padding: 30px 0;
    text-align: center;
}

.journal-logo {
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    margin-bottom: 5px;
}

.date-line {
    font-size: 0.9rem;
    color: #777;
    text-transform: uppercase;
    font-weight: 600;
}

/* 3. CONTENT */
.content-wrapper {
    padding-top: 30px;
}

.article-headline {
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 25px;
    text-align: left;
    /* Journalistic feel often left-aligned headers, but center is safer for landing pages. User asked for single column, standard is usually left for articles. Let's stick to left for "Journal", maybe center for "Sales". Let's do LEFT for true authority. */
}

/* Video */
.video-container {
    margin-bottom: 30px;
    background: #000;
    border: 1px solid #ddd;
}

.main-video {
    width: 100%;
    display: block;
}

.video-subtext {
    text-align: center;
    font-size: 0.85rem;
    color: #666;
    padding: 8px;
    background: #f9f9f9;
    border-top: 1px solid #eee;
}

/* Science Text */
.science-text p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    /* Highly readable */
}

/* 4. MODULES */
.module-box {
    background: #f8f9fa;
    /* Very light grey */
    border: 1px solid #e9ecef;
    padding: 25px;
    border-radius: 4px;
    margin: 40px 0;
}

.module-box h3 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.5rem;
    color: #0056b3;
    /* Medical Blue */
}

.ingredients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    text-align: center;
}

.ingredient-card {
    background: #fff;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ing-icon {
    width: 50px;
    height: 50px;
    background: #27ae60;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin: 0 auto 10px;
}

.ingredient-card h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.ingredient-card p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}

/* 5. CTA AREA */
.cta-module {
    text-align: center;
    background: #fff;
    padding: 30px;
    border: 2px solid #f1c40f;
    border-radius: 8px;
    margin: 40px 0;
}

.trust-badge-area {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.css-badge {
    width: 100px;
    height: 100px;
    background: #27ae60;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}

.badge-circle {
    width: 86px;
    height: 86px;
    border: 1px dashed #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    line-height: 1.1;
}

.badge-days {
    font-size: 1rem;
    font-weight: 900;
}

.badge-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-align: center;
}

.risk-free-text {
    font-weight: 700;
    color: #27ae60;
    font-size: 1rem;
}

.cta-button {
    display: block;
    width: 100%;
    background-color: #f1c40f;
    /* Gold */
    color: #000;
    font-weight: 800;
    font-size: 1.2rem;
    padding: 20px;
    border-radius: 6px;
    text-decoration: none;
    border-bottom: 5px solid #d35400;
    /* Dark Orange Shadow */
    transition: transform 0.1s;
    text-transform: uppercase;
}

.cta-button:active {
    transform: translateY(2px);
    border-bottom: 2px solid #d35400;
}

.security-lock {
    margin-top: 15px;
    font-size: 0.85rem;
    color: #777;
}

/* 6. FOOTER */
.main-footer {
    background: #f4f4f4;
    padding: 40px 0;
    text-align: center;
    font-size: 0.8rem;
    color: #888;
    margin-top: 50px;
}

.legal-disclaimer {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 20px;
    background: #fff;
    color: #555;
}

.footer-links a {
    color: #0056b3;
    padding: 0 10px;
}

/* MOBILE RESPONSIVE Tweaks */
@media (max-width: 600px) {
    .article-headline {
        font-size: 1.6rem;
        /* Slightly smaller on phone */
    }

    .cta-button {
        font-size: 1.1rem;
    }

    .journal-logo {
        font-size: 1.8rem;
    }
}