:root {
            --blue:
                #5664f5;

            --blue-dark:
                #3948e8;

            --blue-soft:
                #eef1ff;

            --black:
                #111827;

            --text:
                #253047;

            --muted:
                #68748c;

            --line:
                #e5e9f2;

            --surface:
                #ffffff;

            --page:
                #f7f9fc;

            --success:
                #168a52;

            --radius-lg:
                24px;

            --radius-md:
                16px;

            --shadow:
                0 22px 60px
                rgba(
                    34,
                    45,
                    80,
                    0.10
                );
        }


        * {
            box-sizing:
                border-box;
        }


        html {
            scroll-behavior:
                smooth;
        }


        body {
            margin:
                0;

            background:
                var(--page);

            color:
                var(--black);

            font-family:
                Inter,
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            -webkit-font-smoothing:
                antialiased;
        }


        a {
            color:
                inherit;

            text-decoration:
                none;
        }


        button,
        a {
            -webkit-tap-highlight-color:
                transparent;
        }


        .site-shell {
            min-height:
                100vh;
        }


        .site-nav {
            position:
                sticky;

            top:
                0;

            z-index:
                50;

            border-bottom:
                1px solid
                rgba(
                    229,
                    233,
                    242,
                    0.86
                );

            background:
                rgba(
                    255,
                    255,
                    255,
                    0.92
                );

            backdrop-filter:
                blur(
                    18px
                );
        }


        .nav-inner,
        .section-inner,
        .footer-inner {
            width:
                min(
                    1160px,
                    calc(
                        100% - 40px
                    )
                );

            margin:
                0 auto;
        }


        .nav-inner {
            min-height:
                72px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                24px;
        }


        .brand {
            display:
                inline-flex;

            align-items:
                center;

            gap:
                11px;

            font-weight:
                800;

            letter-spacing:
                -0.02em;
        }


        .brand-mark {
            width:
                38px;

            height:
                38px;

            display:
                grid;

            place-items:
                center;

            border-radius:
                12px;

            background:
                linear-gradient(
                    145deg,
                    #6d79ff,
                    #4756eb
                );

            color:
                #ffffff;

            box-shadow:
                0 8px 22px
                rgba(
                    86,
                    100,
                    245,
                    0.28
                );
        }


        .nav-links {
            display:
                flex;

            align-items:
                center;

            gap:
                26px;

            color:
                var(--muted);

            font-size:
                14px;

            font-weight:
                650;
        }


        .nav-links a {
            transition:
                color
                0.18s ease;
        }


        .nav-links a:hover {
            color:
                var(--black);
        }


        .nav-actions {
            display:
                flex;

            align-items:
                center;

            gap:
                10px;
        }


        .button {
            min-height:
                42px;

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                center;

            gap:
                8px;

            padding:
                0 17px;

            border:
                1px solid
                transparent;

            border-radius:
                12px;

            font-size:
                14px;

            font-weight:
                750;

            cursor:
                pointer;

            transition:
                transform
                0.18s ease,
                box-shadow
                0.18s ease,
                background
                0.18s ease;
        }


        .button:hover {
            transform:
                translateY(
                    -1px
                );
        }


        .button.primary {
            background:
                var(--blue);

            color:
                #ffffff;

            box-shadow:
                0 10px 24px
                rgba(
                    86,
                    100,
                    245,
                    0.22
                );
        }


        .button.primary:hover {
            background:
                var(--blue-dark);
        }


        .button.secondary {
            border-color:
                var(--line);

            background:
                #ffffff;

            color:
                var(--black);
        }


        .hero {
            position:
                relative;

            overflow:
                hidden;

            padding:
                104px
                0
                86px;

            background:
                radial-gradient(
                    circle
                    at 80% 18%,
                    rgba(
                        86,
                        100,
                        245,
                        0.15
                    ),
                    transparent
                    34%
                ),
                linear-gradient(
                    180deg,
                    #ffffff 0%,
                    #f7f9fc 100%
                );
        }


        .hero::after {
            content:
                "";

            position:
                absolute;

            width:
                440px;

            height:
                440px;

            right:
                -180px;

            bottom:
                -250px;

            border-radius:
                50%;

            background:
                rgba(
                    86,
                    100,
                    245,
                    0.08
                );

            filter:
                blur(
                    2px
                );
        }


        .hero-grid {
            position:
                relative;

            z-index:
                1;

            display:
                grid;

            grid-template-columns:
                minmax(
                    0,
                    1.08fr
                )
                minmax(
                    360px,
                    0.92fr
                );

            gap:
                70px;

            align-items:
                center;
        }


        .eyebrow {
            width:
                fit-content;

            display:
                inline-flex;

            align-items:
                center;

            gap:
                8px;

            margin-bottom:
                20px;

            padding:
                8px
                12px;

            border:
                1px solid
                #dfe4ff;

            border-radius:
                999px;

            background:
                #f6f7ff;

            color:
                var(--blue-dark);

            font-size:
                13px;

            font-weight:
                800;
        }


        .eyebrow-dot {
            width:
                7px;

            height:
                7px;

            border-radius:
                50%;

            background:
                var(--blue);
        }


        .hero h1 {
            max-width:
                720px;

            margin:
                0;

            color:
                #0d1320;

            font-size:
                clamp(
                    44px,
                    6vw,
                    72px
                );

            line-height:
                1.03;

            letter-spacing:
                -0.055em;
        }


        .hero h1 span {
            color:
                var(--blue);
        }


        .hero-copy {
            max-width:
                660px;

            margin:
                24px
                0
                0;

            color:
                var(--muted);

            font-size:
                18px;

            line-height:
                1.75;
        }


        .hero-actions {
            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                12px;

            margin-top:
                34px;
        }


        .hero-actions .button {
            min-height:
                48px;

            padding:
                0 21px;
        }


        .hero-note {
            margin-top:
                16px;

            color:
                #7d8799;

            font-size:
                12px;
        }


        .preview {
            position:
                relative;

            padding:
                18px;

            border:
                1px solid
                #e2e6f0;

            border-radius:
                26px;

            background:
                rgba(
                    255,
                    255,
                    255,
                    0.88
                );

            box-shadow:
                var(--shadow);
        }


        .preview-top {
            display:
                flex;

            align-items:
                center;

            gap:
                7px;

            margin-bottom:
                14px;
        }


        .preview-dot {
            width:
                9px;

            height:
                9px;

            border-radius:
                50%;

            background:
                #d8dce7;
        }


        .preview-panel {
            padding:
                22px;

            border-radius:
                20px;

            background:
                #111318;

            color:
                #ffffff;
        }


        .preview-channel {
            color:
                #aeb6c8;

            font-size:
                12px;

            font-weight:
                700;
        }


        .chat-line {
            display:
                flex;

            gap:
                12px;

            margin-top:
                20px;
        }


        .chat-avatar {
            width:
                36px;

            height:
                36px;

            flex:
                0 0 auto;

            display:
                grid;

            place-items:
                center;

            border-radius:
                50%;

            background:
                #252a34;

            font-size:
                12px;

            font-weight:
                800;
        }


        .chat-avatar.bot {
            background:
                var(--blue);
        }


        .chat-body {
            min-width:
                0;
        }


        .chat-name {
            font-size:
                13px;

            font-weight:
                800;
        }


        .chat-message {
            margin-top:
                4px;

            color:
                #d7dbe5;

            font-size:
                13px;

            line-height:
                1.6;
        }


        .mini-badge {
            display:
                inline-flex;

            margin-top:
                8px;

            padding:
                5px
                8px;

            border-radius:
                8px;

            background:
                rgba(
                    86,
                    100,
                    245,
                    0.18
                );

            color:
                #bfc6ff;

            font-size:
                11px;

            font-weight:
                750;
        }


        .section {
            padding:
                88px
                0;
        }


        .section.white {
            background:
                #ffffff;
        }


        .section-heading {
            max-width:
                700px;

            margin-bottom:
                34px;
        }


        .section-heading.center {
            margin-left:
                auto;

            margin-right:
                auto;

            text-align:
                center;
        }


        .section-heading h2 {
            margin:
                0;

            font-size:
                clamp(
                    30px,
                    4vw,
                    44px
                );

            letter-spacing:
                -0.04em;
        }


        .section-heading p {
            margin:
                14px
                0
                0;

            color:
                var(--muted);

            font-size:
                16px;

            line-height:
                1.7;
        }


        .feature-grid {
            display:
                grid;

            grid-template-columns:
                repeat(
                    3,
                    minmax(
                        0,
                        1fr
                    )
                );

            gap:
                18px;
        }


        .feature-card {
            padding:
                26px;

            border:
                1px solid
                var(--line);

            border-radius:
                var(--radius-md);

            background:
                #ffffff;
        }


        .feature-icon {
            width:
                42px;

            height:
                42px;

            display:
                grid;

            place-items:
                center;

            margin-bottom:
                18px;

            border-radius:
                12px;

            background:
                var(--blue-soft);

            color:
                var(--blue);

            font-weight:
                900;
        }


        .feature-card h3 {
            margin:
                0;

            font-size:
                17px;
        }


        .feature-card p {
            margin:
                10px
                0
                0;

            color:
                var(--muted);

            font-size:
                14px;

            line-height:
                1.65;
        }


        .pricing-grid {
            display:
                grid;

            grid-template-columns:
                repeat(
                    2,
                    minmax(
                        0,
                        1fr
                    )
                );

            gap:
                20px;

            max-width:
                900px;

            margin:
                0 auto;
        }


        .pricing-card {
            position:
                relative;

            padding:
                30px;

            border:
                1px solid
                var(--line);

            border-radius:
                var(--radius-lg);

            background:
                #ffffff;
        }


        .pricing-card.premium {
            border-color:
                #bfc6ff;

            box-shadow:
                0 18px 48px
                rgba(
                    86,
                    100,
                    245,
                    0.13
                );
        }


        .plan-chip {
            width:
                fit-content;

            padding:
                6px
                9px;

            border-radius:
                999px;

            background:
                #f0f2f7;

            color:
                #4e596c;

            font-size:
                11px;

            font-weight:
                850;

            letter-spacing:
                0.04em;
        }


        .premium .plan-chip {
            background:
                var(--blue-soft);

            color:
                var(--blue-dark);
        }


        .pricing-card h3 {
            margin:
                18px
                0
                6px;

            font-size:
                26px;
        }


        .price {
            display:
                flex;

            align-items:
                baseline;

            gap:
                5px;

            margin:
                10px
                0
                18px;
        }


        .price strong {
            font-size:
                36px;

            letter-spacing:
                -0.04em;
        }


        .price span {
            color:
                var(--muted);

            font-size:
                13px;
        }


        .pricing-card > p {
            color:
                var(--muted);

            line-height:
                1.6;
        }


        .feature-list {
            display:
                grid;

            gap:
                12px;

            margin:
                24px
                0
                28px;

            padding:
                0;

            list-style:
                none;
        }


        .feature-list li {
            display:
                flex;

            align-items:
                flex-start;

            gap:
                10px;

            color:
                var(--text);

            font-size:
                14px;
        }


        .check {
            color:
                var(--success);

            font-weight:
                900;
        }


        .comparison {
            overflow:
                hidden;

            border:
                1px solid
                var(--line);

            border-radius:
                var(--radius-lg);

            background:
                #ffffff;
        }


        .comparison table {
            width:
                100%;

            border-collapse:
                collapse;
        }


        .comparison th,
        .comparison td {
            padding:
                18px
                20px;

            border-bottom:
                1px solid
                var(--line);

            text-align:
                left;

            font-size:
                14px;
        }


        .comparison th {
            background:
                #fafbfe;

            color:
                #495469;

            font-size:
                12px;

            text-transform:
                uppercase;

            letter-spacing:
                0.05em;
        }


        .comparison tr:last-child td {
            border-bottom:
                0;
        }


        .comparison td:not(:first-child),
        .comparison th:not(:first-child) {
            text-align:
                center;
        }


        .yes {
            color:
                var(--success);

            font-weight:
                850;
        }


        .limited {
            color:
                #8c96a8;

            font-weight:
                700;
        }


        .cta-box {
            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                30px;

            padding:
                40px;

            border-radius:
                26px;

            background:
                #111827;

            color:
                #ffffff;
        }


        .cta-box h2 {
            margin:
                0;

            font-size:
                32px;

            letter-spacing:
                -0.035em;
        }


        .cta-box p {
            max-width:
                620px;

            margin:
                10px
                0
                0;

            color:
                #b8c0d0;

            line-height:
                1.65;
        }


        .site-footer {
            border-top:
                1px solid
                var(--line);

            background:
                #ffffff;
        }


        .footer-inner {
            min-height:
                88px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                20px;
        }


        .footer-copy {
            color:
                var(--muted);

            font-size:
                13px;
        }


        .footer-links {
            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                20px;

            color:
                #4e5a70;

            font-size:
                13px;

            font-weight:
                650;
        }


        @media (
            max-width:
            900px
        ) {

            .nav-links {
                display:
                    none;
            }


            .hero {
                padding-top:
                    72px;
            }


            .hero-grid {
                grid-template-columns:
                    1fr;

                gap:
                    46px;
            }


            .feature-grid {
                grid-template-columns:
                    1fr
                    1fr;
            }


            .cta-box {
                align-items:
                    flex-start;

                flex-direction:
                    column;
            }

        }


        @media (
            max-width:
            640px
        ) {

            .nav-inner,
            .section-inner,
            .footer-inner {
                width:
                    min(
                        100% - 28px,
                        1160px
                    );
            }


            .dashboard-link {
                display:
                    none;
            }


            .hero h1 {
                font-size:
                    44px;
            }


            .hero-copy {
                font-size:
                    16px;
            }


            .feature-grid,
            .pricing-grid {
                grid-template-columns:
                    1fr;
            }


            .comparison {
                overflow-x:
                    auto;
            }


            .comparison table {
                min-width:
                    640px;
            }


            .footer-inner {
                align-items:
                    flex-start;

                flex-direction:
                    column;

                justify-content:
                    center;

                padding:
                    24px
                    0;
            }

        }


