:root {
    --green-50: #F5FBF5;
    --green-100: #E6F3E6;
    --green-200: #C2E0C2;
    --green-500: #4CAF50;
    --green-600: #2E7D32;
    --green-700: #1B5E20;
    --green-900: #0D210F;
    --text-main: #1A3320;
    --text-muted: #526658;
    --white: #ffffff;

    --font-main: 'Manrope', sans-serif;
    --font-heading: 'Satoshi', 'Manrope', sans-serif;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 999px;

    --shadow-sm: 0 4px 12px rgba(46, 125, 50, 0.05);
    --shadow-md: 0 8px 24px rgba(46, 125, 50, 0.1);
    --shadow-lg: 0 16px 48px rgba(46, 125, 50, 0.15);
}

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

body {
    font-family: var(--font-main);
    background-color: var(--green-50);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.container {
    width: 90%;
    max-width: 600px;
    /* Focus on readability/mobile-first feel for sales letter */
    margin: 0 auto;
}

.section-divider {
    height: 1px;
    background: var(--green-200);
    width: 100%;
    margin: 0;
    opacity: 0.6;
}

/* Typography */
h1,
h2,
h3 {
    font-family: var(--font-heading);
    color: var(--green-900);
    line-height: 1.2;
}



.text-accent {
    color: var(--green-600);
    font-weight: 700;
}

/* 🔝 TOP BAR */
.top-bar {
    background: #3BA55C;
    color: var(--white);
    text-align: center;
    padding: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: urgentPulse 2s infinite ease-in-out;
}

@keyframes urgentPulse {
    0% {
        background-color: #3BA55C;
    }

    50% {
        background-color: #2e8b4b;
    }

    100% {
        background-color: #3BA55C;
    }
}

/* 1️⃣ HERO SECTION */
.hero-section {
    padding: 24px 0 40px;
    /* Reduced top padding significantly */
    text-align: center;
    background: linear-gradient(180deg, var(--green-50) 0%, var(--green-100) 100%);
}

.headline {
    font-size: 1.5rem;
    /* Smaller for mobile to fit with VSL */
    font-weight: 900;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1.3;
}

.highlight {
    background-color: var(--green-600);
    color: var(--white) !important;
    padding: 2px 8px;
    border-radius: 6px;
    /* Allow wrapping for long highlighted text */
    white-space: normal;
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: inherit;
}

/* Subheadline styles (kept for reference or desktop) */
.subheadline {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 24px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Mini VSL */
.vsl-container {
    margin: 0 auto 24px;
    /* Reduced margin */
    max-width: 240px;
    /* Slightly smaller VSL width for better fit on small screens */
    position: relative;
}

.vsl-wrapper {
    aspect-ratio: 9/16;
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 4px solid var(--green-200);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
}

.vsl-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e0f2f1 0%, #a5d6a7 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--green-800);
}

.play-button {
    width: 64px;
    height: 64px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: var(--green-600);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
    transition: transform 0.2s ease;
}

.vsl-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.vsl-overlay:hover .play-button {
    transform: scale(1.1);
}

/* CTA Button */
.cta-button {
    display: inline-block;
    background: var(--green-600);
    color: var(--white);
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 28px;
    border-radius: var(--radius-full);
    box-shadow: 0 8px 20px rgba(46, 125, 50, 0.3);
    transition: transform 0.2s, background-color 0.2s;
    width: 100%;
    max-width: 350px;
    text-align: center;
}

.cta-button:hover {
    transform: translateY(-2px);
    background: var(--green-700);
}

.cta-button.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(46, 125, 50, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0);
    }
}

/* 2️⃣ PAIN SECTION */
.pain-section {
    padding: 60px 0;
    background: var(--white);
    text-align: center;
}

.pain-section h2 {
    font-size: 1.8rem;
    margin-bottom: 40px;
}

.pain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
    justify-content: center;
}

.pain-item {
    background: var(--white);
    padding: 32px 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--green-200);
    transition: transform 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

.pain-item h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--green-800);
    margin: 16px 0 8px;
    line-height: 1.3;
}

.pain-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.pain-item i {
    font-size: 32px;
    color: var(--green-600);
    flex-shrink: 0;
}

.pain-item p {
    font-weight: 500;
    font-size: 1.05rem;
}

