:root {
    --primary: #2E7D32;
    /* Rich Green */
    --primary-light: #E8F5E9;
    --secondary: #E65100;
    /* Deep Orange */
    --accent: #4CAF50;
    --text-dark: #1E293B;
    --text-light: #64748B;
    --white: #FFFFFF;
    --bg-light: #F8FAFC;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --radius: 12px;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

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

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

ul {
    list-style: none;
}

.container {
    width: 100%;
    max-width: 600px;
    /* Mobile/Lowticket focused width */
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.highlight {
    color: var(--primary);
}

.text-center {
    text-align: center;
}

.text-uppercase {
    text-transform: uppercase;
}

.font-bold {
    font-weight: 700;
}

/* Buttons */
.btn {
    display: inline-block;
    width: 100%;
    padding: 1.2rem 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary,
.btn-cta,
.btn-neon {
    background: #05FF00;
    color: #000000;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(5, 255, 0, 0.6);
    animation: pulse 1.5s infinite;
    border: none;
}

.btn-primary:hover,
.btn-cta:hover,
.btn-neon:hover {
    transform: scale(1.05);
    background: #33FF33;
    box-shadow: 0 0 30px rgba(5, 255, 0, 0.8);
}

.aggressive-title {
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -2px;
    line-height: 1.1;
    font-size: 3rem;
    color: #0f172a;
    margin-bottom: 1.5rem;
}

.text-danger {
    color: #ffffff !important;
    background: #D32F2F;
    padding: 0 8px;
    border-radius: 6px;
    display: inline-block;
    /* Ensure padding works well */
    transform: rotate(-1deg);
    /* Slight tilt for attention */
}

@media (min-width: 768px) {
    .aggressive-title {
        font-size: 4rem;
        line-height: 1.05;
    }

    .text-danger {
        padding: 0 15px;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 108, 0, 0.7);
    }

    70% {
        transform: scale(1.02);
        box-shadow: 0 0 0 10px rgba(239, 108, 0, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 108, 0, 0);
    }
}

/* Sections */
section {
    padding: 3rem 0;
}

.bg-white {
    background-color: var(--white);
}

.bg-primary-light {
    background-color: var(--primary-light);
}

/* Hero */
.hero {
    padding-top: 2rem;
    padding-bottom: 4rem;
    text-align: center;
}

.eyebrow {
    background-color: var(--primary-light);
    color: var(--primary);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.hero h1 {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

.hero p.subheadline {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 2rem;
}

.hero-img-container {
    margin: 2rem 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

/* Pain Points */
.pain-points li {
    background: var(--white);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
}

/* Checkmarks */
.good-news ul li,
.benefits ul li,
.what-you-get li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.check-icon {
    color: var(--primary);
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Product Reveal */
.product-reveal {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--primary-light);
    text-align: center;
    margin: 2rem 0;
}

.product-title {
    color: var(--primary);
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

/* Deliverables Cards */
.module-card {
    background: var(--white);
    border: 1px solid #E2E8F0;
    padding: 1.5rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    transition: transform 0.2s;
}

.module-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.module-icon {
    background: var(--primary-light);
    color: var(--primary);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

/* Recipe Gallery */
.recipe-gallery {
    padding: 2rem 0;
}

.recipe-gallery h2 {
    color: var(--primary);
    margin-bottom: 2rem;
}

.recipe-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.recipe-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

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

.recipe-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.recipe-info {
    padding: 1rem;
    text-align: center;
}

.recipe-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.recipe-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: var(--primary-light);
    color: var(--primary);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}

@media (min-width: 600px) {
    .recipe-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Price Section - Dark Style */
.price-section-dark {
    background-color: #0f172a;
    /* Dark background for the section or keep light and just make the card dark? User image shows black bg behind text too. Let's make the card distinct. */
    /* actually the requested image is a card on a dark background. I'll stick to the card being the main focus */
}

.price-box-dark {
    background: #111111;
    color: #ffffff;
    max-width: 450px;
    margin: 2rem auto;
    padding: 3rem 2rem;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid #333;
    position: relative;
}

.price-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price-value-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    line-height: 1;
    margin-bottom: 0.5rem;
    color: #00FF29;
    /* Neon Green */
}

/* Recipe Modal (Paper Sheet Style) */
.recipe-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    backdrop-filter: blur(5px);
    overflow-y: auto;
    padding: 20px;
    align-items: flex-start;
    /* Allows scrolling for tall sheets */
    justify-content: center;
}

.recipe-modal.active {
    display: flex;
}

.recipe-sheet {
    background: #fff;
    width: 100%;
    max-width: 700px;
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 3rem;
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    position: relative;
    /* Paper effect */
    background-image: linear-gradient(#fdfdfd, #fff);
}

.recipe-sheet::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--primary);
    /* Color strip at top */
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    cursor: pointer;
    color: #999;
}

.close-modal:hover {
    color: var(--secondary);
}

.sheet-header {
    text-align: center;
    border-bottom: 2px dashed #eee;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.sheet-title {
    font-family: var(--font-heading);
    color: var(--primary);
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.sheet-meta {
    font-family: monospace;
    color: var(--text-light);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sheet-body {
    display: grid;
    gap: 2rem;
}

.sheet-section h4 {
    color: var(--secondary);
    text-transform: uppercase;
    border-left: 4px solid var(--secondary);
    padding-left: 10px;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.ingredients-list {
    list-style: none;
}

.ingredients-list li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ingredients-list li::before {
    content: '•';
    color: var(--primary);
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1;
}

.steps-list {
    counter-reset: step-counter;
}

.steps-list li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.steps-list li::before {
    counter-increment: step-counter;
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-weight: bold;
    font-size: 0.9rem;
}

/* Make existing gallery cards clickable */
.recipe-card {
    cursor: pointer;
    /* ... existing styles ... */
}

/* Paper Photo (Polaroid Style) */
.paper-photo-container {
    float: right;
    margin: 0 0 1.5rem 1.5rem;
    background: #fff;
    padding: 12px 12px 30px 12px;
    /* Polaroid style bottom */
    box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.15);
    transform: rotate(2deg);
    max-width: 280px;
    border: 1px solid #eaeaea;
    transition: transform 0.3s;
}

.paper-photo-container:hover {
    transform: rotate(0deg) scale(1.02);
}

.paper-photo {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

@media (max-width: 600px) {
    .paper-photo-container {
        float: none;
        margin: 0 auto 2rem auto;
        transform: rotate(-1deg);
        max-width: 100%;
    }
}


/* Purchase Notification */
.notification-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* Or left, typically left for social proof, but user asked for "notifications" which can be anywhere. Let's do bottom right for less obstruction on mobile, or bottom center. Bottom left is standard. Let's do Bottom Left. */
    left: 20px;
    right: auto;
    z-index: 9999;
}

.notification-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 280px;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-left: 4px solid var(--primary);
}

.notification-card.active {
    transform: translateY(0);
    opacity: 1;
}

.notification-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
    flex-shrink: 0;
}

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

.notification-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
}

.notification-action {
    font-size: 0.8rem;
    color: var(--text-light);
}

.notification-time {
    font-size: 0.75rem;
    color: #999;
    margin-top: 2px;
}

@media (max-width: 480px) {
    .notification-container {
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        bottom: 10px;
    }

    .notification-card {
        width: 100%;
    }
}



.price-value {
    font-size: 5rem;
    font-weight: 800;
    letter-spacing: -2px;
}

.cents {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 8px;
}

.payment-type {
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 2.5rem;
    font-weight: 400;
}

.price-benefits {
    text-align: left;
    max-width: 300px;
    margin: 0 auto 2.5rem auto;
}

.price-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: #e2e2e2;
    font-size: 1rem;
}

.price-benefits i {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    padding: 4px;
    font-size: 0.7rem;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* btn-neon styles now handled in the main button block */

/* Update Guarantee for dark context if needed or keep separate */
.guarantee-box {
    margin-top: 3rem;
    background: #ffffff;
    border: 1px dashed #ccc;
}


@media (min-width: 768px) {
    .container {
        max-width: 800px;
    }

    .hero h1 {
        font-size: 3rem;
    }

    .grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

/* Horizontal Recipe Card (Side by Side) */
.recipe-card-horizontal {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
    transition: transform 0.3s ease;
    border: 1px solid #eee;
}

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

.recipe-horizontal-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.recipe-horizontal-content {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.recipe-horizontal-ingredients {
    margin: 1rem 0;
    list-style: none;
}

.recipe-horizontal-ingredients li {
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.recipe-horizontal-ingredients li::before {
    content: '✔';
    color: var(--primary);
    font-weight: bold;
    font-size: 0.9rem;
}

@media (min-width: 768px) {
    .recipe-card-horizontal {
        flex-direction: row;
        align-items: stretch;
    }

    .recipe-horizontal-img {
        width: 45%;
        height: auto;
        min-height: 300px;
    }
}