/* ========================================
   PLANS LANDING PAGE
   ======================================== */

/* Hero Section */
/* Hero Section */
/* Hero Section - V2 Reference Design */
.plans-hero-v2 {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Warm Beige Background Color fallback */
    background-color: #E8DED0;
    padding: 140px 0 160px;
    color: #2c3e2e;
    /* Dark text */
    text-align: center;
    /* Centered layout mostly */
    position: relative;
    overflow: hidden;
    align-items: center;
}

/* Gradient Overlay - Subtle warm light */
.plans-hero-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* Decorative sparkles/glows (Optional detail from reference) */
.plans-hero-v2::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Subtle radial glow center */
    z-index: 1;
    pointer-events: none;
}

.plans-hero-v2 .container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
}

.hero-content-v2 {
    max-width: 900px;
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Typography */
.plans-hero-v2 h1 {
    font-family: 'DM Serif Display', serif;
    /* Or Playfair Display */
    font-family: 'DM Serif Display', serif;
    /* Or Playfair Display */
    font-size: 4.2rem;
    font-weight: 400;
    /* Serif usually looks better regular/medium */
    margin-bottom: 24px;
    line-height: 1.15;
    color: #2c3e2e;
    /* Dark Sage/Forest */
    letter-spacing: -0.01em;
}

.hero-subtitle-v2 {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    color: #4a4f41;
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Features List */
.hero-features-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    margin-top: 10px;
}

.hero-feature-row {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.hero-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    color: #4a4f41;
    font-size: 1.05rem;
    font-weight: 500;
}

.hero-feature-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Responsive adjustment for features */
@media (max-width: 768px) {
    .hero-feature-row {
        gap: 12px 20px;
        /* Vertical 12, Horizontal 20 */
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .hero-feature-item {
        font-size: 1rem;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .plans-hero-v2 {
        text-align: center;
        padding: 100px 0;
        background-position: 70% center;
        /* Shift background */
    }

    .hero-content-v2 {
        margin: 0 auto;
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        padding: 0 20px;
    }

    .hero-subtitle-v2 {
        margin-left: auto;
        margin-right: auto;
    }

    .plans-hero-v2 {
        background-position: 80% center;
        /* Shift image more to show food on mobile */
    }

    .hero-actions-v2 {
        justify-content: center;
    }

    .trust-badges-row {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .plans-hero-v2 h1 {
        font-size: 2.5rem;
    }

    .trust-badges-row {
        flex-wrap: wrap;
        gap: 16px;
    }

    .trust-divider {
        display: none;
    }

    .trust-badge-item {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        text-align: left;
    }

    .trust-badge-item span {
        max-width: none;
        text-align: left;
    }
}

/* Benefits Section */
.plans-benefits {
    padding: 40px 0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 32px;
}

.benefit-card {
    background: #fff;
    padding: 40px 32px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.benefit-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-sage) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.benefit-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1a1a1a;
}

.benefit-card p {
    color: #666;
    line-height: 1.6;
    font-size: 15px;
}

/* Products Section */
.plans-products {
    padding: 40px 0;
}

.plans-products .section-title {
    text-align: center;
    margin-bottom: 60px;
}

.plans-products .section-title h2 {
    font-size: 42px;
    font-weight: 800;
    color: #4a5c40;
    margin-bottom: 16px;
}

.plans-products .section-title p {
    font-size: 18px;
    color: #666;
}

/* New Horizontal Layout */
.products-grid-horizontal {
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto 60px;
}

.product-plan-card {
    /* Beige/Stone background from reference */
    border-radius: 24px;
    padding: 48px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    min-height: 480px;
}

/* Gradient Overlay */
.product-plan-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Radial gradient from left, matching background color */
    background: radial-gradient(circle at 20% 50%, #f2f0eb 30%, transparent 80%);
    z-index: 1;
}

/* Alternate backgrounds if needed, but the reference shows uniform style. 
   If we want white cards on grey bg vs beige cards */

.product-plan-card.featured {
    background: #f7f5f0;
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
}

.product-plan-card.featured::before {
    display: none;
}

.plan-card-content {
    flex: 1;
    z-index: 2;
    position: relative;
    max-width: 550px;
}

/* Featured Badge */
.plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFF4E5;
    /* Light creamy orange */
    padding: 8px 18px;
    border-radius: 40px;
    margin-bottom: 24px;
    border: 1px solid rgba(230, 126, 34, 0.1);

    /* Ensure it sits in flow above title */
    position: relative;
    top: auto;
    right: auto;
    left: auto;
}

.badge-text {
    color: white;
    /* Deeper orange/brown */
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.badge-icon {
    font-size: 16px;
}

/* Typography */
.product-plan-card h3 {
    font-size: 36px;
    font-weight: 800;
    color: #2c3e2e;
    /* Dark Green */
    margin-bottom: 16px;
    font-family: 'DM Serif Display', serif;
    /* Or theme serif */
    line-height: 1.2;
}

.plan-description {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 32px;
    max-width: 500px;
}

/* Features List */
.plan-features-list ul {
    list-style: none !important;
    padding: 0;
    margin: 0 0 40px;
}

.plan-features-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: #444;
    font-size: 16px;
    font-weight: 500;
    list-style-type: none !important;
}

/* Force hide any pseudo-elements adding checkmarks */
.plan-features-list li::before {
    content: none !important;
    display: none !important;
}

.plan-features-list li svg {
    color: #5F6F56;
    /* Checkmark color */
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* Button */
.btn-view-plan {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #5d7052;
    /* Sage Green button */
    color: #fff;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-view-plan:hover {
    background: #4a5c40;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(93, 112, 82, 0.3);
}

/* Image Side */
/* Image Side - Now Background */
.plan-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    border-radius: 0;
    filter: none;
}


/* CTA Section */
.cta-section {
    text-align: center;
    padding: 60px 0 0;
}

.btn-cta-large {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 20px 48px;
    background: linear-gradient(135deg, #6F7F63 0%, #6F7F63 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(111, 127, 99, 0.3);
}

.btn-cta-large:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(111, 127, 99, 0.4);
    background: #5F6F56;
}

.no-products {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 18px;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 992px) {
    .product-plan-card {
        flex-direction: column-reverse;
        padding: 40px 32px;
        text-align: center;
        gap: 32px;
    }

    .plan-card-content {
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .plan-description {
        margin-left: auto;
        margin-right: auto;
    }

    .plan-features-list li {
        justify-content: center;
        /* Center list items on mobile if text centered */
        text-align: left;
        /* Keep text left aligned usually better */
    }

    .plan-features-list li {
        justify-content: flex-start;
        /* Keep list left aligned looks better */
    }

    .plan-features-list {
        display: inline-block;
        text-align: left;
    }

    .image-wrapper {
        width: 300px;
        height: 300px;
    }

    .products-grid-horizontal {
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .plans-landing-hero {
        padding: 60px 0 50px;
    }

    .plans-landing-hero h1 {
        font-size: 36px;
    }

    .plans-hero-subtitle {
        font-size: 16px;
    }

    .product-plan-card h3 {
        font-size: 28px;
    }

    .btn-view-plan {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }
}

/* Hormone Balance & GLP-1 Card Specials */
.product-plan-card.hormone-balance-card,
.product-plan-card.glp1-card {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    border: none;
    box-shadow: none;
}

/* Ensure overlay is lighter or different if needed, or remove standard overlay if image already has texture */
.product-plan-card.hormone-balance-card::before,
.product-plan-card.glp1-card::before {
    display: none;
}

.hormone-balance-card .plan-card-content,
.glp1-card .plan-card-content {
    max-width: 60%;
    /* Limit width to leave room for the plate in the bg image */
    padding-right: 20px;
}

@media (max-width: 992px) {

    .hormone-balance-card .plan-card-content,
    .glp1-card .plan-card-content {
        max-width: 100%;
        padding-right: 0;
        background: rgba(255, 255, 255, 0.9);
        /* readable on mobile if image covers */
        border-radius: 20px;
        padding: 30px 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }
}

/* New Badge Styling */
.new-badge {
    background: #FFF8E7;
    /* Pale yellowish cream */
    border: none;
    padding: 6px 16px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.new-badge .badge-text {
    color: #4a5c40;
    /* Reddish tone from image */
    font-weight: 700;
    text-transform: none;
    /* Title case "Nou" */
    font-size: 1rem;
    letter-spacing: 0.3px;
}

.new-badge .badge-icon svg {
    width: 16px;
    height: 16px;
    margin-top: -2px;
    /* Slight optical adjustment */
}

.hormone-balance-card h3 {
    color: #4a5c40;
    /* Specific green from screenshot */
    font-size: 2.5rem;
    margin-bottom: 16px;
    line-height: 1.1;
}

.hormone-balance-card .plan-description {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 24px;
}

/* Custom list items for Hormone Balance are handled by SVG inline in PHP, 
   but ensure alignment */
.hormone-balance-card .benefits-list li {
    align-items: flex-start;
    margin-bottom: 12px;
}

.hormone-balance-card .benefits-list li span {
    color: #444;
    font-size: 1rem;
    line-height: 1.4;
}

/* ========================================
   OTHER PLANS SECTION
   ======================================== */
.other-plans-section {
    padding: 72px 0;
    /* Fallback */
}


.other-plans-section .section-title h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 36px;
    color: #4a5c40;
    margin-bottom: 40px;
    text-align: center;
}

.other-plans-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Card General Styling */
.other-plan-card {
    background-image: url('assets/images/section-background-general.png');
    background-size: cover;
    /* Textured background */
    border-radius: 20px;
    padding: 20px;
    min-height: 227px;
    display: flex;
    flex-direction: row;
    /* Side by side */
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.other-plan-card:hover {
    transform: translateY(-5px);
}

/* Remove gradient overlay as we now use distinct elements */
.other-plan-card::before {
    display: none;
}

.other-plan-card.wide-card {
    grid-column: span 2;
}

.other-plan-content {
    position: relative;
    z-index: 2;
    flex: 1;
    padding-right: 20px;
    /* max-width: 60%; Removed constraint to let flex handle it */
}

.plan-image-container {
    flex: 0 0 auto;
    /* Don't grow or shrink */
    max-width: none;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.plan-image-container img {
    width: 200px;
    /* Fixed width as requested */
    height: auto;
    /* border-radius: 12px; Optional, can remove if edges need to be sharp */
    display: block;
}

/* Specific Card adjustments */
.coming-soon-card .other-plan-content {
    /* max-width: 60%; Removed */
}

.other-plan-card h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 24px;
    color: #2c3e2e;
    margin-bottom: 12px;
}

.other-plan-card p {
    font-size: 16px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
}

.subtitle {
    font-weight: 700;
    color: #4a5c40;
    margin-bottom: 4px !important;
}

.details {
    font-size: 18px !important;
    font-weight: 600;
    color: #2c3e2e;
    margin-bottom: 8px !important;
}

/* Coming Soon Styling */
.coming-soon-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.star-icon {
    color: #E6A857;
    /* Gold star */
    font-size: 24px;
}

.coming-soon-card h3 {
    margin-bottom: 0;
}

.upcoming-list {
    padding: 0;
    margin-top: 10px;
}

.list-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #7A6652;
    /* Brownish */
    margin-bottom: 10px;
}

.lock-icon {
    font-size: 16px;
}

.upcoming-list ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.upcoming-list li {
    font-size: 14px;
    color: #555;
    font-size: 14px;
    color: #555;
    margin-bottom: 2px;
}

/* Buttons */
.btn-text-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #4a5c40;
    text-decoration: none;
    font-size: 16px;
    transition: gap 0.2s ease;
}

.btn-text-arrow:hover {
    gap: 10px;
    color: #2c3e2e;
}

.card-bottom-action {
    position: relative;
    z-index: 2;
    margin-top: 20px;
}

.btn-sage-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #5F6F56;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.btn-sage-pill:hover {
    background-color: #4a5c40;
    color: #fff !important;
}

/* Responsive */
@media (max-width: 768px) {
    .other-plans-grid {
        grid-template-columns: 1fr;
    }

    .other-plan-card.wide-card {
        grid-column: span 1;
    }

    .other-plan-card {
        min-height: auto;
        padding: 24px;
    }
}

/* ========================================
   Comparison Section (Basic vs Premium)
   ======================================== */
.comparison-section {
    padding: 60px 0 100px;
    position: relative;
    /* Background inherits or use same texture if needed */
    overflow: hidden;
    /* Prevent horizontal scroll from decorations */
}

.comparison-section .section-title h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 32px;
    color: #4a5c40;
    text-align: center;
    margin-bottom: 40px;
}

.comparison-table-wrapper {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-image: url('assets/images/section-background-general.png');
    background-size: cover;
}

.comparison-table-wrapper .table-inner-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    box-sizing: border-box;
}