.pain-conclusion {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--green-800);
}

/* 3️⃣ REFRAME SECTION */
.reframe-section {
    padding: 60px 0;
    background: var(--green-50);
    text-align: center;
}

.solution-box {
    background: var(--white);
    padding: 32px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    margin-top: 32px;
    text-align: left;
    border: 1px solid var(--green-200);
}

.check-list {
    margin: 20px 0;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-weight: 500;
    font-size: 1.1rem;
}

.check-list li i {
    color: var(--green-600);
    font-size: 24px;
}

.outcome {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--green-700);
    margin-top: 24px;
}

/* 4️⃣ PRODUCT SECTION */
.product-section {
    padding: 60px 0;
    background: var(--white);
    text-align: center;
}

.subtitle-product {
    font-size: 1.4rem;
    font-weight: 300;
    margin-bottom: 40px;
}

.target-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 40px 0;
}

.target-card {
    background: var(--green-50);
    padding: 32px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--green-200);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.target-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.target-card i {
    font-size: 40px;
    color: var(--green-600);
    margin-bottom: 16px;
    display: block;
}

/* 5️⃣ DETAILS SECTION */
.details-section {
    padding: 60px 0;
    background: var(--green-100);
}

.details-section h2 {
    text-align: center;
    margin-bottom: 48px;
}

.feature-item {
    display: flex;
    gap: 20px;
    margin-bottom: 32px;
}

.icon-box {
    background: var(--white);
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--green-600);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.feature-content h3 {
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.feature-content p {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.note-box {
    background: var(--green-600);
    color: var(--white);
    padding: 24px;
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 500;
}

/* CAROUSEL STYLES (Recipes & Social Proof) */
.recipes-section,
.social-proof-section {
    padding: 60px 0;
    text-align: center;
    background: var(--white);
}

.social-proof-section {
    background: var(--green-50);
}

.carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.carousel-track-wrapper {
    overflow: hidden;
    width: 300px;
    /* Card width */
}

.carousel-track {
    display: flex;
    transition: transform 0.3s ease-out;
    gap: 16px;
}

.carousel-card {
    min-width: 300px;
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--green-200);
    /* For image placeholder */
}

.carousel-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.recipes-section .carousel-card {
    height: 400px;
    /* 9:16 ish */
    display: flex;
    flex-direction: column;
}

.card-image-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: rgba(255, 255, 255, 0.8);
}

.color-1 {
    background: #81C784;
}

.color-2 {
    background: #4DB6AC;
}

.color-3 {
    background: #AED581;
}

.color-4 {
    background: #66BB6A;
}

.recipe-card h3 {
    padding: 20px;
    font-size: 1.1rem;
}

.carousel-btn {
    background: var(--white);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    font-size: 20px;
    color: var(--green-700);
    position: absolute;
    z-index: 10;
}

.carousel-btn.prev {
    left: 0;
}

.carousel-btn.next {
    right: 0;
}

.proof-card {
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px;
    background: #fff;
}

/* 8️⃣ BONUS SECTION */
.bonus-section {
    padding: 60px 0;
    text-align: center;
    background: var(--green-100);
}

.bonus-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 40px;
}

.bonus-card {
    background: var(--white);
    padding: 24px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--green-200);
}

.bonus-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.bonus-tag {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--green-600);
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.highlight-bonus {
    border: 2px solid var(--green-600);
    background: #f1f8f1;
}

/* 9️⃣ OFFER SECTION */
.offer-section {
    padding: 80px 0;
    background: var(--white);
    text-align: center;
}

.offer-card {
    border: 1px solid var(--green-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--white);
    max-width: 500px;
    margin: 0 auto;
}

.offer-header {
    background: var(--green-600);
    padding: 24px;
}

.offer-header h2 {
    color: var(--white);
    margin: 0;
}

.offer-body {
    padding: 40px 24px;
}

.offer-list li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 1.1rem;
    text-align: left;
}

.offer-list i {
    color: var(--green-600);
}

.price-box {
    margin: 40px 0;
}

.price-label {
    font-size: 1rem;
    color: var(--text-muted);
}

.price-value {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--green-800);
    line-height: 1;
    margin: 8px 0;
}

