/* Lucide icons */
        [data-lucide] {
            width: 1em;
            height: 1em;
            vertical-align: -0.125em;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            fill: none;
            display: inline-block;
        }

        .login-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: -1;
        }

        .close-modal {
            position: absolute;
            right: 15px;
            top: 15px;
            font-size: 28px;
            font-weight: bold;
            color: #999;
            cursor: pointer;
        }
        
        .close-modal:hover {
            color: #333;
        }
        
        .success-message {
            padding: 12px;
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
            border-radius: 6px;
        }
        
        .error-message {
            padding: 12px;
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
            border-radius: 6px;
        }
        
        /* Typing indicator */
        .message.typing {
            display: flex;
            gap: 5px;
            padding: 15px;
        }
        
        .typing-dot {
            width: 8px;
            height: 8px;
            background-color: #666;
            border-radius: 50%;
            animation: typing 1.4s infinite;
        }
        
        .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }
        
        @keyframes typing {
            0%, 60%, 100% {
                transform: translateY(0);
                opacity: 0.7;
            }
            30% {
                transform: translateY(-10px);
                opacity: 1;
            }
        }
        
        /* ============================================
           Landing Page (#login-page) — Full-page scrollable
           ============================================ */
        #login-page {
            --lp-bg: #F8F4E9;
            --lp-bg-white: #FFFFFF;
            --lp-gold: #C5A059;
            --lp-gold-dark: #A88542;
            --lp-dark: #3D3321;
            --lp-body: #5A4E3B;
            --lp-muted: #8A7E6B;
            --lp-border: #E6DFD0;
            --lp-shadow-sm: 0 2px 8px rgba(61,51,33,0.08);
            --lp-shadow-md: 0 4px 16px rgba(61,51,33,0.12);
            --lp-shadow-lg: 0 8px 32px rgba(61,51,33,0.16);
            --lp-radius: 12px;
            --lp-radius-sm: 8px;
            --lp-transition: 0.3s ease;
            --lp-heading: 'Playfair Display', Georgia, serif;
            --lp-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            --lp-max-w: 1200px;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 999;
            overflow-y: auto;
            background: var(--lp-bg, #F8F4E9);
            font-family: var(--lp-font);
            color: var(--lp-body);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        #login-page h1, #login-page h2, #login-page h3 {
            font-family: var(--lp-heading);
            color: var(--lp-dark);
            line-height: 1.2;
        }

        #login-page h2 { font-size: 2.25rem; font-weight: 700; margin-bottom: 1rem; }
        #login-page h3 { font-size: 1.25rem; font-weight: 600; }

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

        /* Container */
        .lp-container { max-width: var(--lp-max-w); margin: 0 auto; padding: 0 24px; }
        .lp-section-padding { padding: 80px 0; }
        .lp-section-label { display: inline-block; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; font-weight: 600; color: var(--lp-gold); margin-bottom: 0.75rem; }
        .lp-section-subtitle { font-size: 1.1rem; color: var(--lp-muted); max-width: 600px; margin: 0 auto 3rem; }
        .lp-text-center { text-align: center; }

        /* Buttons */
        .lp-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; border-radius: var(--lp-radius-sm); font-weight: 600; font-size: 1rem; transition: all var(--lp-transition); border: none; cursor: pointer; text-decoration: none; }
        .lp-btn-primary { background: var(--lp-gold); color: #fff; }
        .lp-btn-primary:hover { background: var(--lp-gold-dark); transform: translateY(-2px); box-shadow: var(--lp-shadow-md); }
        .lp-btn-ghost { border: 2px solid var(--lp-gold); color: var(--lp-gold); background: transparent; }
        .lp-btn-ghost:hover { background: var(--lp-gold); color: #fff; transform: translateY(-2px); }
        .lp-btn-white { background: #fff; color: var(--lp-gold); }
        .lp-btn-white:hover { background: var(--lp-bg); transform: translateY(-2px); box-shadow: var(--lp-shadow-md); }

        /* Fade-in */
        .lp-fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
        .lp-fade-in.visible { opacity: 1; transform: translateY(0); }
        @media (prefers-reduced-motion: reduce) { .lp-fade-in { opacity: 1; transform: none; transition: none; } }

        /* Navigation */
        .landing-nav { position: sticky; top: 0; z-index: 1000; padding: 16px 0; transition: all var(--lp-transition); background: transparent; }
        .landing-nav.nav-scrolled { background: #fff; box-shadow: var(--lp-shadow-sm); padding: 12px 0; }
        .landing-nav .lp-container { display: flex; align-items: center; justify-content: space-between; }
        .lp-nav-logo { font-family: var(--lp-heading); font-size: 1.5rem; font-weight: 700; color: var(--lp-dark); text-decoration: none; }
        .lp-nav-logo span { color: var(--lp-gold); }
        .lp-nav-links { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
        .lp-nav-links a { font-size: 0.95rem; font-weight: 500; color: var(--lp-body); transition: color var(--lp-transition); text-decoration: none; }
        .lp-nav-links a:hover { color: var(--lp-gold); }
        .lp-nav-btn-ghost { padding: 8px 20px; border: 2px solid var(--lp-gold); color: var(--lp-gold); border-radius: var(--lp-radius-sm); font-weight: 600; font-size: 0.95rem; background: transparent; cursor: pointer; transition: all var(--lp-transition); }
        .lp-nav-btn-ghost:hover { background: var(--lp-gold); color: #fff; }
        .lp-nav-cta { padding: 10px 24px; background: var(--lp-gold); color: #fff; border-radius: var(--lp-radius-sm); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all var(--lp-transition); }
        .lp-nav-cta:hover { background: var(--lp-gold-dark); }
        .lp-hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; background: none; border: none; }
        .lp-hamburger span { display: block; width: 24px; height: 2px; background: var(--lp-dark); transition: all var(--lp-transition); }
        .lp-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
        .lp-hamburger.active span:nth-child(2) { opacity: 0; }
        .lp-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

        /* Hero */
        .lp-hero { background: var(--lp-bg); padding: 140px 0 80px; }
        .lp-hero .lp-container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
        .lp-hero h1 { font-size: 3rem; margin-bottom: 1.25rem; }
        .lp-hero-subtitle { font-size: 1.15rem; color: var(--lp-muted); margin-bottom: 2rem; line-height: 1.7; }
        .lp-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
        .lp-hero-image img { border-radius: var(--lp-radius); box-shadow: var(--lp-shadow-lg); transition: transform var(--lp-transition); }
        .lp-hero-image img:hover { transform: scale(1.03); }

        /* Trust Bar */
        .lp-trust-bar { background: var(--lp-bg-white); padding: 32px 0; border-top: 1px solid var(--lp-border); border-bottom: 1px solid var(--lp-border); }
        .lp-trust-bar .lp-container { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; }
        .lp-trust-item { display: flex; align-items: center; gap: 10px; color: var(--lp-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
        .lp-trust-icon { width: 20px; height: 20px; flex-shrink: 0; }

        /* Problem / Solution */
        .lp-problem-solution { background: var(--lp-bg); }
        .lp-ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
        .lp-ps-card { background: var(--lp-bg-white); border-radius: var(--lp-radius); padding: 40px; box-shadow: var(--lp-shadow-sm); }
        .lp-ps-card h3 { font-size: 1.5rem; margin-bottom: 1.5rem; }
        .lp-problem h3 { color: #8B4513; }
        .lp-solution h3 { color: var(--lp-gold); }
        .lp-ps-list { display: flex; flex-direction: column; gap: 20px; }
        .lp-ps-item { display: flex; align-items: flex-start; gap: 14px; }
        .lp-ps-item-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; }
        .lp-problem .lp-ps-item-icon { background: #FFF0E0; }
        .lp-solution .lp-ps-item-icon { background: #F5EFD6; }
        .lp-ps-item-text strong { display: block; color: var(--lp-dark); margin-bottom: 4px; }
        .lp-ps-item-text span { font-size: 0.95rem; color: var(--lp-muted); }

        /* Features */
        .lp-features { background: var(--lp-bg-white); }
        .lp-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
        .lp-feature-card { background: var(--lp-bg-white); border: 1px solid var(--lp-border); border-radius: var(--lp-radius); padding: 36px 28px; transition: all var(--lp-transition); }
        .lp-feature-card:hover { transform: translateY(-8px); box-shadow: var(--lp-shadow-md); }
        .lp-feature-icon { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #F5EFD6, #EDE4C8); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; font-size: 1.5rem; }
        .lp-feature-card h3 { margin-bottom: 0.75rem; }
        .lp-feature-card p { font-size: 0.95rem; color: var(--lp-muted); line-height: 1.6; }

        /* How It Works */
        .lp-how-it-works { background: var(--lp-bg); }
        .lp-steps-grid { display: flex; justify-content: center; align-items: flex-start; gap: 0; }
        .lp-step { text-align: center; flex: 1; max-width: 280px; position: relative; }
        .lp-step-number { width: 56px; height: 56px; border-radius: 50%; background: var(--lp-gold); color: #fff; font-family: var(--lp-heading); font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; }
        .lp-step-connector { display: flex; align-items: center; justify-content: center; flex: 0 0 80px; padding-top: 28px; }
        .lp-line { width: 80px; height: 2px; background: var(--lp-border); }
        .lp-step h3 { margin-bottom: 0.5rem; }
        .lp-step p { font-size: 0.95rem; color: var(--lp-muted); }

        /* Testimonials */
        .lp-testimonials { background: var(--lp-bg-white); }
        .lp-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
        .lp-testimonial-card { background: var(--lp-bg-white); border: 1px solid var(--lp-border); border-radius: var(--lp-radius); padding: 36px 28px; transition: all var(--lp-transition); }
        .lp-testimonial-card:hover { transform: translateY(-8px); box-shadow: var(--lp-shadow-md); }
        .lp-testimonial-stars { color: var(--lp-gold); font-size: 1.1rem; margin-bottom: 1rem; letter-spacing: 2px; }
        .lp-testimonial-quote { font-size: 1rem; line-height: 1.7; color: var(--lp-body); margin-bottom: 1.5rem; font-style: italic; }
        .lp-testimonial-author strong { display: block; color: var(--lp-dark); }
        .lp-testimonial-author span { font-size: 0.9rem; color: var(--lp-muted); }

        /* Pricing */
        .lp-pricing { background: var(--lp-bg); }
        .lp-pricing-toggle { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 3rem; }
        .lp-toggle-label { font-weight: 500; color: var(--lp-muted); font-size: 0.95rem; cursor: pointer; user-select: none; }
        .lp-toggle-label.active { color: var(--lp-dark); font-weight: 600; }
        /* Touch target 44px via transparent padding; visual pill via ::before */
        .lp-toggle-switch { width: 52px; height: 44px; background: transparent; border-radius: 22px; position: relative; cursor: pointer; border: none; padding: 0; }
        .lp-toggle-switch::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 52px; height: 28px; background: var(--lp-border); border-radius: 14px; transition: background var(--lp-transition); }
        .lp-toggle-switch.active::before { background: var(--lp-gold); }
        .lp-toggle-switch::after { content: ''; position: absolute; top: 50%; left: 3px; transform: translateY(-50%); width: 22px; height: 22px; background: #fff; border-radius: 50%; transition: transform var(--lp-transition); z-index: 1; }
        .lp-toggle-switch.active::after { transform: translateY(-50%) translateX(24px); }
        .lp-save-badge { background: #E8F5E9; color: #2E7D32; font-size: 0.8rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; cursor: pointer; user-select: none; }
        .lp-pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
        .lp-pricing-card { background: var(--lp-bg-white); border: 1px solid var(--lp-border); border-radius: var(--lp-radius); padding: 40px 32px; text-align: center; transition: all var(--lp-transition); position: relative; }
        .lp-pricing-card:hover { transform: translateY(-8px); box-shadow: var(--lp-shadow-md); }
        .lp-pricing-card.lp-popular { border: 2px solid var(--lp-gold); box-shadow: var(--lp-shadow-md); }
        .lp-popular-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--lp-gold); color: #fff; padding: 4px 20px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
        .lp-pricing-card h3 { font-size: 1.35rem; margin-bottom: 0.75rem; }
        .lp-pricing-amount { font-family: var(--lp-heading); font-size: 3rem; font-weight: 700; color: var(--lp-dark); }
        .lp-currency { font-size: 1.25rem; vertical-align: super; }
        .lp-pricing-period { font-size: 0.9rem; color: var(--lp-muted); margin-bottom: 1.5rem; }
        .lp-pricing-features { text-align: left; margin-bottom: 2rem; list-style: none; padding: 0; }
        .lp-pricing-features li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 0.95rem; color: var(--lp-body); }
        .lp-pricing-features li::before { content: '\2713'; color: var(--lp-gold); font-weight: 700; flex-shrink: 0; }
        .lp-pricing-card .lp-btn { width: 100%; }

        /* Gift & Referral section */
        .lp-gift-referral { background: var(--lp-bg); }
        .lp-gr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 800px; margin: 0 auto; }
        .lp-gr-card { background: var(--lp-bg-white); border: 1px solid var(--lp-border); border-radius: var(--lp-radius); padding: 40px 32px; text-align: center; transition: all var(--lp-transition); }
        .lp-gr-card:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow-md); }
        .lp-gr-card h3 { font-family: var(--lp-heading); margin: 16px 0 12px; color: var(--lp-dark); }
        .lp-gr-card p { color: var(--lp-body); font-size: 0.95rem; line-height: 1.6; margin-bottom: 24px; }
        .lp-gr-icon { font-size: 2.5rem; }

        /* FAQ */
        .lp-faq { background: var(--lp-bg-white); }
        .lp-faq-list { max-width: 800px; margin: 0 auto; }
        .lp-faq-item { border-bottom: 1px solid var(--lp-border); }
        .lp-faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font-size: 1.05rem; font-weight: 600; color: var(--lp-dark); text-align: left; cursor: pointer; transition: color var(--lp-transition); background: none; border: none; font-family: var(--lp-font); }
        .lp-faq-question:hover { color: var(--lp-gold); }
        .lp-faq-chevron { width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--lp-transition); }
        .lp-faq-item.active .lp-faq-chevron { transform: rotate(180deg); }
        .lp-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
        .lp-faq-answer-inner { padding: 0 0 20px; font-size: 0.95rem; line-height: 1.7; color: var(--lp-muted); }

        /* Final CTA */
        .lp-final-cta { background: linear-gradient(135deg, var(--lp-gold), var(--lp-gold-dark)); padding: 80px 0; text-align: center; }
        .lp-final-cta h2 { color: #fff; font-size: 2.25rem; margin-bottom: 1rem; }
        .lp-final-cta p { color: rgba(255,255,255,0.9); font-size: 1.1rem; margin-bottom: 2rem; }

        /* Footer */
        .lp-footer { background: var(--lp-dark); color: rgba(255,255,255,0.7); padding: 64px 0 32px; }
        .lp-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
        .lp-footer-brand p { margin-top: 12px; font-size: 0.9rem; line-height: 1.6; }
        .lp-footer h4 { color: #fff; font-family: var(--lp-font); font-size: 0.95rem; font-weight: 600; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; }
        .lp-footer ul { list-style: none; padding: 0; margin: 0; }
        .lp-footer ul li { margin-bottom: 10px; }
        .lp-footer ul a { font-size: 0.9rem; transition: color var(--lp-transition); color: rgba(255,255,255,0.7); text-decoration: none; }
        .lp-footer ul a:hover { color: var(--lp-gold); }
        .lp-footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; text-align: center; font-size: 0.85rem; }

        /* Landing page responsive */
        @media (max-width: 1100px) {
            #login-page h2 { font-size: 2rem; }
            .lp-hero h1 { font-size: 2.5rem; }
            .lp-features-grid, .lp-testimonials-grid, .lp-pricing-grid { grid-template-columns: repeat(2, 1fr); }
            .lp-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
        }
        @media (max-width: 768px) {
            .lp-section-padding { padding: 60px 0; }
            #login-page h2 { font-size: 1.75rem; }
            .lp-hamburger { display: flex; }
            .lp-nav-links { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: #fff; flex-direction: column; padding: 80px 32px 32px; gap: 24px; box-shadow: var(--lp-shadow-lg); transition: right var(--lp-transition); z-index: 1001; }
            .lp-nav-links.active { right: 0; }
            .lp-hero .lp-container { grid-template-columns: 1fr; text-align: center; }
            .lp-hero h1 { font-size: 2rem; }
            .lp-hero-ctas { justify-content: center; flex-direction: column; align-items: stretch; }
            .lp-hero-image { order: -1; max-width: 400px; margin: 0 auto; }
            .lp-trust-bar .lp-container { gap: 24px; }
            .lp-ps-grid { grid-template-columns: 1fr; }
            .lp-features-grid, .lp-testimonials-grid, .lp-pricing-grid { grid-template-columns: 1fr; }
            .lp-gr-grid { grid-template-columns: 1fr; }
            .lp-steps-grid { flex-direction: column; align-items: center; }
            .lp-step-connector { transform: rotate(90deg); padding-top: 0; margin: -10px 0; }
            .lp-footer-grid { grid-template-columns: 1fr; gap: 32px; }
            .lp-final-cta h2 { font-size: 1.75rem; }
        }

        /* ============================================
           Auth Modal
           ============================================ */
        .auth-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1100;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .auth-modal.hidden { display: none; }
        .auth-modal-backdrop {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        .auth-modal-content {
            position: relative;
            z-index: 1;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(61, 40, 23, 0.15);
            border: 1px solid rgba(201, 165, 90, 0.2);
            max-width: 480px;
            width: 92%;
            max-height: 92vh;
            overflow-y: auto;
        }
        @media (max-width: 500px) {
            .auth-modal-content { padding: 28px 20px; width: 96%; }
        }
        .auth-modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            font-size: 28px;
            color: #999;
            cursor: pointer;
            background: none;
            border: none;
            line-height: 1;
            z-index: 2;
        }
        .auth-modal-close:hover { color: #333; }

        /* Auth modal inner styles (logo, header, tabs) */
        .auth-modal-content .logo-container { display: flex; justify-content: center; margin-bottom: 20px; }
        .auth-modal-content .animated-logo { animation: logoFloat 3s ease-in-out infinite; }
        .auth-modal-content .logo-circle { animation: logoPulse 2s ease-in-out infinite; transform-origin: center; }
        @keyframes logoFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
        @keyframes logoPulse { 0%, 100% { stroke-width: 2; opacity: 1; } 50% { stroke-width: 3; opacity: 0.8; } }
        .auth-modal-content .login-header h1 { margin: 10px 0 5px 0; text-align: center; color: #3d2817; font-size: 32px; }
        .auth-modal-content .login-header p { text-align: center; color: #666; margin-bottom: 30px; }

        /* Reset password page styling */
        #reset-password-page {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1001;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Keep login-container styles for reset-password-page */
        .login-container {
            position: relative;
            z-index: 1;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(61, 40, 23, 0.15);
            border: 1px solid rgba(201, 165, 90, 0.2);
            max-width: 450px;
            width: 90%;
        }
        .login-header h1 { margin: 10px 0 5px 0; text-align: center; color: #3d2817; font-size: 32px; }
        .login-header p { text-align: center; color: #666; margin-bottom: 30px; }
        .logo-container { display: flex; justify-content: center; margin-bottom: 20px; }
        .animated-logo { animation: logoFloat 3s ease-in-out infinite; }
        .logo-circle { animation: logoPulse 2s ease-in-out infinite; transform-origin: center; }

        /* Demo widget */
        .demo-widget-outer { width: 100%; max-width: 560px; }
        .demo-widget-header { margin-bottom: 14px; }
        .demo-widget-sub { font-size: 0.9rem; color: #888; margin: 6px 0 0 0; }
        .demo-widget {
            background: #fff;
            border-radius: 16px;
            box-shadow: var(--lp-shadow-lg);
            padding: 32px;
            width: 100%;
            border: 1px solid rgba(201,165,90,0.2);
            cursor: default;
        }
        .demo-free-badge {
            display: inline-block;
            background: #e8f5e9;
            color: #2e7d32;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 2px 10px;
            border-radius: 20px;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .demo-widget-header h3 { font-size: 1.1rem; color: #3d2817; margin: 0; }
        .demo-input-row {
            display: flex;
            gap: 8px;
            align-items: flex-end;
            position: relative;
            z-index: 10;
        }
        .demo-textarea {
            flex: 1;
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 10px 12px;
            font-size: 0.95rem;
            resize: none;
            font-family: inherit;
            line-height: 1.5;
            transition: border-color 0.15s;
        }
        .demo-textarea:focus { outline: none; border-color: #C5A059; }
        .demo-send-btn {
            background: #C5A059;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 12px 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s;
            flex-shrink: 0;
            min-width: 48px;
            min-height: 48px;
            position: relative;
            z-index: 10;
        }
        .demo-send-btn:hover { background: #b8913f; }
        .demo-send-btn:disabled { background: #ccc; cursor: not-allowed; }
        .demo-disclaimer { font-size: 0.75rem; color: #999; margin: 10px 0 0 0; text-align: center; }
        .demo-user-question {
            background: #f0e8d5;
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 0.92rem;
            color: #3d2817;
            margin-bottom: 12px;
        }
        .demo-answer-container { margin-bottom: 16px; }
        .demo-answer-wrapper {
            position: relative;
            min-height: 180px;
            max-height: 320px;
            overflow: hidden;
            margin-bottom: 14px;
        }
        .demo-answer-text { font-size: 1rem; color: #333; line-height: 1.7; }
        .demo-answer-fade {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: linear-gradient(transparent, #fff);
            pointer-events: none;
            transition: opacity 0.2s;
        }
        .demo-answer-wrapper.expanded { max-height: none; overflow: visible; }
        .demo-answer-wrapper.expanded .demo-answer-fade { opacity: 0; }
        .demo-expand-btn {
            display: block;
            width: 100%;
            background: none;
            border: none;
            color: #C5A059;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            padding: 6px 0 10px;
            text-align: center;
            margin-top: -4px;
        }
        .demo-expand-btn:hover { color: #b8913f; text-decoration: underline; }
        .demo-cta { text-align: center; }
        .demo-cta .lp-btn-primary { font-size: 0.9rem; padding: 10px 20px; }
        @media (max-width: 768px) {
            .lp-hero-image { order: -1; max-width: 100%; margin: 0; }
            .demo-widget-outer { max-width: 100%; text-align: left; }
            .demo-widget { padding: 20px 16px; }
            .demo-disclaimer { text-align: center; }
            .demo-cta .lp-btn-primary { width: 100%; display: block; text-align: center; }
        }

        /* Google Sign-In button */
        .auth-google-section { margin-bottom: 12px; }
        .btn-google {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 11px 16px;
            background: #fff;
            border: 1.5px solid #dadce0;
            border-radius: 8px;
            font-size: 0.95rem;
            font-weight: 500;
            color: #3c4043;
            text-decoration: none;
            transition: background 0.15s, box-shadow 0.15s;
            cursor: pointer;
        }
        .btn-google:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
        .auth-divider {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 12px 0;
            color: #aaa;
            font-size: 0.85rem;
        }
        .auth-divider::before, .auth-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #e5e5e5;
        }

/* ── Auth-modal (Frankrike) ── */
.auth-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem}
.auth-modal.hidden{display:none}
.auth-modal-backdrop{position:absolute;inset:0;background:rgba(20,24,40,.55);backdrop-filter:blur(3px)}
.auth-modal-content{position:relative;background:#fff;border-radius:16px;max-width:420px;width:100%;padding:2rem;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.auth-modal-close{position:absolute;top:.75rem;right:1rem;border:none;background:none;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--lp-muted,#667)}
.login-header{text-align:center;margin-bottom:1.25rem}
.login-header h2{margin:.25rem 0;color:var(--lp-dark,#1a2236)}
.login-header p{color:var(--lp-muted,#667);font-size:.95rem}
.auth-tabs{display:flex;gap:.5rem;margin-bottom:1.25rem;border-bottom:1px solid var(--lp-border,#e5e7eb)}
.auth-tab{flex:1;padding:.6rem;border:none;background:none;font-weight:600;color:var(--lp-muted,#667);cursor:pointer;border-bottom:2px solid transparent}
.auth-tab.active{color:var(--lp-gold,#C5A059);border-bottom-color:var(--lp-gold,#C5A059)}
.auth-form{display:flex;flex-direction:column;gap:.35rem}
.auth-form label{font-size:.85rem;font-weight:600;color:var(--lp-dark,#1a2236);margin-top:.5rem}
.auth-form input{padding:.7rem .85rem;border:1px solid var(--lp-border,#d1d5db);border-radius:9px;font-size:1rem}
.auth-form input:focus{outline:none;border-color:var(--lp-gold,#C5A059)}
.auth-form .lp-btn{margin-top:1rem;width:100%;justify-content:center}
.auth-error{color:#c0392b;font-size:.9rem;margin-top:.5rem}
.auth-error.hidden,.field-hidden,#field-name.hidden{display:none}
.lp-lang-select{padding:.4rem .5rem;border:1px solid var(--lp-border,#d1d5db);border-radius:8px;background:#fff;font-size:.9rem;cursor:pointer}