/* ---- Header Row ---- */
.comparison-table thead tr {
    background: none;
    position: relative;
}

.comparison-table th:nth-child(2) {
    background: #606d50;
}

.comparison-table th:nth-child(3) {
    background: #4a5540;
}

.comparison-table th {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #ffffff;
    padding: 26px 32px;
    border: none;
    position: relative;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.comparison-table th:first-child {
    text-align: left;
    width: 52%;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    border-top-left-radius: 12px;
    background: #6a7a5a;
}

.comparison-table th:nth-child(2),
.comparison-table th:nth-child(3) {
    width: 24%;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #ffffff;
}

.comparison-table th:nth-child(3) {
    border-top-right-radius: 12px;
}

/* ---- Body Rows ---- */
.comparison-table tbody tr {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.comparison-table tbody tr::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 32px;
    right: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(96, 109, 80, 0.12) 15%, rgba(96, 109, 80, 0.12) 85%, transparent);
}

.comparison-table tbody tr:last-child::after {
    display: none;
}

.comparison-table tbody tr:hover {
    background: rgba(96, 109, 80, 0.04);
}

.comparison-table td {
    padding: 20px 32px;
    text-align: center;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    color: #5a6a5a;
    border: none;
    transition: all 0.25s ease;
}

.comparison-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: #3d4d35;
    font-size: 15px;
}