/* 🔟 BIO SECTION */
.bio-section {
    padding: 60px 0;
    background: var(--green-50);
}

.bio-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
}

.bio-placeholder {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #dcebdc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: var(--green-600);
}

.bio-text h2 {
    margin-bottom: 24px;
}

.signature {
    font-family: 'Brush Script MT', cursive;
    font-size: 2rem;
    color: var(--green-800);
    margin-top: 32px;
    text-align: center;
}

.authorized-signature {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--green-600);
    margin-top: 8px;
    font-weight: 600;
    opacity: 0.8;
}

/* 1️⃣1️⃣ GUARANTEE */
.guarantee-section {
    padding: 60px 0;
    text-align: center;
    background: var(--white);
}

.guarantee-badge i {
    font-size: 64px;
    color: var(--green-600);
    margin-bottom: 24px;
}

/* 1️⃣2️⃣ FAQ */
.faq-section {
    padding: 60px 0;
    background: var(--green-100);
}

.faq-section h2 {
    text-align: center;
    margin-bottom: 40px;
}

.faq-item {
    background: var(--white);
    margin-bottom: 16px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.faq-question {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    text-align: left;
}

.faq-answer {
    padding: 0 20px 20px;
    display: none;
    color: var(--text-muted);
}

.faq-answer.show {
    display: block;
}

footer {
    padding: 40px 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    background: var(--green-50);
    border-top: 1px solid var(--green-200);
}

/* Media Queries for Desktop */
@media (min-width: 768px) {
    .headline {
        font-size: 3rem;
    }

    .pain-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bio-content {
        flex-direction: row;
        text-align: left;
    }

    .bonus-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================
   ANIMATIONS
   ========================================= */

/* Base state for animated elements */
[data-animate] {
    opacity: 0;
    transition-duration: 0.8s;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

/* When visible */
[data-animate].animate-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0);
}

/* EFFECTS */
[data-animate="fade-up"] {
    transform: translateY(40px);
}

[data-animate="fade-down"] {
    transform: translateY(-40px);
}

[data-animate="fade-left"] {
    transform: translateX(40px);
}

[data-animate="fade-right"] {
    transform: translateX(-40px);
}

[data-animate="zoom-in"] {
    transform: scale(0.8);
}

/* Pulse animation for buttons is already defined in existing CSS as keyframes 'pulse' 
   but we can enhance it or leave it as is for the infinite effect. 
   The entrance pulse is handled by the scale transition above if we want 
   or we can let it just fade in. For 'pulse' usage in data-animate, 
   we might want a specific entrance. */

[data-animate="pulse"] {
    transform: scale(0.9);
}

/* Buying Now Indicator - Repositioned styles */
.buying-now {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #e8f5e9;
    color: var(--green-700);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 700;
    margin-top: 24px;
    /* Added top margin since it's now below button */
    margin-bottom: 8px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.price-value {
    color: var(--green-600) !important;
    /* Force green color */
}

/* 3D BOOK MOCKUP */
.mockup-container {
    width: 200px;
    height: 280px;
    margin: 0 auto 32px;
    perspective: 1000px;
    position: relative;
    /* On mobile, we might want to scale it down slightly if needed */
}

.book-3d {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(-30deg);
    transition: transform 0.5s ease-out;
}

/* Hover Effect (Desktop) */
@media (hover: hover) {
    .mockup-container:hover .book-3d {
        transform: rotateY(0deg) scale(1.05);
        /* Faces front */
    }
}

.book-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--green-600) 0%, var(--green-800) 100%);
    border-radius: 4px 8px 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: inset 4px 0 10px rgba(0, 0, 0, 0.1);
    transform: translateZ(25px);
    /* Half thickness */
    z-index: 2;
    text-align: center;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cover-content {
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 20px;
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cover-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cover-subtitle {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.9;
}

.book-spine {
    position: absolute;
    width: 50px;
    /* Thickness determined here */
    height: 100%;
    background: var(--green-900);
    transform: rotateY(-90deg) translateZ(25px);
    /* Half width of cover? No, logic: spine width 50, so move Z by 25? Wait. 
    Standard box: width 200. translateZ(25) = front face at +25. back face at -25. Thickness 50.
    Spine needs to be at left. 
    */
    left: -25px;
    /* push left by half its width */
    /* Actually simplified 3D box logic: */
    /* Front: Z=25. Back: Z=-25.
       Spine (Left): rotateY(-90deg). TranslateZ = 100 (half width of book). 
       Wait, book width is 200. Left side is at x=0? No, center origin.
       Left side is at x=-100.
    */
    /* Let's redo 3D box logic simpler */
    left: 0;
    transform-origin: left;
    transform: rotateY(-90deg) translateX(-25px);
    /* Adjust to match thickness */
    /* This is getting complex without visual feedback. Let's use a simpler known robust specific alignment */
}

/* Robust 3D Book Logic */
.book-3d {
    /* Reset transform for easier mental model */
    transform: rotateY(-30deg) rotateX(10deg);
}

.book-cover {
    /* Front cover */
    transform: translateZ(25px);
    z-index: 10;
}

.book-spine {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    /* Book thickness */
    height: 100%;
    background: #1a3320;
    transform: rotateY(-90deg) translateZ(25px);
    /* Pushes it to the left edge? */
    /* Close enough for CSS art */
    transform-origin: left;
}

/* Pages (simulate stack) */
.book-page {
    position: absolute;
    top: 5px;
    width: 190px;
    height: 270px;
    background: #fff;
    right: 5px;
    /* Aligned right */
    transform: translateZ(22px);
    /* just behind cover */
    border-radius: 0 5px 5px 0;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.book-page:nth-child(4) {
    transform: translateZ(15px);
}

.book-page:nth-child(5) {
    transform: translateZ(10px);
}

/* Scroll interaction class (JS will add this opacity/transform) */
/* Or valid simpler approach: Mobile will scroll, we want it to rotate.
   We can use a variable. */


.pulse-dot {
    width: 10px;
    height: 10px;
    background-color: var(--green-500);
    border-radius: 50%;
    display: inline-block;
    animation: live-pulse 1.5s infinite;
}

@keyframes live-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(76, 175, 80, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

/* Secure Badges */
.secure-badges {
    margin-top: 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Offer List Improvements */
.offer-list li {
    font-size: 1rem;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--green-50);
    padding-bottom: 8px;
}

.offer-list li:last-child {
    border-bottom: none;
}

.includes-title {
    font-weight: 800;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    text-transform: uppercase;
}

/* Notification Toast */
.toast-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    /* Let clicks pass through if covered */
}

.toast {
    background: var(--white);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    animation: slideInLeft 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, fadeOut 0.5s ease-in 4.5s forwards;
    border-left: 4px solid var(--green-500);
    pointer-events: auto;
}

.toast-icon {
    width: 32px;
    height: 32px;
    background: var(--green-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green-600);
    font-size: 18px;
    flex-shrink: 0;
}

.toast-content {
    display: flex;
    flex-direction: column;
}

.toast-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-main);
}