/* =========================================================
   PUBLIC 404
   ========================================================= */

.public-error-page {
    display: grid;
    min-height: calc(100vh - 160px);
    place-items: center;
    padding: 72px 22px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(86, 100, 245, 0.11),
            transparent 42%
        ),
        var(--page);
}

.public-error-card {
    width: min(680px, 100%);
    padding: 58px 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: center;
}

.public-error-eyebrow {
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.public-error-code {
    margin-top: 12px;
    color: var(--blue);
    font-size: clamp(82px, 16vw, 138px);
    font-weight: 900;
    letter-spacing: -0.08em;
    line-height: 0.95;
}

.public-error-card h1 {
    margin: 18px 0 10px;
    color: var(--black);
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.15;
}

.public-error-card p {
    max-width: 520px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.public-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

@media (max-width: 640px) {
    .public-error-page {
        min-height: calc(100vh - 140px);
        padding: 42px 14px;
    }

    .public-error-card {
        padding: 42px 22px;
    }

    .public-error-actions .button {
        width: 100%;
    }
}

/* ================================================================
   PLATFORM SERVICE STATUS
   ================================================================ */
.platform-status-banner {
    width: 100%;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
}

.platform-status-banner-inner {
    width: min(1120px, calc(100% - 40px));
    min-height: 46px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-size: 13px;
}

.platform-status-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 999px;
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.1);
}