/* ---- Check Icon ---- */
.check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(145deg, #6a7a5a 0%, #5a6a4a 50%, #4a5c40 100%);
    color: white;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(74, 92, 64, 0.25);
}

/* ---- Dash Icon ---- */
.dash-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #e5e5e5;
    color: #a0a0a0;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 400;
}

/* ---- Notebook Decoration ---- */
.notebook-decoration {
    position: absolute;
    bottom: -40px;
    right: -95px;
    width: 280px;
    height: auto;
    z-index: 10;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

/* ---- Mobile Responsive ---- */
@media (max-width: 768px) {
    .comparison-table-wrapper {
        padding: 20px 10px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 14px 12px;
        font-size: 13px;
    }

    .comparison-table th {
        font-size: 10px;
        padding: 18px 12px;
    }

    .comparison-table th:nth-child(2),
    .comparison-table th:nth-child(3) {
        font-size: 12px;
    }

    .comparison-table tbody tr::after {
        left: 12px;
        right: 12px;
    }

    .check-icon,
    .dash-icon {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .notebook-decoration {
        display: none;
    }
}

/* ========================================
   NEW CTA SECTION SECONDARY
   ======================================== */
.cta-section-secondary {
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}

.cta-section-secondary .container {
    max-width: 1140px;
}

.cta-secondary-content {
    /* Light warm beige texturized feel */
    background-image: url('assets/images/section-background-general.png');
    /* Gentle texture if available, or fallback */
    background-size: cover;
    background-position: center;
    border-radius: 24px;
    padding: 60px 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
}

.cta-text-wrapper {
    flex: 1;
    max-width: 600px;
    position: relative;
    z-index: 2;
}

.cta-text-wrapper h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 3rem;
    color: #2c3e2e;
    line-height: 1.1;
    margin-bottom: 24px;
}

.cta-text-wrapper p {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 32px;
    line-height: 1.6;
}

/* Button - reuse or custom */
.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background-color: #5d7052;
    /* Sage Green */
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(93, 112, 82, 0.2);
}