.toast-message {
    font-size: 0.8rem;
    color: var(--text-muted);
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Image Mockup Styles */
.mockup-image-container {
    width: 100%;
    max-width: 380px;
    /* Adjust based on image size preference */
    margin: 0 auto 32px;
    display: flex;
    justify-content: center;
}

.offer-mockup {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
    /* Nice shadow for PNG */
    transition: transform 0.3s ease;
}

.offer-mockup:hover {
    transform: scale(1.02);
}

/* Watching Now Indicator */
.watching-now {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 16px;
    font-weight: 600;
}

.pulse-dot.red {
    background-color: #ef5350;
    animation: live-pulse-red 1.5s infinite;
}

@keyframes live-pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 83, 80, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(239, 83, 80, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 83, 80, 0);
    }
}

/* Bonus Icons */
.bonus-icon {
    font-size: 32px;
    color: var(--green-600);
    margin-bottom: 12px;
    display: block;
}

/* Countdown Timer in Offer Header */
.offer-header {
    background: var(--green-600);
    padding: 16px;
    /* Slightly reduced padding */
    text-align: center;
}

.offer-expires {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.countdown {
    color: var(--white);
    font-size: 2rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    /* Monospaced numbers */
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Marquee Carousel Styles */
.marquee-container {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    position: relative;
}

/* Gradient overlays removed as requested */

.marquee-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: marquee-scroll 25s linear infinite;
}



.marquee-card {
    width: 280px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--green-200);
    background: var(--white);
}

