.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1) }
        .reveal.visible { opacity: 1; transform: translateY(0) }
        .lp-section { padding: 96px 0 }
        .lp-section-head { max-width: 620px }
        .lp-section-sub { font-size: 15px; color: #6b7280; margin-top: 12px; line-height: 1.6 }
        .lp-label { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9ca3af; margin-bottom: 14px }
        .lp-label-line { flex: 1; max-width: 40px; height: 1px; background: #e5e7eb; display: inline-block }
        .lp-title { font-size: clamp(28px, 4vw, 48px); font-weight: 600; color: #1d1d1f; letter-spacing: -1px; line-height: 1.1; margin: 0 }

        .lp-hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center }

        /* Landing navbar keeps the original shared floating pill; only button colors are tuned below */

        .lp-btn-primary { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: #fff !important; background: #1d1d1f; border-radius: 8px; padding: 11px 22px; text-decoration: none; transition: opacity .2s }
        .lp-btn-primary:hover { opacity: .78 }
        .lp-btn-ghost { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: #6b7280 !important; text-decoration: none; padding: 11px 18px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; transition: all .2s }
        .lp-btn-ghost:hover { color: #1d1d1f !important; border-color: #d1d5db }

        .lp-screenshot-wrap { padding: 0 0 96px; position: relative }
        .lp-screenshot-frame { border-radius: 14px; overflow: hidden; border: 1px solid #e5e7eb; box-shadow: 0 2px 6px rgba(0,0,0,.03), 0 24px 64px rgba(0,0,0,.07); position: relative; z-index: 1 }
        .lp-screenshot-bar { background: #f9fafb; border-bottom: 1px solid #f0f0f0; padding: 12px 16px; display: flex; gap: 6px }
        .lp-bar-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5e7eb; display: inline-block }
        .lp-screenshot { width: 100%; display: block }

        .lp-ticker-wrap { overflow: hidden; border-bottom: 1px solid #f0f0f0; padding: 18px 0; margin-bottom: 96px }
        .lp-ticker-track { display: flex; width: max-content; animation: lp-ticker 32s linear infinite }
        .lp-ticker-item { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: #9ca3af; white-space: nowrap; padding: 0 36px }
        .lp-ticker-dot { width: 4px; height: 4px; border-radius: 50%; background: #d1d5db; flex-shrink: 0 }
        @keyframes lp-ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }

        .lp-feature-card { padding: 24px; border: 1px solid #ebebeb; border-radius: 14px; height: 100%; background: #fff; position: relative; overflow: hidden; transition: border-color .2s, transform .2s }
        .lp-feature-card:hover { border-color: #e5e7eb; transform: translateY(-3px) }
        .lp-feature-icon { font-size: 22px; color: #1d1d1f; margin-bottom: 18px; display: block }
        .lp-feature-title { font-size: 15px; font-weight: 600; color: #1d1d1f; margin-bottom: 8px; letter-spacing: -.2px }
        .lp-feature-desc { font-size: 13px; color: #6b7280; line-height: 1.65 }

        .lp-steps-section { background: transparent }
        .lp-step { padding: 28px 0; border-top: 2px solid #1d1d1f }
        .lp-step-num { font-size: 11px; font-weight: 600; color: #9ca3af; letter-spacing: .1em; margin-bottom: 16px }
        .lp-step-title { font-size: 17px; font-weight: 600; color: #1d1d1f; margin-bottom: 10px; letter-spacing: -.2px }
        .lp-step-desc { font-size: 13px; color: #6b7280; line-height: 1.65 }

        .lp-check-item { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid #ebebeb; border-radius: 12px; background: #fff; transition: border-color .15s }
        .lp-check-item:hover { border-color: #e5e7eb }
        .lp-check-icon { font-size: 18px; color: #1d1d1f; flex-shrink: 0 }
        .lp-check-text { font-size: 13px; color: #374151; line-height: 1.5 }

        .lp-review-card { padding: 28px; border: 1px solid #ebebeb; border-radius: 14px; height: 100%; background: #fff; transition: transform .2s }
        .lp-review-card:hover { transform: translateY(-3px) }
        .lp-stars { font-size: 13px; color: #1d1d1f; margin-bottom: 16px; letter-spacing: 3px }
        .lp-review-text { font-size: 14px; color: #374151; line-height: 1.7; margin-bottom: 20px }
        .lp-reviewer-name { font-size: 13px; font-weight: 600; color: #1d1d1f }
        .lp-reviewer-role { font-size: 12px; color: #9ca3af; margin-top: 3px }

        .lp-type-tab { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #6b7280; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 16px; cursor: pointer; transition: all .15s; position: relative }
        .lp-type-tab:hover { color: #1d1d1f; border-color: #d1d5db }
        .lp-type-tab.active { background: #1d1d1f; color: #fff; border-color: #1d1d1f }

        .lp-plan-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 28px; height: 100%; position: relative; transition: border-color .2s }
        .lp-plan-featured { border-color: #1d1d1f; border-width: 1.5px }
        .lp-plan-popular { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: #fff; background: #1d1d1f; border-radius: 20px; padding: 3px 14px; white-space: nowrap }
        .lp-plan-name { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #9ca3af; margin-bottom: 16px }
        .lp-plan-price { font-size: 38px; font-weight: 600; color: #1d1d1f; letter-spacing: -1.5px; line-height: 1; margin-bottom: 6px }
        .lp-plan-currency { font-size: 16px; font-weight: 400; color: #6b7280; letter-spacing: 0 }
        .lp-plan-divider { height: 1px; background: #f0f0f0; margin: 20px 0 }
        .lp-plan-features { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 9px }
        .lp-plan-features li { font-size: 13px; color: #374151; display: flex; align-items: center; gap: 8px }
        .lp-plan-features li i { color: #22c55e; font-weight: 700; font-size: 14px; flex-shrink: 0 }
        .lp-plan-btn-primary { display: block; font-size: 13px; font-weight: 500; color: #fff !important; background: #1d1d1f; border: none; border-radius: 8px; padding: 10px 16px; text-decoration: none; transition: opacity .15s; cursor: pointer; width: 100% }
        .lp-plan-btn-primary:hover { opacity: .8 }
        .lp-plan-btn-ghost { display: block; font-size: 13px; font-weight: 500; color: #6b7280 !important; background: transparent; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 16px; text-decoration: none; transition: all .15s; cursor: pointer; width: 100% }
        .lp-plan-btn-ghost:hover { color: #1d1d1f !important; border-color: #d1d5db }

        .lp-accordion { border-top: 1px solid #ebebeb }
        .lp-faq-item { border: none; border-bottom: 1px solid #ebebeb; background: transparent }
        .lp-faq-btn { font-size: 14px; font-weight: 500; color: #1d1d1f; background: transparent; padding: 20px 0; box-shadow: none !important }
        .lp-faq-btn:not(.collapsed) { color: #1d1d1f; background: transparent }
        .lp-faq-btn::after { filter: grayscale(1) opacity(.5) }
        .lp-faq-body { font-size: 13px; color: #6b7280; line-height: 1.7; padding: 0 0 20px }

        .lp-cta { padding: 0 0 96px }
        .lp-cta-inner { background: transparent; border: 1px solid #ececec; border-radius: 20px; padding: 80px 60px; text-align: center; position: relative; overflow: hidden }
        .lp-cta-title { font-size: clamp(32px, 5vw, 56px); font-weight: 600; color: #0a0a0a; letter-spacing: -1.5px; line-height: 1.08; margin-bottom: 14px; position: relative }
        .lp-cta-sub { font-size: 15px; color: #6b7280; margin-bottom: 36px; position: relative }
        .lp-btn-cta { display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: #fff !important; background: #0a0a0a; border-radius: 8px; padding: 11px 22px; text-decoration: none; transition: opacity .2s; position: relative }
        .lp-btn-cta:hover { opacity: .85 }
        .lp-btn-ghost-dark { display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.5) !important; text-decoration: none; padding: 11px 16px; border-radius: 8px; transition: all .2s; position: relative }
        .lp-btn-ghost-dark:hover { color: #fff !important }

        .lp-footer { padding: 48px 0 32px; border-top: 1px solid #f0f0f0 }
        .lp-footer-brand { font-size: 16px; font-weight: 600; color: #1d1d1f; letter-spacing: -.4px }
        .lp-footer-link { font-size: 13px; color: #9ca3af; text-decoration: none; transition: color .15s }
        .lp-footer-link:hover { color: #1d1d1f }
        .lp-footer-bottom { margin-top: 32px; padding-top: 24px; border-top: 1px solid #f0f0f0; font-size: 12px; color: #9ca3af }

        .lp-hero {
            padding: 150px 0 120px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .lp-hero-title { font-size: clamp(28px, 5vw, 46px); font-weight: 600; color: #1d1d1f; letter-spacing: -1.5px; line-height: 1.15; margin-bottom: 20px }
        .lp-hero-sub { font-size: 16px; color: #6b7280; line-height: 1.7; margin-bottom: 40px; max-width: 480px; margin-left: auto; margin-right: auto }

        @media(max-width:768px) {
            .lp-hero { padding: 110px 0 80px }
            .lp-section { padding: 72px 0 }
            .lp-cta-inner { padding: 48px 24px; border-radius: 16px }
        }

        /* ── Landing navbar: keep the original pill, just tune button colors ── */
        .cxnav .cxnav-chip:not(.cxnav-chip-dark) { color: #52525b !important; }
        .cxnav .cxnav-chip:not(.cxnav-chip-dark):hover { color: #0a0a0a !important; background: rgba(17, 17, 17, 0.05); }
        .cxnav .cxnav-chip-dark {
            color: #fff !important;
            background: #0a0a0a !important;
            transition: opacity .15s, background .15s, color .15s;
        }
        .cxnav .cxnav-chip-dark:hover { opacity: .85; color: #fff !important; }
        .cxnav .cxnav-login { color: #374151 !important; }
        .cxnav .cxnav-login:hover { color: #0a0a0a !important; background: rgba(17, 17, 17, 0.05); }
        .cxnav .cxnav-cta { background: #0a0a0a !important; color: #fff !important; }
        .cxnav .cxnav-cta:hover { opacity: .85; color: #fff !important; }