.btn-cta-secondary:hover {
    background-color: #4a5c40;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(93, 112, 82, 0.3);
    animation: pulse-sage 2s infinite;
}

/* Define animations locally if not in global style.css yet, 
   or ensure we use the global one if it matches. 
   Adding local keyframes to be safe and specific to this sage color. */
@keyframes pulse-sage {
    0% {
        box-shadow: 0 0 0 0 rgba(93, 112, 82, 0.7);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(93, 112, 82, 0);
        transform: scale(1.02);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(93, 112, 82, 0);
        transform: scale(1);
    }
}

/* Card Animation - Subtle Float/Shimmer */
@keyframes float-card {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0px);
    }
}

.cta-secondary-content {
    /* ... existing props ... */
    background-color: #F9F7F2;
    background-image: url('assets/images/section-background-general.png');
    background-size: cover;
    background-position: center;
    border-radius: 24px;
    padding: 60px 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);

    /* Animation */
    animation: float-card 1s ease-in-out infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-secondary-content:hover {
    /* Pause float on hover so it doesn't feel slippery, 
       or just enhance the lift */
    animation-play-state: paused;
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.06);
}

.botanical-leaves {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    /* Fully visible now */
    transform: none;
}

@media (max-width: 992px) {
    .cta-secondary-content {
        flex-direction: column;
        text-align: center;
        padding: 60px 30px;
    }

    .cta-text-wrapper {
        max-width: 100%;
        margin-bottom: 30px;
    }

    .cta-text-wrapper h2 {
        font-size: 2.2rem;
    }

    .cta-decoration {
        position: relative;
        transform: none;
        top: auto;
        right: auto;
        height: auto;
        margin-top: -40px;
        opacity: 0.6;
        /* Fade out slightly if obstructing */
    }

    .botanical-leaves {
        transform: none;
        max-height: 200px;
    }

    /* Other Plans Tablet Fix */
    .other-plans-grid {
        grid-template-columns: 1fr;
        /* Stack grid on tablet/mobile */
    }

    .other-plan-card.wide-card {
        grid-column: span 1;
        /* Reset span */
    }
}