.marquee-card img {
    width: 100%;
    height: 380px;
    /* Fixed height for consistency */
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.marquee-card:hover img {
    transform: scale(1.05);
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Recipe Card Content Styles */
.marquee-card {
    position: relative;
}

.recipe-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.7) 70%, transparent);
    padding: 60px 20px 20px;
    color: white;
    text-align: left;
}

.recipe-info h3 {
    color: white;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 4px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

.recipe-sauce {
    font-size: 0.85rem;
    color: var(--green-200);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.recipe-meta {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 12px;
}

.recipe-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.recipe-meta i {
    color: var(--green-500);
    font-size: 14px;
}

/* Slideshow Styles */
.slideshow-container {
    position: relative;
    max-width: 500px;
    margin: 40px auto;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--green-200);
}

.slide {
    display: none;
    width: 100%;
    animation: fadeIn 0.8s ease-in-out;
}

.slide.active {
    display: block;
}

.slide img {
    width: 100%;
    height: auto;
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Slide Indicators */
.slide-indicators {
    text-align: center;
    padding: 16px 0;
    background: var(--white);
    display: flex;
    justify-content: center;
    gap: 10px;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--green-200);
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: var(--green-600);
    transform: scale(1.2);
}

/* Bonus Card Enhancements */
.bonus-description {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 12px 0 16px;
}

.bonus-price {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--green-100);
}

.price-old {
    font-size: 1rem;
    color: var(--text-muted);
    text-decoration: line-through;
    font-weight: 500;
}

.price-free {
    font-size: 1.1rem;
    color: var(--green-600);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Bonus Total Summary */
.bonus-total {
    background: transparent;
    color: var(--green-800);
    padding: 16px;
    border: 2px dashed var(--green-600);
    border-radius: var(--radius-md);
    text-align: center;
    margin-top: 32px;
}

.total-label {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text-muted);
}

.total-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.total-crossed {
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: line-through;
    opacity: 0.6;
    color: var(--text-muted);
}

.total-free {
    font-size: 1.4rem;
    font-weight: 800;
    background: var(--green-100);
    color: var(--green-700);
    padding: 4px 16px;
    border-radius: var(--radius-sm);
}

/* Sauce Showcase Section */
.sauce-section {
    padding: 60px 0;
    background: var(--white);
    text-align: center;
}

.sauce-section h2 {
    margin-bottom: 40px;
}

.sauce-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.sauce-item {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--green-200);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sauce-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.sauce-item img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}

/* Bio Image Styling */
.bio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Bonus Card Images */
.bonus-image-container {
    width: 100%;
    height: auto;
    /* Changed from fixed 180px to auto */
    margin: 16px 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--green-100);
}

.bonus-image-container img {
    width: 100%;
    height: auto;
    /* Changed from 100% to auto */
    display: block;
    /* Removes bottom space */
    transition: transform 0.4s ease;
}

.bonus-card:hover .bonus-image-container img {
    transform: scale(1.05);
}

/* SYMPTOMS SECTION */
.symptoms-section {
    padding: 40px 0;
    text-align: center;
    background-color: var(--green-50);
    border-bottom: 1px solid var(--green-200);
}

.symptoms-section h2 {
    font-size: 1.6rem;
    color: var(--green-800);
    margin-bottom: 32px;
    text-transform: uppercase;
    line-height: 1.3;
}

.symptoms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin: 0 auto;
}

.symptom-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    background: var(--white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--green-200);
    transition: transform 0.2s ease;
}

.symptom-item:hover {
    transform: translateY(-2px);
    border-color: var(--green-500);
}

.symptom-item i {
    font-size: 32px;
    color: var(--green-600);
    margin-bottom: 12px;
}

.symptom-item span {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--green-800);
    text-transform: uppercase;
    line-height: 1.2;
}

/* Offer Hook */
.offer-hook {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 40px;
}

.offer-hook h3 {
    color: var(--green-800);
    font-size: 1.5rem;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.offer-hook p {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 500;
}

.hook-arrow {
    font-size: 2rem;
    color: var(--green-600);
    margin-top: 20px;
    animation: bounce 2s infinite;
    display: inline-block;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}