.platform-status-copy {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
}

.platform-status-copy strong {
    white-space: nowrap;
    color: #166534;
}

.platform-status-copy span {
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.platform-status-details {
    margin-left: auto;
    display: flex;
    gap: 12px;
    color: #64748b;
    font-size: 12px;
}

.platform-status-banner.warning { background: #fffaf0; }
.platform-status-banner.warning .platform-status-dot { background: #d97706; box-shadow: 0 0 0 4px rgba(217,119,6,.1); }
.platform-status-banner.warning .platform-status-copy strong { color: #92400e; }
.platform-status-banner.incident { background: #fff7f7; }
.platform-status-banner.incident .platform-status-dot { background: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,.1); }
.platform-status-banner.incident .platform-status-copy strong { color: #991b1b; }

@media (max-width: 720px) {
    .platform-status-banner-inner { align-items: flex-start; flex-wrap: wrap; }
    .platform-status-copy { align-items: flex-start; flex-direction: column; gap: 2px; flex: 1; }
    .platform-status-copy span { white-space: normal; }
    .platform-status-details { width: 100%; margin-left: 21px; flex-wrap: wrap; gap: 5px 12px; }
}

/* Phase 13B.11 — Dynamic plans */
.novus-trial-promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    margin-bottom: 34px;
    border: 1px solid rgba(86, 100, 245, .22);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(86, 100, 245, .08), rgba(255, 255, 255, .92));
}

.novus-trial-promo > div {
    display: grid;
    gap: 7px;
}

.novus-trial-promo strong {
    font-size: 1.16rem;
}

.novus-trial-promo p {
    margin: 0;
    color: var(--muted, #64748b);
}

.novus-duration-grid {
    display: grid;
    gap: 8px;
    margin: 18px 0;
}

.novus-duration-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 11px;
    background: rgba(255, 255, 255, .55);
}

.novus-duration-option > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.novus-duration-option span {
    font-size: .73rem;
    font-weight: 700;
    color: #4f46e5;
}

@media (max-width: 720px) {
    .novus-trial-promo {
        align-items: stretch;
        flex-direction: column;
    }

    .novus-trial-promo .button {
        width: 100%;
    }
}

/* Phase 13B.11 enhancement — compact comparison states */
.comparison .plan-value-included,
.comparison .plan-value-limited,
.comparison .plan-value-none {
    display: inline-flex;
    min-width: 32px;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    font-weight: 850;
}

.comparison .plan-value-included {
    color: var(--success);
    font-size: 18px;
}

.comparison .plan-value-limited,
.comparison .plan-value-none {
    color: #98a2b3;
}

.comparison .plan-value-limited {
    font-size: 13px;
    font-weight: 700;
}

.comparison .plan-value-none {
    font-size: 18px;
}