@media (max-width: 768px) {

    /* Hero Adjustments */
    .plans-hero-v2 {
        padding: 60px 0;
    }

    .plans-hero-v2 h1 {
        font-size: 2.5rem;
    }

    /* Product Card Mobile */
    .product-plan-card {
        padding: 20px;
        border-radius: 24px;
        /* Ensure image covers entire card background area */
        overflow: hidden;
    }

    .plan-card-content {
        /* Create the white overlay card look */
        background: rgba(255, 255, 255, 0.9);
        border-radius: 20px;
        padding: 30px 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        width: 100%;
    }

    .image-wrapper {
        width: 100%;
        /* Fluid width */
        height: auto;
        max-width: 300px;
        /* Cap width */
        margin: 0 auto;
        aspect-ratio: 1/1;
    }

    /* Other Plans Mobile */
    .other-plan-card {
        flex-direction: column;
        text-align: center;
        /* Center text as requested */
        padding: 30px 110px 30px 20px;
        /* Right padding to clear image */
        min-height: auto;
        align-items: center;
        /* Center flex items */
        position: relative;
        /* Context for absolute image */
    }

    .other-plan-content {
        padding-right: 0;
        margin-bottom: 0;
        width: 100%;
    }

    .plan-image-container {
        position: absolute;
        top: 50%;
        bottom: auto;
        right: 10px;
        transform: translateY(calc(-50% - 45px));
        width: auto;
        margin-top: 0;
        justify-content: flex-end;
    }

    .plan-image-container img {
        width: 100px;
        /* Reduced size for corner */
        height: auto;
    }

    /* Coming Soon Mobile Specifics */
    .coming-soon-header,
    .list-title {
        justify-content: center;
    }

    /* Comparison Table Mobile Fit */
    .comparison-table-wrapper {
        overflow-x: hidden;
        /* Force hide any potential scroll */
        width: 100%;
        margin-top: 30px;
        padding: 20px 0;
        border: none;
        background: transparent;
        box-sizing: border-box;
    }

    .comparison-table-wrapper .table-inner-container {
        width: 100%;
        box-sizing: border-box;
    }

    .comparison-table {
        min-width: 0;
        /* Absolute reset */
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        /* Ensure borders don't add width */
    }

    .comparison-table th,
    .comparison-table td {
        padding: 10px 4px;
        /* Minimal padding */
        font-size: 12px;
        /* reduced font size for safety */
        word-wrap: break-word;
        word-break: break-word;
        /* Force break */
        box-sizing: border-box;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 12px 6px;
        /* Tight padding */
        font-size: 13px;
        /* Smaller text */
        word-wrap: break-word;
        /* Ensure wrapping */
    }

    .comparison-table th:first-child,
    .comparison-table td:first-child {
        width: 50%;
        /*Give first col more space */
    }

    .comparison-table th:nth-child(2),
    .comparison-table th:nth-child(3),
    .comparison-table td:nth-child(2),
    .comparison-table td:nth-child(3) {
        width: 25%;
    }

    .notebook-decoration {
        display: none;
    }

    /* CTA Mobile */
    .cta-secondary-content {
        padding: 50px 24px;
        background-size: cover;
        /* Prevent distortion on tall mobile containers */
        background-position: center;
    }

    .cta-text-wrapper h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {

    /* Very Small Screens */
    .plans-hero-v2 h1 {
        font-size: 2rem;
    }

    .hero-subtitle-v2 {
        font-size: 1rem;
    }

    .plans-products .section-title h2 {
        font-size: 28px;
    }

    .product-plan-card h3 {
        font-size: 24px;
    }

    .btn-view-plan {
        width: 100%;
        padding: 12px 20px;
        font-size: 14px;
    }

    .other-plan-card {
        padding: 24px 16px;
    }
}

/* Coming Soon Card Vertical Layout */
.other-plan-card.coming-soon-card {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

.card-upper-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* margin-bottom not needed if we use margin-top on the CTA */
}

/* Newsletter Inline Form Styles */
.newsletter-inline-cta {
    margin-top: 12px;
    width: 100%;
}

.cta-msg {
    font-weight: 700;
    font-size: 1rem;
    color: #4a5c40;
    margin-bottom: 12px;
}

.inline-newsletter-form {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.newsletter-inline-input {
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #DED6CB;
    flex: 1;
    font-size: 0.95rem;
    color: #4a4f41;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
}

.newsletter-inline-input:focus {
    border-color: #5F6F56;
}

.btn-sage-pill {
    padding: 12px 24px;
    background-color: #5F6F56;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.3s, transform 0.2s;
}

.btn-sage-pill:hover {
    background-color: #4a5c40;
    transform: translateY(-1px);
}

.inline-success-msg {
    display: none;
    color: #4a5c40;
    font-weight: 700;
    margin-top: 10px;
}

/* ========================================
   RECIPES PAGE RESTYLING
   ======================================== */

/* 1. Hero Section */
.recipes-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 180px 0 140px;
    text-align: center;
    color: #fff;
    /* Ensure text readability if image is bright, though PHP has inline gradient */
}

/* The PHP file has inline styles for bg image and gradient, which is good. */

.hero-eyebrow {
    display: block;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 700;
    opacity: 0.95;
    color: #DDE2D9;
    /* Light Sage */
}

.recipes-hero .hero-title {
    font-family: 'DM Serif Display', serif;
    font-size: 4.5rem;
    margin-bottom: 24px;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.recipes-hero .hero-desc {
    font-size: 1.25rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    color: #f2f2f2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* 2. Benefits */
.recipes-benefits {
    padding: 80px 0;
    /* Light beige */
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
}

.benefit-item {
    background: #fff;
    padding: 32px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s;
}

.benefit-item:hover {
    transform: translateY(-5px);
}

.benefit-item h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: #2c3e2e;
}

.benefit-item p {
    color: #666;
    font-size: 1rem;
    line-height: 1.5;
}

.benefit-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    display: inline-block;
}

/* 3. Featured Recipe */
.featured-recipe-section {
    padding: 100px 0;
}

.featured-wrapper {
    display: flex;
    gap: 80px;
    align-items: center;
}

.featured-image {
    flex: 1;
    position: relative;
}

.featured-image img {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transform: rotate(-2deg);
    /* Artistic touch */
    transition: transform 0.5s;
}

.featured-image:hover img {
    transform: rotate(0deg);
}

.featured-badge {
    position: absolute;
    top: 30px;
    left: 30px;
    background: #E67E22;
    color: #fff;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(230, 126, 34, 0.4);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.featured-content {
    flex: 1;
}

.featured-title {
    font-family: 'DM Serif Display', serif;
    font-size: 3.5rem;
    color: #2c3e2e;
    margin-bottom: 24px;
    line-height: 1.1;
}

.featured-meta {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
    font-weight: 600;
    color: #5F6F56;
    font-size: 1.1rem;
}

.featured-excerpt {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 32px;
}

.btn-recipe-primary {
    display: inline-flex;
    align-items: center;
    background: #5F6F56;
    color: #fff;
    padding: 16px 36px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 10px;
    transition: all 0.3s;
    font-size: 1.1rem;
}

.btn-recipe-primary:hover {
    background: #4a5c40;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(93, 112, 82, 0.3);
}

/* 4. Recipes Grid */
.recipes-catalog {
    padding: 80px 0 120px;
}

.catalog-title {
    text-align: center;
    font-family: 'DM Serif Display', serif;
    font-size: 3rem;
    color: #2c3e2e;
    margin-bottom: 50px;
}

.recipe-filters {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 12px 28px;
    border: 1px solid #E0E0E0;
    background: #fff;
    border-radius: 50px;
    text-decoration: none;
    color: #666;
    font-weight: 600;
    transition: all 0.2s;
    font-size: 1rem;
}

.filter-btn:hover {
    background: #F5F5F5;
    color: #333;
}

.filter-btn.active {
    background: #5F6F56;
    color: #fff;
    border-color: #5F6F56;
    box-shadow: 0 5px 15px rgba(93, 112, 82, 0.25);
}

.recipes-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 40px;
}

.modern-recipe-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.modern-recipe-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.card-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-image-wrapper {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.modern-recipe-card:hover .card-image-wrapper img {
    transform: scale(1.05);
}

.card-placeholder-img {
    width: 100%;
    height: 100%;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-category-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    /* Changed from right to left as per typical design, and ensures it flows naturally */
    right: auto;
    width: fit-content;
    max-width: 80%;
    /* Prevent it from touching the other edge */
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.75rem;
    /* Slight reduction for elegance */
    font-weight: 700;
    color: #5F6F56;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-content {
    padding: 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-action-row {
    margin-top: auto;
    padding-top: 15px;
}

.card-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.5rem;
    color: #2c3e2e;
    margin-bottom: 12px;
    line-height: 1.3;
    min-height: 2.6em;
}

.card-macros {
    display: flex;
    gap: 16px;
    font-size: 0.95rem;
    color: #888;
    font-weight: 500;
}

.card-macros .macro-tag {
    display: flex;
    align-items: center;
    gap: 6px;
}

.no-recipes {
    text-align: center;
    grid-column: 1 / -1;
    font-size: 1.2rem;
    color: #666;
    padding: 40px;
}

/* 5. CTA */
.recipes-cta-modern {
    padding: 120px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Decorative elements for CTA */
.recipes-cta-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('assets/images/grain-texture.png');
    /* If available */
    opacity: 0.05;
    pointer-events: none;
}

.cta-box {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.cta-box h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 3.5rem;
    margin-bottom: 20px;
}

.cta-box p {
    font-size: 1.3rem;
    margin-bottom: 40px;
    opacity: 0.9;
    color: #DDE2D9;
}

.btn-recipe-cta {
    background: #fff;
    color: #2c3e2e;
    padding: 20px 50px;
    border-radius: 50px;
    font-weight: 800;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
    font-size: 1.1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.btn-recipe-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    background: #f2f2f2;
}

/* Responsiveness */
@media (max-width: 992px) {
    .recipes-hero .hero-title {
        font-size: 3.5rem;
    }

    .featured-wrapper {
        gap: 40px;
    }

    .featured-title {
        font-size: 2.5rem;
    }

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

@media (max-width: 768px) {
    .recipes-hero {
        padding: 120px 0 60px;
    }

    .recipes-hero .hero-title {
        font-size: 2.5rem;
    }

    .featured-wrapper {
        flex-direction: column;
        gap: 32px;
    }

    .featured-image,
    .featured-content {
        width: 100%;
        flex: auto;
    }

    .featured-image img {
        transform: none;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Scrollable Filters on Mobile */
    .recipe-filters {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        gap: 10px;
        justify-content: flex-start;
        scrollbar-width: none;
        /* Firefox */
    }

    .recipe-filters::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .filter-btn {
        margin: 0;
    }

    .recipes-grid-modern {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 16px;
        padding-bottom: 30px;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox hide scrollbar */
        /* Bleed edge-to-edge on mobile */
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 40px;
        /* Extra padding at the end so the last card doesn't stick to the edge */
    }

    .recipes-grid-modern::-webkit-scrollbar {
        display: none;
        /* Safari/Chrome hide scrollbar */
    }

    .recipes-grid-modern .modern-recipe-card {
        flex: 0 0 85%;
        /* Take up 85% of viewport width */
        max-width: 320px;
        scroll-snap-align: center;
        /* Align to center for 85% width */
        height: auto;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Simulate active card getting focus slightly if possible through typical swiping, but pure CSS just keeping it neat */
    .recipes-grid-modern .modern-recipe-card:first-child {
        transform: scale(1);
        opacity: 1;
    }

    /* Carousel Dots */
    .carousel-dots-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        text-align: center;
        gap: 8px;
        margin: 20px auto 30px auto !important;
        width: 100% !important;
        max-width: 100vw;
    }

    .carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #DDE2D9;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        cursor: pointer;
        display: inline-block;
    }

    .carousel-dot.active {
        width: 24px;
        border-radius: 4px;
        background-color: #5F6F56;
    }

    .cta-box h2 {
        font-size: 2rem;
    }

    .btn-recipe-cta {
        width: 100%;
        text-align: center;
        padding: 18px;
    }
}

/* ========================================
   MOBILE FIX: Newsletter Form & Anunță-mă Button
   ======================================== */
@media (max-width: 768px) {

    /* Stack newsletter form elements vertically */
    .inline-newsletter-form {
        flex-direction: column;
        gap: 12px;
    }

    .newsletter-inline-input {
        width: 100%;
    }

    .inline-newsletter-form .btn-sage-pill {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
    }

    /* Ensure button text is fully visible */
    .btn-sage-pill {
        min-width: fit-content;
        white-space: nowrap;
    }
}

/* ========================================
   COMING SOON CARD OVERLAY
   ======================================== */
.other-plan-card.coming-soon-overlay {
    position: relative;
}

.other-plan-card.coming-soon-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.4);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

.other-plan-card.coming-soon-overlay .other-plan-content {
    position: relative;
    z-index: 2;
}

.coming-soon-badge {
    display: inline-block;
    background: linear-gradient(135deg, #b0b3ae, #d8e5ca);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.coming-soon-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #606d50;
    font-weight: 500;
    margin-top: 16px;
    opacity: 0.85;
}

.coming-soon-note .lock-icon {
    font-size: 1rem;
}

/* ========================================
   IF Card Featured - Enhanced Design
   ======================================== */
.other-plan-card.if-card-featured {
    border: 2px solid rgba(111, 127, 99, 0.15);
    position: relative;
    overflow: visible;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.other-plan-card.if-card-featured:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(111, 127, 99, 0.18);
    border-color: rgba(111, 127, 99, 0.3);
}

/* IF Card Badge */
.if-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #5d7052 0%, #6F7F63 100%);
    color: #fff;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(93, 112, 82, 0.25);
}

.if-card-badge .badge-icon {
    font-size: 0.9rem;
}

/* IF Card Title */
.if-card-featured h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.6rem;
    color: #3a4b35;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #3a4b35 0%, #5d7052 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* IF Card Tagline */
.if-card-tagline {
    font-size: 0.95rem !important;
    font-weight: 600;
    color: #6F7F63 !important;
    margin-bottom: 16px !important;
    letter-spacing: 0.02em;
}

/* IF Card Features List as Badges */
.if-card-features {
    display: flex;
    flex-wrap: wrap;
    /* Allow badges to wrap into a second line if they don't fit */
    flex-direction: row;
    gap: 8px;
    margin-bottom: 20px;
}

.if-card-feature {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4a5c40;
    font-size: 0.85em;
    /* slightly smaller text for badge */
    font-weight: 500;
    background: rgba(111, 127, 99, 0.08);
    /* light subtle green */
    border: 1px solid rgba(111, 127, 99, 0.15);
    /* delicate border */
    padding: 6px 12px;
    border-radius: 50px;
    /* pill shape */
}

.if-card-feature svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    stroke: #5d7052;
    /* highlight the checkmarks */
}

/* IF Card Primary Button */
.other-plan-card.if-card-featured .btn-if-card-primary,
a.btn-if-card-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #5d7052 0%, #6F7F63 50%, #7a8a68 100%) !important;
    color: #fff !important;
    padding: 14px 28px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    box-shadow:
        0 8px 24px rgba(93, 112, 82, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    margin-top: 8px !important;
}

.btn-if-card-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.other-plan-card.if-card-featured .btn-if-card-primary:hover,
a.btn-if-card-primary:hover {
    background: linear-gradient(135deg, #4a5c40 0%, #5d7052 50%, #6F7F63 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow:
        0 12px 32px rgba(93, 112, 82, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.btn-if-card-primary:hover::before {
    left: 100%;
}

.btn-if-card-primary svg {
    transition: transform 0.3s ease;
}

.btn-if-card-primary:hover svg {
    transform: translateX(4px);
}

/* IF Card Responsive */
@media (max-width: 768px) {
    .if-card-featured h3 {
        font-size: 1.35rem;
    }

    .if-card-features {
        gap: 8px;
    }

    .if-card-feature {
        font-size: 0.85rem;
    }

    .btn-if-card-primary {
        padding: 12px 22px;
        font-size: 0.9rem;
        width: 100%;
    }
}

/* Busy Women Alignment Fix */
.busy-women-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.busy-women-header h3 {
    margin-bottom: 0;
}